CSS Object Model implementation and CSS parser

Downloads in past


500.3.0-patch29 years ago13 years agoMinified + gzip package size for cssom-papandreou in KB


CSSOM.js is a CSS parser written in pure JavaScript. It also a partial implementation of CSS Object Model.
CSSOM.parse("body {color: black}")
-> {
  cssRules: [
      selectorText: "body",
      style: {
        0: "color",
        color: "black",
        length: 1

Parser demo

Works well in Google Chrome 6+, Safari 5+, Firefox 3.6+, Opera 10.63+. Doesn't work in IE < 9 because of unsupported getters/setters.
To use CSSOM.js in the browser you might want to build a one-file version that exposes CSSOM global variable:
➤ git clone https://github.com/NV/CSSOM.git
➤ cd CSSOM
➤ npm install -d
➤ ./node_modules/.bin/jake
build/CSSOM.js is done
To use it with Node.js or any other CommonJS loader:
➤ npm install cssom

Don’t use it if...

You parse CSS to mungle, minify or reformat the following code:
div {
  background: gray;
  background: linear-gradient(to bottom, white 0%, black 100%);

This pattern is often used to give browsers that don’t understand linear gradients a fallback solution (e.g. gray color in the example). In CSSOM, background: gray gets overwritten%3B%0A%7D). The last same-name property always overwrites all the previous ones.
If you do CSS mungling, minification, image inlining, and such, CSSOM.js is no good for you, considere using one of the following:
one of the forks: 1, 2 reworkcss/css csso mensch


To run specs locally:
➤ git submodule init
➤ git submodule update

Who uses CSSOM.js