RegreCSS (a.k.a. "cssdiff")
RegreCSS is a tool that diffs the computed style of DOM nodes between two similar HTML documents.
Currently a proof-of-concept, this tool/algorithm will compare the computed styles of two documents' nodes and report on the differences. In other words: RegreCSS will determine if there any CSS differences between two identical HTML docs with slightly different CSS rules. (Think: getComputedStyle()
on every single node.) This can be particularly useful when regression testing CSS to ensure that a seemingly minor CSS change does adversely affect unintended elements on a page, or even the entire site (when used in batch mode).
Background
At my day job it's not uncommon for us to produce many dozens of front-end pages/templates for a single project. Over the course of the project it usually becomes necessary to adjust some core CSS rules (those at the top of the cascade) to accommodate a new variant of content/design. After many pages are been coded, we need to confirm that the newly-tweaked CSS only the desired elements. Visual comparison is tedious and usually
Notes
- Everything (code, functionality, UI) is very much in a pre-alpha state right now and will definitely be changing. The idea is to release early and often (cross your fingers).
- All of the output is currently done via
console.log()
, so make sure you're got one of those in your browser. An actual in-browser UI is coming Real Soon Now (see above). - The HTML and DOM structure of the pages you're comparing should be identical down to the content. The use case doesn't really make sense if they're not. Think about it.
- Animated JS elements that start on page load present a challenge and are not accounted for. See KNOWN ISSUES in
regrecss.js
. - Vendor prefixes are being ignored now; it'll be an easily configurable option in the future.
How to Use
- Check out two copies of your codebase in your local web server's docroot, each at a different revision/tag/branch/etc.
- Drop the
regrecss
folder in your local web server's docroot and hit it up over HTTP. - Ensure your browser's webdev tools are enabled and visible (Firebug, Web Inspector, etc.)
- Copy/paste the URLs of the two versions of the file into
regrecss
's URL fields and click 'RegreCSS!'.
Future Direction
- More configuration options.
- Command-line interface to allow for automation. (Think headless browser.)
License
RegreCSS
is licensed under the terms of the MIT License, see the included LICENSE file.