W3C developer meetup in #Vancouver, 13 September 2022 🇨🇦

Okay, so hello.

Yeah, I'm Rachel Andrew.

These days I'm a technical writer, on the Chrome team at Google, creating great resources for developers on web.dev, and developer.chrome.com.

So, as we've heard, 2022, pretty exciting year for CSS.

There's a ton of stuff landing in browsers, so, you know, we've just seen things like Cascade Layers, that's landed in all free browsers.

There's loads more happening, and all of this stuff is landing in browsers, in a more robust and interoperable way than ever before.

Interoperable is really important.

Interoperable means that the feature works, and works exactly the same across browsers.

So, you can write CSS, and you can use whichever browser you like, to write your CSS in, and then you can open up the other browsers, and there it all is looking exactly the same.

Now, in the past, this was something you couldn't rely on.

You couldn't rely on this at the most basic of levels, how the width of a box was calculated.

Now, when I started doing web development, I started before there was CSS, but when CSS came along, you know, we had a couple of browsers.

We had Internet Explorer and we had Netscape, and they calculated the box model differently.

So, Netscape used the standard box model, as we know it today so that's like, if you're using box sizing content box, Internet Explorer used the what is now, the alternate box model, as if you were using box sizing border box, but there was no box sizing property, so there was no way to normalize the two, other than via this box model hack, as created by Tantek Çelik.

Now, be thankful if you came to web development late enough, that you didn't open a browser, and realized everything was blown apart, because things weren't the size you thought they were going to be, and interoperability, although we didn't tend to use that particular word, it was what the Web Standards Project campaigned for, back in the day and I was a WaSP member.

It's how I kind of got my start working with standards, because I thought this situation, of ending up building two websites, in order for things to look decent, in each of the websites was ridiculous.

So, we pretty much have, what the web standards project asked for today. This is huge. So, things are better.

We don't see enormous bugs, like different box models in browsers, and browsers do implement standard features in the same way.

The bugs that we find because browsers are software, and software has bugs, and especially when we're thinking about something like CSS.

CSS is really complicated, and then it's written by people, who maybe don't really understand CSS very much. You know, not every web developer really actually knows what they're doing when they're creating CSS. Sometimes they don't really understand, what the HTML is supposed to look like, and so the HTML is all broken, and then CSS is trying to render it.

CSS also has to render content written, in every possible language and script, sometimes in multiple languages and scripts on one page. CSS still needs to allow all of those websites, built 20 years ago, and I've still got some of that are still online, it still needs to render those and make them look decent.

You know, CSS is hard, it's not a simple thing, and the other thing that's happening, is that browser versions are being released really quickly.

Firefox and Chrome are now on a monthly release cycle, Safari's landing features in more versions each year now as well. Now, if you contrast that to the gap of five years, between IE6 and 7.

You know, these days I write a monthly post, about new things on the web platform, and there's plenty of stuff, for me to put in that each month. In fact, I can't put everything in it each month. There's too much. I have to pick and sort things, that I think are most interesting. You know, I can't imagine that happening 10 years ago, we were sort of sitting around for years, waiting for a new browser to show up.

So, we're getting these features more quickly, than ever before, but this kind of leads to a bit of a problem: every new feature that we get, we get this kind of gap. It lands in one browser and then there's this gap, between it landing in that one browser and is all thinking, yay, we've got this new thing, and before it lands in the rest.

Now, contrary to what people on Twitter think, there isn't one browser always in the lead. You'll find that it's spread out pretty well, across all the browsers who lands a feature first, but this is a problem for developers.

Every survey we do we hear this, you know, this is from the State of CSS survey, browser compatibility top of the list.

Same sort of responses, in the MDN Developer Needs Assessment.

Interoperability across browsers top of the list, and this is some research conducted at Google.

Again, making a design of experience, with the same across browsers, that's a top challenge.

Now, everyone who wants to work on a browser engine, they all want to make the browser better, and they want to make the web better. Everyone wants to do that for developers. No one's trying to make things worse for developers, but if everyone picks a different feature to work on, we could actually make this gap worse. We could make this sort of fragmentation, of browser support even worse.

It's not helpful if one browser lands container queries, another one has subgrid, and a third fixes all of the really gnarly flex box bugs.

We want to have all of these things everywhere, so we can feel confident in using them, and so it's this gap that the Interop 2022 project, is aiming to help reduce.

