Rhiana Heath
Rhiana is a front end developer specialising in making web sites and applications accessible for people with disabilities. Combining her background in educational psychology and a love of computers.
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!
Move over TypeScript, here comes TypedCSS!
By Rhiana Heath
Move over TypeScript, here comes TypedCSS!
WWC March 2021, Hover April 2021
Loading comments...
