CSS Day 2022

Day 1

The conference kicked off with a talk from Jeremy Keith who guided us through the early beginnings of SGML (which was the inspiration of HTML) and CSS. The gist of the talk was that most things are 'the way they are' because of arbitrary decisions in the past. So don't take for granted how things are set up.

Interop 2022

Next up was Rachel Andrew, who told about Interop 2022. Interop 2022 is an initiative that lets all browser vendors work together to improve the web for developers. They investigated the topmost troublesome areas identified by developers regarding compatibility issues across browsers. Practically it means that they strive to finish and release several CSS features in 2022, such as @layer, color functions, the <dialog> element and aspect-ratio. They also aim to fix bugs in areas such as flexbox and sticky positioning. The full list can be read at the Interop 2022 website.

Cascade Layers

Things like the developments being made under the Interop 2022 umbrella make this a very exciting time to be a web developer! Huge issues like refactoring enterprise grade styles can easily be managed with CSS Cascade layers, as @bramus stated in his talk: you could import the "old" CSS into a separate layer and use the "new" CSS in another layer who's priority can be configured. An example in code:

/* define layers and their priority, from lowest to highest */
@layer thirdparty, main;

/* import bootstrap into the thirdparty layer */
@import url("./bootstrap.css") layer(thirdparty);

/* add styles to layers */
@layer main {
  /* high layer priority, despite low specificity */
  --primary: #f7af29;
  a {
    color: var(--primary, yellow);
  }
}

This gives lots of opportunities, and most importantly: less use of !important 😉

Arbitrary decisions

Marcin Wichary ended the day with the same conclusion as Jeremy Keith, who started the event: most things 'are the way they are' because of arbitrary decisions in the past. While this goes up for CSS, this is also the case for keyboards. He illustrated this with a fun story:

For example, why does the 0 go after the 9 on a standard keyboard layout? In the early days, each hammer(and thus each character) on a typewriter costed a fortune to make. So to save money, the letter O doubled as a zero, and the lowercase L doubled as a one. Later they added the 0 key, but it would be weird to add that key next to the 2, so they put it after the 9.

Day 2

Scroll snap

Adam Argyle showed us everything about the css feature scroll-snap. After showing the ins and outs he shared some great examples of how to use it. One of them was a an example for a chat UI where you automatically want to show the latest chat message in to view:

.chat-bubble:last-child {
  scroll-snap-align: end;
}

Something great that Adam showed during his talk is that in Chrome developer tools you can debug scroll-snap. Just like grid and flexbox there is a small button next to the dom element where you can toggle an overlay. Here you can see the snap points for each item and the items outside of view. And to top it off at the end of his talk Admin mentioned that he made his slides with scroll-snap.

Creative CSS Layout

Making layouts on the web has become easier with flexbox and grid. With both flexbox and grid as an option you might wonder which one should I use? Michelle Barker started her talk with a great comparison of grid and flexbox. Grid and flexbox have a lot of overlap but each has their own strength which Michelle showed with some nice examples.

Michelle also showed great examples of how to use upcoming features as container queries, subgrid and the :has() selector. One of the highlights for me was combining quantity queries with the :has() selector in grid layouts. Based on the amount of child items you can adapt your grid layout. For example when you have 3 items you have a 3 column layout but when you have 4 items you change the grid to 2 columns.

Pushing the limits of CSS

With talks from Ben Evens and Amit Sheen they showed us how they push the limits of css. Ben creates photorealistic images just only with html and css and can take up a year to finish. Amit makes advanced css animations like this 3d ping pong table. In his talk he took us along how to work with more complex css animations, how orchestrate them and get creative with timing functions.

Conclusion

As all conferences organized by Web Conferences Amsterdam, CSS Day 2022 was perfectly organized. They even offered a child care service, so you could take your children with you and leave them with a nanny! Although I didn't use that service, I think this, besides the talks, illustrates the great organisation of this conference.

All in all, CSS Day 2022 was a very interesting conference day for us. We learned a lot, and got inspired again for writing nice and clean CSS code.

If you're interested in the talks. CSS Day recorded all the talks and they are publishing one talk every Friday on their YouTube channel.