cssobj demo page
Github Repo
#
Box size adjustment
(with
default-unit
plugin)
lock ratio:
width:
height:
cssText from above CSSOM
#
Animation
cssText from above CSSOM
#
conditional apply css
See Demo
#
Auto vendor prefixer
See Demo
(Please open it in different browser)
#
nested selector + auto vendor prefixer
HTML
<ul> <li><strong>item 1</strong>item <span>content</span>A</li> <li><strong>item 2</strong>item <span>content</span>B</li> <li><strong>item 3</strong>item <span>content</span>C</li> </ul>
CSS (
try to change!
)
{ ul:{ listStyleType: 'disc', flex:1, display:'flex', // for IE imeMode: 'auto', background: ['-webkit-linear-gradient(grey, white)', 'linear-gradient(grey, white)'], transform:'scale(0.8)', borderImage: 'none', li:{ color:'#999', 'span,strong':{ color:'red', '&:after':{ content:'": "' } } } } }
cssText from above CSSOM
#
@media rule in iframe page (Modern & IE >= 8)
iframe width:
300
400
500
open in new window
#
Local Class names
CSS (
try to change!
)
cssText from above CSSOM
#
Set css prop using function
box1 have same width & height
box3's height is twice of box1
box2's height is sum of box1 & 3
CSS (
try to change!
)
{ '.box1':{ $id:'box1', width:10, height: function(prev,node,result) {return node.rawVal.width} }, '.box2':{ $order:2, height: function(prev,node,result) {return result.ref.box1.rawVal.height + result.ref.box3.rawVal.height} }, '.box3':{ $id:'box3', $order:1, height: function(prev,node,result) {return result.ref.box1.rawVal.width*2} } }
cssText from above CSSOM