It's an effort to improve the experience of developing, for the web in 15 key areas, and you can follow along on the dashboard, and we're well through the year at the moment, so the dashboard's looking pretty good.

This is the scores for Chrome Dev, Firefox Nightly and Safari Technology preview, so the experimental browsers. If you go to the dashboard there, you can toggle and look and see what is actually shipped, and, again, if you look at this breakdown of current scores, it really highlights this fragmentation, of support between browsers. We've not got one browser that's far behind the others. It's each has got better scores in different areas.

So, before looking at some of the included features, I want you to talk a bit about how we get to these scores. Where do they come from? How do we calculate them?

So, the scores are based on passing web platform tests. We've got this test suite for the web platform, and so we can test and see how well browsers are doing, on these features. So, if you click on any of those areas in the table, you get a list of the available tests, and they'll thoroughly test the feature. You can see at the top of the table, which browser versions are being used.

On the left, the actual tests that are being run, and you can click on any of those and see a bit more detail, and you can actually go and view, the source of the individual test.

While we're here, many CSS tests are as simple as this one. It's a very simple reference test, to see if current color is being correctly inherited. There's lots of missing tests for CSS specs, so if you've ever founded getting involved, in improving the web platform, helping to write tests, that's a really good way to start.

So, that's how we're assessing the features, so let's have a quick look at which features, are being included.

So, there's a bunch of features, that came from the previous years version of this project, that was Compat 2021, and now that did some really great work, in improving the scores for a number of features, and this is the bunch of features that were included.

We've got aspect ratio, flexbox, grid, sticky positioning and transforms.

These are various little bits and pieces that needed fixing, and there's a few bits left over.

You can see the scores are pretty high for these.

There's a few bits left over, and so they've been included in this project, in order to get those kind of finished off.

So, then we've got some new features, that were chosen for Interop 2022, and here's the list and the current standings, of earlier this week so through well through the year, so many of these are close to a hundred percent. We're doing quite well.

I think Cascade Layers is probably the big feature, that's been included. They're supported in all of the browsers now, and all the main engines so all the scores are over 95%. You know, the Cascade has been something, that developers have long struggled with, and Cascade Layers just gives us this way to manage that. It's definitely the sort of feature you can't use, until it's everywhere. It's pretty fundamental, if you sort of dealing with the Cascade, so that's really exciting that that's been included. So, you can now group your styles into a layer, and managed how that entire layer fits into the Cascade.Really elegant solution.

Very, very useful if you're working, with things like frameworks and so on, that have got a whole bunch of CSS, and then you want to add some of your own CSS.You can kind of isolate it and hopefully you'll get away, from having style sheets that are full of !important, and so on to try and override things.

Color spaces and functions. There's some really cool stuff within this section.

Now, if you recognize the box model hack, that I showed earlier, you might also remember, when we only had 216 colors to play with on the web, because those are the ones, that displayed properly across browsers.

Things aren't that bad now, but we have been tied to sRGB.

This is changing and we're getting new color spaces, such as Lab and these are the color spaces, a part of the project, and we also have these new color functions.

We've been using color functions.

If you use a pre-processor like Sass, a lot of people use these things in order to change colors.

Things like make a color lighter, is very common thing to do, and so these color functions will let us do this in CSS.

We can do it dynamically.

Color mix takes two colors, returns the result of mixing them in a specified color space by a specified amount.

So, here I'm mixing increasing amounts of white, in the LCH color space, so that's just gonna be really useful.

Looking forward to having that in all of our browsers.

Containment with the contained property.

That was mentioned in Miriam's talk.

It's not container queries that's part of Interop, but it's just the `contain` property basically, making sure that that's working really well.

Containment is actually very useful, if you are building a site, where you're changing things dynamically with JavaScript, and so you might get some layout shifts because of that, if you know how big things are, if you know certain things about something, you know it's not gonna be touched by the stuff outside, you can use the `contain` property, to basically give the browser a hint, that it doesn't need to go, and figure all that stuff out again, if things on the page change, but they're also a foundational step, for enabling container queries.

We've then got the `dialog` element.

This gives us a way to create the kind of model dialogues, that web apps tend to need.

It comes with the JavaScript API, for opening and closing dialogues, and the `::backdrop` pseudo class, for styling the backdrop behind the dialogue.

This has got pretty good browser support already, and browsers doing well, they've got scores in the nineties.

