.css-day {

    speakers: 14; // Single-track

    date: ‘June 9  & 10’; // OK, that’s 2 days :)

    venue: ‘Zuiderkerk’;  // Amsterdam, NL

}

On June 9 and 10 Dennis, Thomas and I went to Amsterdam for the CSS Day conference in the Zuiderkerk. A very nice venue being a former church from 1614. In the main area the pews were replaced by chairs and the alter is now a large podium with a big screen. Large black curtains separated this area from the rest of the church. The conference was initially one day (hence the name ) but was expanded to two days after the COVID pandemic with no fewer than 14 talks.

Day One

Thursday started with a keynote by Jeremy Keith on the history of CSS showing the different attempts to style web pages which eventually lead to the modern CSS we know today, for example, the @prefers-* query selectors for dark mode or reduced motion, CSS nesting and accent-color to style form inputs. Although it is still a mission impossible to style the options menu of a <select>. That’s one of the reasons why we at Moxio have custom dropdowns in our Design System. Jeremy referred to the Open UI project which creates specifications and test suites from which design systems and frameworks can benefit to make consistent UI-controls.

After the coffee break Rachel Andrew from Google gave insight in the process of solving the top browser compatibility issues identified by web developers. This is done in the Interop 2022 project where each browser vendor is solving issues, but not all are working on the same issue at the same time. Meanwhile the vendors are still solving some leftover issues from the Compat 2021 project which focused on, among other things, aspect-ratio and flexbox which has gap and sticky positioning in tables (yeah!). The focus areas in Interop 2022 are cascade layers, colour spaces and functions like color-mix() and color-contrast(), containment, <dialog> element, forms (style ability, better interoperability and accent-color), scrolling, subgrid, typography and new viewport units. She encourages developers to write a test if they find a CSS bug. And of course, you can send in issues for Interop 2023.

Lea Verou showed us how to use CSS variables as reactive variables instead of constants. They can be used as regular properties and interpolated with @property. With a glossy button as an example, she showcased how to set a variable ‘on’ or ‘off’ to use the same CSS to display different styles for buttons. She ended with some limitations of CSS variables and how to work around them. To me this all seems very complicated, and we wondered if you should use this in production. At least you need a university degree . Here at Moxio we use LESS mixins and variables to efficiently code the different styles in our Design System. Although we might investigate using CSS variables for custom styling. 

After a lunch break, with veggie lasagne and a salad, Bramus van Damme showed the new cascade layers implementation where you can place CSS declarations inside a layer to influence the cascade order. But first he refreshed our memory on how browsers determine which CSS declarations to apply and which not. In the cascade of criteria that the browser uses the layer criterion is performed before the specificity. This way you can override some properties which have higher specificity later in your code or third-party CSS will no longer override your selectors with a lower specificity. Unfortunately, unlayered declarations have a higher precedence than layered declarations. This way we can’t protect our Design System against overrides in applications.

Ana Ferreira from Doist, from the apps Todoist and Twist, shared her experience about working in a 100% remote work company. With colleagues around the world the key is to use asynchronous communication. Make good agreements such as a maximum response time of 24 hours. Also, everybody can determine their own working hours. In a meeting on Monday, everyone first talks about his or her weekend. This way you still have social contact with your co-workers.

After tea break Chris Lilley dived into the complex world of colour. The colour mode used by most screens and browsers was limited, we are ‘trapped’ inside the sRGB mode triangle. Different new technologies, like in cinemas and mobile devices, escaped from this triangle. In web development we can also escape with the new color() function and using extended colour modes. Mixing colours will then also be better. His last subject was color-contrast to let the browser calculate which predefined colour to use. And as an encore, a short introduction to High Dynamic Range (HDR) colours which are used in al lot of devices nowadays.

The day ended with Marcin Wichary from Figma talking about the user feedback he gets when shortcuts are not working on text. He showed that typography is a whole other ballgame with all its inconsistencies, missing properties, missing styles, quirks, and what not. As a fan of keyboards, he walked us through history and showed photos from typewriters to modern keyboards. In one photo I recognised the same antique typewriter I have at home. Early hardware design explains why some weird shortcuts exists and cannot be changed. At Figma he tries to understand and fix every typography issue but to his regret he can’t solve them all.

 Day Two

On Friday Adam Argyle kicked off with an enthusiastic presentation about scroll snap. After a quick recap of overflow, he showed the different scroll-snap options like always stopping items in the centre of the scrollport. With overscroll-behavior you can prevent the rest of the page from scrolling when you reach the end. He continued with scroll features like padding, margin, scroll into view, snapping after a layout change (e.g. resize) and with the intersectionObserver you can detect if an item is ‘in view’ of the scrollport and give it a nice effect. Time for some nice sliders, tabbed navigation, date/time scrollers and timelines. He ended with some future implementations. We were hoping to see something on overflow hinting, but alas. For our Design System we want to investigate using scroll snap for our panes, tables and when using the arrow keys.

After a short break Michelle Barker showed different ways to layout with CSS. She compared flexbox and grid, and how they might be used in different scenarios. With the new subgrid you have even more possibilities. She also mentioned CSS variables and aspect-ratio. She showed how to use min(), max() and clamp() to solve common layout problems. The use of container queries makes creating responsive layouts much easier.

Amit Sheen loves making CSS animations and showed some impressive examples he made. His key tip is to draw a graph, by hand, of the animation you want to find the keys on the timeline. This makes coding keyframes less of a trial and error.

"Working for the government is more political than being a member of parliament"

During lunch we already had an interesting conversation with Maike Klip about working for governmental organisations like we do at Moxio for ProRail and the water authorities. In her presentation she showed the research she has done for the student finance organisation and the result of tracking her own digital relation with the government during a month. In a photo series she researched the role of empathy in digital government. Civil servants do want to be closer to the citizen than they are. At the national ombudsman she researches the relation citizens have with the government. In the case of the gas extraction in the north of the Netherlands she demonstrated that the process and forms to apply for compensation subsidies lacked any citizen involvement during design and development. She ended with saying that working for the government is more political than being a member of parliament.

Tab Atkins-Bittner continued after tea break with organizing your CSS with new pieces of CSS and DOM technology. Their first solution is using shadow DOM which encapsulates your CSS by using isolated documents. Downside is that shadow DOM doesn’t work well with React and can be more difficult to work with because of the encapsulation. They continued with scoping which makes nesting and specificity more intuitive. We can’t wait to use this to simplify our complex table styling. Last they showed CSS nesting which is almost as good as CSS pre-processors like SASS or LESS. The W3C only must agree on the notation to solve parsing problems. CSS nesting offers possibilities to find out whether we can remove the use of LESS in our workflow.

Closing the conference with the keynote of Stephen Hay, Creative Director at Rabobank, on when design systems lie. He elaborated on six lies about design systems. He explained when and why they happen, and what we might do about it. After each lie, he stated his ‘truth’ based on his experience. With our design system we tick all the boxes for doing the right thing. Of course, we are very pleased and proud of that.

 Conclusion

In conclusion: I really liked the talks. I learned a lot from the more in-depth ones and enjoyed listening to the more general and entertaining talks. I look forward discovering more about some topics in one of our Moxio academies. The scoping and nesting of CSS looks very promising to use in our workflow.