| 1 | # CSSOM
|
|---|
| 2 |
|
|---|
| 3 | CSSOM.js is a CSS parser written in pure JavaScript. It is also a partial implementation of [CSS Object Model](http://dev.w3.org/csswg/cssom/).
|
|---|
| 4 |
|
|---|
| 5 | CSSOM.parse("body {color: black}")
|
|---|
| 6 | -> {
|
|---|
| 7 | cssRules: [
|
|---|
| 8 | {
|
|---|
| 9 | selectorText: "body",
|
|---|
| 10 | style: {
|
|---|
| 11 | 0: "color",
|
|---|
| 12 | color: "black",
|
|---|
| 13 | length: 1
|
|---|
| 14 | }
|
|---|
| 15 | }
|
|---|
| 16 | ]
|
|---|
| 17 | }
|
|---|
| 18 |
|
|---|
| 19 |
|
|---|
| 20 | ## [Parser demo](http://nv.github.com/CSSOM/docs/parse.html)
|
|---|
| 21 |
|
|---|
| 22 | Works well in Google Chrome 6+, Safari 5+, Firefox 3.6+, Opera 10.63+.
|
|---|
| 23 | Doesn't work in IE < 9 because of unsupported getters/setters.
|
|---|
| 24 |
|
|---|
| 25 | To use CSSOM.js in the browser you might want to build a one-file version that exposes a single `CSSOM` global variable:
|
|---|
| 26 |
|
|---|
| 27 | ➤ git clone https://github.com/NV/CSSOM.git
|
|---|
| 28 | ➤ cd CSSOM
|
|---|
| 29 | ➤ node build.js
|
|---|
| 30 | build/CSSOM.js is done
|
|---|
| 31 |
|
|---|
| 32 | To use it with Node.js or any other CommonJS loader:
|
|---|
| 33 |
|
|---|
| 34 | ➤ npm install cssom
|
|---|
| 35 |
|
|---|
| 36 | ## Don’t use it if...
|
|---|
| 37 |
|
|---|
| 38 | You parse CSS to mungle, minify or reformat code like this:
|
|---|
| 39 |
|
|---|
| 40 | ```css
|
|---|
| 41 | div {
|
|---|
| 42 | background: gray;
|
|---|
| 43 | background: linear-gradient(to bottom, white 0%, black 100%);
|
|---|
| 44 | }
|
|---|
| 45 | ```
|
|---|
| 46 |
|
|---|
| 47 | This pattern is often used to give browsers that don’t understand linear gradients a fallback solution (e.g. gray color in the example).
|
|---|
| 48 | In CSSOM, `background: gray` [gets overwritten](http://nv.github.io/CSSOM/docs/parse.html#css=div%20%7B%0A%20%20%20%20%20%20background%3A%20gray%3B%0A%20%20%20%20background%3A%20linear-gradient(to%20bottom%2C%20white%200%25%2C%20black%20100%25)%3B%0A%7D).
|
|---|
| 49 | It doesn't get preserved.
|
|---|
| 50 |
|
|---|
| 51 | If you do CSS mungling, minification, image inlining, and such, CSSOM.js is no good for you, considere using one of the following:
|
|---|
| 52 |
|
|---|
| 53 | * [postcss](https://github.com/postcss/postcss)
|
|---|
| 54 | * [reworkcss/css](https://github.com/reworkcss/css)
|
|---|
| 55 | * [csso](https://github.com/css/csso)
|
|---|
| 56 | * [mensch](https://github.com/brettstimmerman/mensch)
|
|---|
| 57 |
|
|---|
| 58 |
|
|---|
| 59 | ## [Tests](http://nv.github.com/CSSOM/spec/)
|
|---|
| 60 |
|
|---|
| 61 | To run tests locally:
|
|---|
| 62 |
|
|---|
| 63 | ➤ git submodule init
|
|---|
| 64 | ➤ git submodule update
|
|---|
| 65 |
|
|---|
| 66 |
|
|---|
| 67 | ## [Who uses CSSOM.js](https://github.com/NV/CSSOM/wiki/Who-uses-CSSOM.js)
|
|---|