Move over TypeScript, here comes TypedCSS!

Rhiana Heath at Hover '21
Sign up for Conffab Pro to watch this and hundreds of other videos for 19.95 a month

Hi, thanks for having me.

Today I'm talking about Typed CSS.

So Typed CSS kind of works the same way as TypeScript works, for JavaScript as it's taking something that doesn't have very strong types at the moment and adding a type system to it.

And this gets us lots of really cool things that we can do with it.

FIrst up what are types? So different languages have different type systems and they can be kind of more strong or kind of more fuzzy than other ones.

This is a way that the programming language can tell what sort of data is coming in, what sort of format is in.

So is it going to be a string? Is it going to be a number? Is it an array ,hash a date, time, all those sorts of things.

This gives it a little bit more information to know how to handle it.

What sort of functions you can do on it and what sort of errors to give, if something goes wrong.

So why do we even have types? So programming language have types for a few different reasons.

One of them is to have better errors so we can have more specific errors to do with what sort of types that we have that also improves the documentation because as we're writing the code, we can put what sort of types we're expecting to go into a function.

For example, we can say that this function is expecting a number or a string and then have different and then manipulate it in different ways, depending on what data is going in.

And it also increases the performance because the programming language has to do a little bit less work to figure out what it's doing.

So I wanted one of the studies that I was looking at was showing that Typed CSS can actually increase the performance of CSS by up to 30%.

So what types of CSS have currently?, so CSS, as you would know, has so many thousands of different combinations of so many different properties, so many different values and so many different ways that we can combine these properties and values.

I tried to come up with a list of this and I really couldn't no there's too many to think of like widths, max width, initials 50%.

500 pixels, whatever.

They're just so, so, so, so, so many things that we can put into CSS.

So how does the browser look at this? What does it look for?.

What sort of types does it find? Well, as I found out, it's just strings it's strings everywhere.

The browser looks at these strings and it tries to figure out from all the strings, which one's the property, which one's the value.

What type of value is this? Is this a keyword? Is this a number? Is this a position value? Is this a URL? There are so many different combinations and we're just treating them like strings everywhere, which is.

Yeah, which is very confusing and it's not the most performance.

So see here when you use JavaScript to get the CSS of the width of this particular class, the type of it is string and it doesn't matter if you're doing 500 pixels in this case, or 0.5 for opacity.

Or anything like that.

If it looks like a number, for example, it's not going to come out as a number it's going to come out as a string, which makes it quite hard.

It makes it quite hard to do any calculations on these.

It makes it quite hard to do any sort of manipulation.

And I think this is part of the reason why we just get this very generic error.

I don't know about you, but I've seen this error a lot of times invalid property value and I've never found it helpful every time I see that one.

I've got no idea what I've done wrong.

I don't know what I've typed wrong.

Maybe I've typed a key word wrong.

Maybe I've used the wrong pixels.

Maybe I sort pixels wrong.

It's just not a very useful error.

So I think we can do a lot better with CSS and have better errors where if we are using types where it can actually give us a bit more information here, so it can tell us what we did wrong and give us a bit more information of how to recover from that error.

I think this would be really good, especially for people who are starting out with CSS, because then they get that little bit more feedback and it will help to improve recovery.

So on to Typed CSS.

So where does Typed CSS live? What it does is it lives under the umbrella of CSS.

Houdini.

CSS Houdini is a number of APIs that are designed so that developers have a better understanding of how the browser works underneath and how the browser renders CSS.

So they've got a few different APIs, I think, seven in all.

So I've just put a few here.

One of the more common ones that you've might've seen already is the paint API.

So this one lets you do like really funky background images, and colors and all that sort of stuff.

The layout API is coming soon.

Very exciting.

I am hoping to get into that one after I've learned more about Typed CSS.

So Typed CSS comes under the typed object model.

So what sort of types are we looking at in the typed object model for CSS? Well, instead of things like numbers and hashes and all that sort of stuff, as we might look at in other languages, we have ones that are a little bit more CSS specific, so things like keyword, which would be things like initial inherit auto, those sorts of things.

Position.

So that's one we would use if it's like a position, absolute value.

So if you're looking at the X Y coordinates for that, for example.

Units, probably my favorite one.

So this is where you have a value and a unit pair.

So if you've got 500 pixels, for example, the 500 is the value and that's treated as a number.

And the pixels is the unit, which I think is really cool.

And you can do some good conversions with those.

And another one is image.

So if it's looking for a URL, which I think is also quite useful.

So for this presentation, we're just going to have a bit of a look at unit, but they all work in a fairly similar way.

Okay.

A couple of disclaimers CSS Houdini is quite experimental and doesn't work on all the browsers yet.

There's a really great website.

Is Houdini ready yet.com and it has all the different APIs, what browsers they work in as well as a lot of links, a lot of great websites to get you started with information about how all the APIs work.

Which is great.

The majority of them work in Chrome, the new Edge and Opera, but don't quite work yet on Safari and Firefox, but coming soon.

And even though they don't work on Firefox, Firefox has documentation and is really excellent.

I really suggest you check it out.

They've got very detailed documentation.

So I think that it won't be too long until they start implementing it.

The other disclaimer, CSS, Houdini, while it is CSS, it is looking at JavaScript and it's JavaScript manipulations of CSS.

And so the code I'm going to show you next is JavaScript and how JavaScript relates to CSS.

I'm really hoping that this turns up natively in the browser one day.

I'm not sure how far away that is though.

Okay.

So here's another example.

