CSSOM
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/superlc/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-maxim
Fix the situation : one property has multiple values
You parse CSS to mungle, minify or reformat the following code:
div {
display : -webkit-box;
display : -webkit-flex;
display : flex;
}
This pattern is often used to give browsers that don’t understand flex grid a fallback solution. In old CSSOM, the last same-name property always overwrites all the previous ones.But in css-maxim,store the value in an array like
CSSOM.parse("div {display : -webkit-box;display : -webkit-flex;display : flex;}")
-> {
cssRules: [
{
selectorText: "div",
style: {
0: "display",
display: ['-webkit-box','-webkit-flex','flex'],
length: 1
}
}
]
}