Skip to content
CSS Object Model implemented in pure JavaScript. It's also a parser!
JavaScript HTML
Branch: master
Clone or download
Latest commit 9dad7db Nov 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Make a demo page to fix unbalanced comments, quotes, and parenthesis. Feb 5, 2019
lib Allow font-face rules inside of media rules. Fixes #102 Nov 14, 2019
spec
src Add support for CSSSupportsRule (#96) Jun 27, 2018
.gitignore Keep index.js in the repo until a better build system is implemented. Jul 3, 2018
.gitmodules Fix gh-pages build failure Nov 26, 2015
.npmignore Include the MIT license with the npm package Feb 18, 2013
LICENSE.txt Clean up metadata Feb 1, 2016
README.mdown Remove Jake dependency. No CSSOM doesn't have any dependencies! Jul 4, 2019
build.js Remove Jake dependency. No CSSOM doesn't have any dependencies! Jul 4, 2019
package-lock.json Publish v0.4.4. Nov 14, 2019
package.json Publish v0.4.4. Nov 14, 2019

README.mdown

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 doesn't get preserved.

If you do CSS mungling, minification, image inlining, and such, CSSOM.js is no good for you, considere using one of the following:

Tests

To run tests locally:

➤ git submodule init
➤ git submodule update

Who uses CSSOM.js

You can’t perform that action at this time.