cssom

CSSOM

CSSOM.js is a CSS parser written in pure JavaScript. It is 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 a single CSSOM global variable:

➤ git clone https://github.com/NV/CSSOM.git
➤ cd CSSOM
➤ node build.js
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 code like this:

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. It does NOT get preserved.

If you do CSS mungling, minification, or image inlining, considere using one of the following:

• postcss
• reworkcss/css
• csso
• mensch

Tests

To run tests locally:

➤ git submodule init
➤ git submodule update

Who uses CSSOM.js

Similar packages

Other packages similar to cssom

jsdom

jsdom is a JavaScript implementation of many web standards, including the DOM and the HTML standards. It allows for the parsing and manipulation of HTML and CSS documents in Node.js. Compared to cssom, jsdom provides a more complete simulation of a web browser's environment, including both HTML and CSS parsing, which makes it heavier but more powerful for certain use cases.

postcss

postcss is a tool for transforming CSS with JavaScript plugins. It can parse CSS into an abstract syntax tree (AST), traverse and modify nodes, and generate modified CSS. Unlike cssom, which focuses on the CSS Object Model, postcss is more about applying transformations and optimizations to CSS files and is often used in build processes.

stylecow

stylecow is a CSS parser, manipulator, and polyfiller. It is similar to cssom in that it allows for parsing and manipulation of CSS, but it also includes features to help developers write modern CSS code that works in older browsers. It has a plugin system for extending its capabilities, which makes it more versatile than cssom for certain tasks.