css-typed-om
v0.4.0
Published
Use CSS Typed Object Model in the browser
Downloads
155
Readme
CSS Typed Object Model
CSS Typed Object Model is a work-in-progress polyfill for using CSS Typed OM Level 1 in the browser.
Pull Requests are welcome. Please don’t use this in production until there is a v1.0.0.
npm install css-typed-om
Polyfill the window
object:
import polyfill from 'css-typed-om';
polyfill(window);
Use CSS Typed Object Model features:
// Element styles
document.body.attributeStyleMap.set('padding-top', CSS.px(42));
document.body.attributeStyleMap.get('padding-top') /* CSSUnitValue {
value: 42,
unit: 'px'
}.toString() => 42px */
document.body.attributeStyleMap.set('opacity', 0.3);
typeof document.body.attributeStyleMap.get('opacity').value // number
document.body.attributeStyleMap.get('opacity').unit // "number"
// Stylesheet rules
document.styleSheets[0].cssRules[0].styleMap.set('padding-top', '100px');
document.styleSheets[0].cssRules[0].styleMap.get('padding-top'); /* CSSUnitValue {
value: 100,
unit: 'px'
}.toString() => 100px */
// Math products
CSS.px(15).add(CSS.rem(10), CSS.em(5)) /* CSSMathSum {
operator: "sum",
values: [
CSSUnitValue { value: 15, unit: 'px' },
CSSUnitValue { value: 10, unit: 'rem' },
CSSUnitValu { value: 5, unit: 'em' }
]
}.toString() => calc(15px + 10rem + 5em) */
CSS.px(15).mul(CSS.rem(10), CSS.em(5)) /* CSSMathProduct {
operator: "product",
values: [
CSSUnitValue { value: 15, unit: 'px' },
CSSUnitValue { value: 10, unit: 'rem' },
CSSUnitValu { value: 5, unit: 'em' }
]
}.toString() => calc(15px * 10rem * 5em) */
CSS.px(15).sub(CSS.rem(10), CSS.em(5)) /* CSSMathSum {
operator: "sum",
values: [
CSSUnitValue { value: 15, unit: 'px' },
CSSUnitValue { value: -10, unit: 'rem' },
CSSUnitValu { value: -5, unit: 'em' }
]
}.toString() => calc(15px + -10rem + -5em) */
CSS.px(15).div(CSS.rem(10), CSS.em(5)) /* CSSMathProduct {
operator: "product",
values: [
CSSUnitValue { value: 15, unit: 'px' },
CSSMathInvert {
operator: 'invert',
value: CSSUnitValue { value: 10, unit: 'rem' }
},
CSSMathInvert {
operator: 'invert',
value: CSSUnitValue { value: 5, unit: 'em' }
}
]
}.toString() => calc(15px / 10rem / 5em) */
CSS.px(15).max(CSS.rem(10), CSS.em(5)) /* CSSMathMax {
operator: 'max',
values: [
CSSUnitValue { value: 15, unit: 'px' },
CSSUnitValue { value: 10, unit: 'rem' },
CSSUnitValu { value: 5, unit: 'em' }
],
}.toString() => max(15px, 10rem, 5em) */
CSS.px(15).min(CSS.rem(10), CSS.em(5)) /* CSSMathMin {
operator: 'min',
values: [
CSSUnitValue { value: 15, unit: 'px' },
CSSUnitValue { value: 10, unit: 'rem' },
CSSUnitValu { value: 5, unit: 'em' }
],
}.toString() => min(15px, 10rem, 5em) */
Features
polyfill
The polyfill
function adds the following functions to window
if they do not
already exist:
CSS
CSSKeywordValue
CSSMathInvert
CSSMathMax
CSSMathMin
CSSMathProduct
CSSMathSum
CSSStyleValue
CSSUnitValue
StylePropertyMap
It then adds the following functions to CSS
if they do not already exist:
number
percent
em
ex
ch
rem
vw
vh
vmin
vmax
cm
mm
in
pt
pc
px
Q
deg
grad
rad
turn
s
ms
Hz
kHz
dpi
dpcm
dppx
fr
The new CSSUnitValue
instances returned by these methods extend
CSSNumericValue
, which allow them to use the following methods:
add
div
max
min
mul
sub
The result of these transforms may be a new CSSUnitValue
instance or a new
CSSMathProduct
, CSSMathMax
, CSSMathMin
, or CSSMathSum
instance.
They all stringify back into compliant CSS.