cssobj/docs/usage-example.md at master

Table of Contents

- Conditional apply CSS demo

var obj = {
  p: [{
    $test: function(){return true},
    color: 'blue'
  }, {
    $test: function(){return false},
    color: 'red'
  }]
}
var result = cssobj(obj)

The CSS is: p {color: blue;}

- local class names

var obj = {
  body: {
    color:'red'
  },
  '.item': {
    fontSize: '12px',
    span: { color: 'blue' }
  }
}
var result = cssobj(obj, {local:true})  // { local: {space:'-james-'} }

This will generate CSSOM in your <head>, with below css:

body {
  color: red;
}
.item_1jkhrb92_ {
  font-size: 12px;
}
.item_1jkhrb92_ span {
  color: blue;
}

Class names will add a random string, you can get class name using below:

/* want localized CSS Selector, use mapSel */
result.mapSel('ul#nav.list')   // === "ul#nav.list_1jkhrb92_"

/* want localized space separated class names (W/O DOT), use mapClass */
result.mapClass('item active')   // === "item_1jkhrb92_ active_1jkhrb92_"

- Dynamicly update you css rule

var obj = {
  div: {fontSize:'12px'}
}
var css = cssobj(obj)

If you want to update the rule later:

... ...
obj.div.fontSize = '14px'
css.update()

- Dynamic caculation

obj.div.width = function(){ return window.innerWidth / 3 + 'px' }
obj.div.height = function(){ return this.width }
result.update()

Then all the div will have same width & height, as 1/3 of window width, magicly!

- @media rule work in old Browsers

cssobj({
  div:{ color:'red' },
  '@media (max-width: 768px)':{
    div:{ color:'green' },
    '@media (min-width: 480px)':{
      div:{ color:'blue' }
    }
  }
})

Then div will have color as red, green and blue accordingly (tested Modern & IE8)

IE8 don't support @media, cssobj will listen to window.resize event, to dynamically enable rule or disable rule in @media scope

Demo for @media (min-width), (max-width)

- Auto vendor prefixer

cssobj will detect current browser's vendor prefix, and auto prefix when the property is invalid for style.

var obj = {
  button: {
    // will prefix for current browser
    appearance: 'none',
    borderImage: 'url(border.png)'
  }
}
var css = cssobj(obj)

Test Demo - BrowserStack Snapshot

- Iframe support

Use with <iframe> is easy:

iframe.onload = function(e){
  cssobj(obj, {cssom: { frame: iframe }})
}