So if we have, for example, our foo class with a width of 500 pixels, if we have a look at that as is, and we have a look at that in the console, we're just going to get the string of 500 pixels back.

However, if we use the Houdini function attributes style map docket we can, we get back an object and in it,is a CSS unit value, and it's got the two ones that I was talking about before it's got the value, which is the 500, which is a CSS number.

And it's got the unit, which is pixes.

So it gives you that bit of extra information, which is really cool.

You can also set CSS properties this way.

So if we've got our foo class and we can use the set attribute style map to set the width to something else.

So we've got the CSS dot whatever functions.

So this one could be percentage, it could be pixels.

It could be VWs, VHs, all sorts of different things, basically any kind of unit you can think of it, CSS dot the name of that unit.

And then, and brackets, you put the value that you want for that one.

So in this example, we're setting the width to 50%.

And then when you get the width again, it comes back and it's got the value of 50 and the units of percent.

So it gives you that little bit of extra information and it also makes the value a lot easier to get out.

And having the value easier to get out like this without having to do any sort of cutting off of units or anything like that, which would normally have to do with JavaScript.

You can then do really cool calculations.

So in this example, I put in a sum calculation where we've got a hundred percent, we're summing it with 20 pixels.

And then later we're going to add a hundred vws.

Obviously not something you do in real life.

That's a bit wide.

But it returns this calculation which does look familiar, which is something that you would see in CSS.

So calculation a hundred vws plus a hundred percent plus 20 pixels.

And you can do that a lot more easier.

And in this, it calculates it all for you.

It does all the conversions for you.

And then you can set it to a calculation as well, which is really cool.

There are other ones in this one as well.

So instead of summing you can multiply and divide and take away.

So all your calc functions are available here as well as conversion.

So you can take your pixels and you can convert them to m's.

You can convert them to millimeters.

You can convert them to centimeters.

whatever you like.

So then when you get this calculation out and you get a lot more information about it.

So as you can see here, when we're getting it out, we can see that it has the operators.

In this case, sum we have the length and then we have all the different units in that array.

And then we've got all the different values and all the different units in there.

So it gives you so much more information than just a normal CSS string.

And here's where it starts to get more interesting.

And this is something I hope to play around with a lot more in the future is that there is also a pass function as part of this API as well.

So what the past function does, is it checks to make sure that it is a valid property.

So in this case, we are looking to see if it's not a value is a valid value for pixels, clearly it's not.

So in this case, if you're passing something through that way, you can get an error.

So in this area, you can get an error message you can put in customized error messages as well, which gives you a little bit more information.

And I think this would be a really great thing to see introduced in a lot more places so that people can see what they did wrong, why it's not working the way it should be and give you a better idea of how to recover.

For example, if you had a CSS property, which had a lot of different key words as values, you could then perhaps put a list, say, Hey, you put in this one, did you actually meet one of these other key words that are acceptable? And I think this would really increase the speed of which somebody could learn CSS.

So, thanks for having me.

Here's some links to my talk and my website.

I put a few different resources there, so check it out.

There's some really good code pens out there.

The Google docs and the Mozilla docs are really, really excellent.

They've got so many worked examples, so many lists of so many functions.

I only showed a few here to do with widths, but there's also ones to do with colors and to do with images and to do with capacities and there's really exciting ones to do with CSS animation.

So you can do ones with like transforms and animations and all that sort of stuff as well.

Move over TypeScript, here comes TypedCSS!

Rhiana Heath

Blake eLearning

Web Directions Hover 2021

CSS 2 badge with red ribbon that read "Now with Types!""

What are Types?

image of an old fashioned typewriter

Lists the following witha background image of a thought bubble for each

  • Strings
  • Array
  • Numbers
  • Hash

Why even have Types?

  • Better errors
  • Code the documents itself
  • Faster performance

image of an alert icon

image of a document icon

So What Types does CSS have currently?

image of an old fashioned typewriter

CSS 3 Badge

Image of Buzz Lightyear saying to Woody in Toy Story "Strings, Strings Everywhere"

.foo {
	width: 500px;
}
					
const widthOfFoo = $('.foo').css('width')
typeof widthOfFoo === 'string'

Invalid property value

Alert Icon

.foo {
	width: 500pxs;
}

What is Typed CSS?

Image of an umbrella

CSS Houdini badge

  • Typed Object Model (OM)
  • Paint API
  • Layout API
  • Properties and Values API
  • And More!

What are CSS Typed OM?

image of an old fashioned typewriter

Lists the following witha background image of a thought bubble for each

  • Keyword
  • Unit
  • Position
  • Image

Disclaimer Time!

Browser logos with tick and cross icons to indicate support in browsers

  • Chrome logo with a tick
  • Edge logo with a tick
  • Opera logo with a tick
  • Safari logo with a cross
  • Firefox logo with a cross

ishoudinireadyyet.com

Disclaimer Time!

JavaScript logo plus CSS 3 Logo

.foo {
  width: 500px;
}
	
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: calc(100vw + (100% + 20px));
}
	
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' },
//   },
// }
	
try {
  const css = CSSStyleValue
               .parse('width', 'CSS.px(not a value)');
  // use css
} catch (error) {
  console.error(`${error}: please supply a valid width value`)
}

Typed errors list

Thanks!

Cartoon image of Rhiana as a Wizard, holding a staff with glowing jewels, with an outretched right arm with a glowing semi-transparent orb in her right hand directed at a dubious looking cat. In the background is a flat screen monitor with "Hello World!"" on screen.