Move over TypeScript,
here comes TypedCSS!
Rhiana Heath
Blake eLearning
Web Directions Hover 2021
Now with Types!
What are Types?
Strings
Array
Numbers
Hash
Why even have Types?
- Better errors
- Code the documents itself
- Faster performance
So What Types does CSS have currently?
const widthOfFoo = $('.foo').css('width')
typeof widthOfFoo === 'string'.foo {
width: 500px;
}!
Invalid property value
.foo {
width: 500pxs;
}What is Typed CSS?
Typed Object Model (OM)
Paint API
Layout API
Properties and Values API
And More!
What are CSS Typed OM?
Keyword
Unit
Position
Image
Disclaimer Time!
Disclaimer Time!
+
const foo = $('.foo')
foo.css('width')
// "500px"
foo.attributeStyleMap.get('width');
// CSSUnitValue {
// value: 500,
// unit: 'px'
// }.foo {
width: 500px;
}const foo = $('.foo')
foo.css('width')
// "500px"
foo.attributeStyleMap
.set('width', CSS.percent(50));
foo.attributeStyleMap.get('width');
// CSSUnitValue {
// value: 50,
// unit: 'percent'
// }.foo {
width: 500px;
}const foo = $('.foo')
foo.css('width')
// "500px"
const sum = new CSSMathSum(
CSS.percent(100),
CSS.px(20)
);
CSS.vw(100).add(sum).toString()
// "calc(100vw + (100% + 20px))"
foo.attributeStyleMap.set('width', sum);.foo {
width: 500px;
}const foo = $('.foo').computedStyleMap();
cs.get('width');
// CSSMathSum {
// operator: 'sum',
// length: 3,
// values: CSSNumericArray {
// 0: CSSUnitValue { value: 100, unit: 'vw' },
// 1: CSSUnitValue { value: 100, unit: 'percent' },
// 2: CSSUnitValue { value: 20, unit: 'px' },
// },
// }
.foo {
width: calc(100vw + (100% + 20px));
}try {
const css = CSSStyleValue
.parse('width', 'CSS.px(not a value)');
// use css
} catch (error) {
console.error(`${error}: please supply a valid width value`)
}
Thanks!
