Year round learning for product, design and engineering professionals

Web Directions Hover ’21 session spotlight–Move over TypeScript, here comes TypedCSS!

Move over TypeScript, here comes TypedCSS!

Rhiana Heath, Software Engineer Blake eLearning

Have you ever wondered how a browser makes sense of CSS properties and values?

Turns out by parsing strings. Everything is a string: 50%, string. 2px, string. 0.5, string. #FFF, string.

So what happens when the browser can’t work out what the string is? Such as “width: 24asd;”

It fails silently, warning us with the generic “invalid property value” message. But what if we could assign types to the values? So the browser knew what it was expecting and what was wrong with the value we entered.

This is where the CSS Typed Object Model comes in. It sits under the umbrella of the CSS Houdini API’s and assign types to CSS values. So the browser knows it’s expecting a number, colour or keyword. This allows for more control over attributes and for more useful errors.

In this talk I’m going to take you through the CSS Typed OM and examples of how we can start using and benefiting from TypedCSS.

About Rhiana Heath

Rhiana is known for speaking about CSS and how to make web sites and applications accessible for people with disabilities. She is currently a software engineer at Blake Education. Where she works to build educational software for students around the world. Drawing from her experience in education and psychology from university and as a high school teacher.

When Rhiana is not at work you’ll find her at a local park or zoo with her two children or working on her latest cross stitch pattern.

delivering year round learning for front end and full stack professionals

Learn more about us

I’ve been admiring the Web Directions events for years, and was honored to be part… What a fantastic event!

Ethan Marcotte Inventor of 'Responsive Web Design'