Revenge.css is a CSS bookmarklet that reports bad html using pseudo content. If the page you use it with has malformed links, deprecated attributes, <div>s inside inline elements, inaccessible buttons, badly nested sections or other errors, you'll see some ugly, pink errors written in nobody's favourite font: Comic Sans.

REVENGE.CSS
Just drag me to your bookmarks bar

To use the bookmarklet, just drag it to your bookmarks are press it on any web page you want to test. It's quite helpful on pages with just a few markup problems and creates a largely unreadable lattice of pink crud on very poorly marked-up sites.

Contribute

All the code for revenge.css is held in GitHub. When I say "all the code", I mean just the one CSS file. The file uses a lot of attribute selectors and negation pseudo-classes. Here's a snippet:

a:not([aria-label]):not([aria-labelledby]) img:only-child:not([alt]):after, 
.button:not(a):not(button):not(input):after, 
.btn:not(a):not(button):not(input):after, 
img:not([alt]):after, 
img[alt]:not([alt=""]):after, 
img:not([src]):after, 
figcaption:after, 
form:not([action]):after,  
fieldset > *:first-child:not([legend]):after

If you would like to contribute to revenge.css please do the usual thing and fork the repository, write some CSS and send me a pull request. The master CSS file for the bookmarklet available above is served directly from the repo'. If you think any of the rules are too zealous, not zealous enough or not complete, please write up an issue. Cheers!

Comments

comments powered by Disqus