Smartial Wayback Machine Text Extractor



Live version of this page DOES NOT exist (#404)


This article contains 1 images. You will find them at the very end of the article.

This article contains 325 words.

Web Directions hover 2021

Session Details

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.

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.

Don't miss your chance to see Rhiana Heath and many other inspiring speakers at the very first Hover conference.

Tickets start at just $145, for two in-depth days with the world's leading CSS experts.

Register Now



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.



Please close this window manually.