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

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

John Allsopp 9th March, 2021 @johnallsopp

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.

Great reading, every weekend.

We round up the best writing about the web and send it your way each Friday morning.

delivering year round learning for front end and full stack professionals

Learn more about us

Out of any conference, Web Directions is far and away our favourite

Dave Greiner Founder, Campaign Monitor

We've 6 specialised front end focussed conferences lined up for 2021. Featuring unique content, leading experts, and they'll help you keep up with our ever changing industry. Attend one, or all at an amazing price.

The conference CSS deserves

Exclusively OnlineApril 2021

Learn More

a conference on front end performance

Exclusively OnlineMay 2021

Learn More

a conference all about JavaScript

Exclusively OnlineJune 2021

Learn More

a conference on progressive web apps and web platform

Exclusively OnlineSeptember 2021

Learn More

2 more front end focussed conferences still TBA.

Exclusively OnlineLate 2021

Learn More

Images:

The images are downsized due to limited space here. The original dimensions may differ.
Click on the image to open it on a new tab.