A few seconds.


CSS Object Model implementation and CSS parser


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:


To run specs locally:

➤ git submodule init
➤ git submodule update

Who uses CSSOM.js

Pincer is a project which aims to provide best library discovery tools for developers. We're growing day by day. We have only npm platform for now but we will add the others as much as we can.