The final work is part of Interop 2022, is just to tide you up some of those outstanding issues.

This is a real key UI component, so it's great if it's gonna be rock solid, and my colleague Adam Argyle at Google, has got a really nice tutorial on web.dev, sharing how to build on top of this element.

That's really worth looking at.

And then forms.

This is one of the issues that contains, within it a whole bunch of small tests, to fix things with forms, that you might run into as a developer.

It's not fix everything that's terrible about forms, but it's kind of fix, here's a pile of small issues, that make forms hard and let's try and make them better, so if you wanna find out what's included, poke around in the web platform tests, and you can see what's actually included for forms there.

You can also read the long thread discussing, which features were included here, and all of these features were discussed, and agreed by representatives of all the browsers, and some other parties such as Igalia.

So, to all have this discussion, about what it was that would be good to have in the project, and what actually could be fixed, and then the scrolling.

There's a ton of issues that relate to scrolling on the web.

Scrolling is quite hard and these things came up.

There was a survey some of my colleagues created, the Scroll Survey, and then they created a report to explain what they found.

So, you can have a look at the those things, and so Interop 2022 aims to fix some of the issues, around overscroll behavior and scroll snapping, and now we come to a cause that is dear to my heart.

I've been waiting for this for a very long time, and that is subgrid.

Very much long awaited by me.

It's already in Firefox, it landed in Safari a day or so ago, and it's also under development in Chrome, with working undertaken by the Microsoft team.

It allows you to inherit the number and sizes of tracks, into nested grids and it unlocks, a whole bunch of layout patterns, that I'm really excited about, and I'm sure plenty more that I haven't thought of yet.

So, I'm really looking forward, to getting that across browser.

Then we've got typography and encodings.

This includes tests that are mostly around typo fixes, for CJK as a Chinese, Japanese and Korean characters.

For example, the `ic` unit, which represents the advanced measure, where the `ch` unit represents the advanced measure, of the zero character in the font used to render it, the `ic` unit represents the advanced measure, of the CJK water ideograph, which enables measurements based on an expected glyph count.

Now, the things in this section, might be less useful to Western audiences, but it's great to see all these improvements, for things that make the web truly international, and then viewport units.

Developers have a lot of trouble with viewport sizing, particularly on mobile devices, where you have different placement developments, like the address bar.

So, we've got some different units there, that kind to help with that sort of sizing, and so these units are in values units level four, and they describe things at the largest, and smallest dynamic viewport sizes, and they're included in this project too, and then finally we have the web compat section.

Now, these round of a few issues, that have caused site compatibility problems.

So, this is where a site or users of a site, have reported issues that are caused, by differences in browsers.

Now, you might also have spotted there on the chart, there were three areas listed under investigation.

Now, this includes editing with content editable, pointer mouse events and viewpoint measurement.

Now, the reason these investigations, rather than being able to sort of fix them, and have proper scores for them, is because we know these things are causing problems, but the state of the specifications or the existing tests, just isn't good enough for us to be at a point, where we can really do a meaningful score.

So, the idea of these investigations, is it's a chance for everyone to have a look at that, the different browser engines and other people have a look, see if we can get them to a point, where perhaps they've got a good enough spec and test, and then move them on to actually solving these problems.

So, I feel like this work is so important.

You know, it's so important to see this happening, to see this happening with the representatives, from all of the different browser engines, and this sort of we're trying, to make the web here better for developers, removing issues.

You know, every single issue that we remove, is something less to trip you up and cause you a problem, and also you're getting valuable new features.

You know, landing in browsers more quickly, and that's also really exciting.

We don't have this sort of big gap, where people are looking for lonely at a shiny feature, and realizing they can't use it, because it's not available everywhere, and given we are in September, you might be thinking when are we gonna carry on?

And yes we are.

In fact, this week we're going to be announcing the proposal process, so you can actually propose features for Interop 2023.

There's some information on the site, as to what's gonna make a good proposal, so you can submit your ideas, and we can look forward to another year of working together, to make the web more interoperable, and if you're attending the rest of TPAC, there's a breakout session tomorrow about Interop 2023, so this has been interesting, come along to the breakout session to learn a bit more.

So, I hope you find this stuff exciting and interesting, and I think if you are building for the web, you know, this is making the web measurably better, which is really cool.

I think, you know, fewer bugs, fewer problems, and we can all sort of make a better web together, so thanks very much for listening.