cansei
Checks your CSS against popular browsers to ensure supported styles are used.
Optionally link to Google Analytics to make the checks more meaningful.
Typical usage
$ npm install -g cansei$ cansei --input my-file.css Result: The following CSS is not supported by at least 1 of your browsers: uses css-property not supported by---- ---------------------------------- ----------------57 border-radius ie 7/8; 34 opacity ie 7/8; 25 box-shadow ie 7/8; 23 outline ie 7; 23 -o-transition ie 7/8/9; 23 -webkit-transition ie 7/8/9; 23 transition ie 7/8/9; 21 -webkit-box-shadow ie 7/8; 19 border-top-right-radius ie 7/8; 18 border-top-left-radius ie 7/8; 17 -moz-transition ie 7/8/9; 16 border-bottom-left-radius ie 7/8; 15 border-bottom-right-radius ie 7/8; 7 box-sizing ie 7; 7 text-shadow ie 7/8/9; 5 background-clip ie 7/8; 4 -moz-box-sizing ie 7; 3 -webkit-box-sizing ie 7; 3 background-size ie 7/8; 2 letter-spacing ie 7/8; 2 -ms-user-
Roadmap
- First dev release (default browser profile only, single-file input)
- Release as package on NPM
- Allow .cansei.json to mark CSS properties as "ignore", "warn" or "error".
- Browser profile generation using Google Analytics (OAuth)
- Multiple file support (globbing, show filenames in output)
- LESS/SCSS support?
- Hound integration or separate service?
cansei?
CSS + caniuse = Cansei de Ser Sexy by CSS
___ ___ ___ ___ ___
/\ \ /\ \ /\__\ /\ \ /\ \ ___
/::\ \ /::\ \ /::| | /::\ \ /::\ \ /\ \
/:/\:\ \ /:/\:\ \ /:|:| | /:/\ \ \ /:/\:\ \ \:\ \
/:/ \:\ \ /::\~\:\ \ /:/|:| |__ _\:\~\ \ \ /::\~\:\ \ /::\__\
/:/__/ \:\__\ /:/\:\ \:\__\ /:/ |:| /\__\ /\ \:\ \ \__\ /:/\:\ \:\__\ __/:/\/__/
\:\ \ \/__/ \/__\:\/:/ / \/__|:|/:/ / \:\ \:\ \/__/ \:\~\:\ \/__/ /\/:/ /
\:\ \ \::/ / |:/:/ / \:\ \:\__\ \:\ \:\__\ \::/__/
\:\ \ /:/ / |::/ / \:\/:/ / \:\ \/__/ \:\__\
\:\__\ /:/ / /:/ / \::/ / \:\__\ \/__/
\/__/ \/__/ \/__/ \/__/ \/__/