Drupal Developer Days Burgas
June 26 to 28, 2024
Nicolai Schwarz, textformer.de
Last Update: June 28, 2024
The goal of the session was to give an overview over some of the new CSS features you may use either now – or in the near future. Like CSS Nesting, CSS Layers and @scope.
I guess you will mainly need the linklist right here. But you may still look at the actual slides (around 6.5 MB).
The slides were built for Desktop. (I might add styles for mobile next week.) You navigate with the arrow keys → ←. Adjust the size with browser zoom till the content fits. Some examples inside the slides will only work in the latest Chrome browsers.
Baseline gives you clear information about which web platform features are ready to use in your projects today.
»The CSS :has selector helps you select elements that contain elements that match the selector you pass into the :has() function. It’s essentially a “parent” selector, although far more useful than just that.« (Robin Rendle, css-tricks.com)
Baseline 2023 Newly available
»With container queries you can query the styling information of a parent element, such as its inline-size. With media queries, you could query the size of the viewport, container queries enable components that can change based on where they are in the UI.« (Una Kravets, web.dev)
Baseline 2023 Newly available
»The containment spec includes more than just size queries; it also enables querying a parent's style values. From Chromium 111, you’ll be able to apply style containment for custom property values and query a parent element for the value of a custom property.« (Una Kravets, developer.chrome.com)
Limited availability
»The inert attribute is a global HTML attribute that simplifies how to remove and restore user input events for an element, including focus events and events from assistive technologies.« (Emma Twersky, web.dev)
Baseline 2023 Newly available
»The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.« (developer.mozilla.org)
Baseline 2022 Newly available
»The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.« (developer.mozilla.org)
Baseline 2024 Newly available
»One of our favorite CSS preprocessor features is now built into the language: nesting style rules.« (Adam Argyle, developer.chrome.com)
Baseline 2023 Newly available
There is a proposal by Miriam Suzanne from Sep 13, 2023. This includes not just Mixins, but also Functions.
It can get pretty complicated, which style wins over another. Especially now that @layer and @scope enter the hacking order. So you might want to refresh your knowledge about the Cascade.
»CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important.« (Miriam Suzanne, css-tricks.com)
Baseline 2022 Newly available
»It’s an upcoming way to scope the reach of your CSS selectors, allowing you to move away from methodologies such as BEM because you no longer need to name those in-between elements.«
Limited availability
»If you’re creating a website in multiple languages, logical properties and values are incredibly useful. Even if you’re not, there are still some convenient new shorthands it’s worth knowing about.« (Ollie Williams, css-tricks.com)
Widely available
Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Examples of this are effects such as parallax background images or reading indicators which move as you scroll. (Bramus Van Damme, developer.chrome.com)
Limited availability
»The :user-valid and :user-invalid pseudo-class selectors help improve the user experience of input validation by giving feedback about mistakes only after a user has changed input. With these new selectors, there's no longer a need to write stateful code to keep track of input a user has changed.« (web.dev)
Baseline 2023 Newly available
Media Queries enabled responsive design, and the range features that enable testing the minimum and maximum size of the viewport are used by around 80% of sites that use media queries. The Media Queries Level 4 specification includes an improved syntax for these range queries. (Rachel Andrew, web.dev)
Baseline 2023 Newly available
»The scripting CSS media feature can be used to test whether scripting (such as JavaScript) is available.« (developer.mozilla.org)
Baseline 2023 Newly available
»The prefers-reduced-transparency CSS media feature is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device. Switching on such a setting can help improve contrast and readability for some users.« (developer.mozilla.org)
Limited availability
»The prefers-reduced-data CSS media feature is used to detect if the user has requested the web content that consumes less internet traffic.« (developer.mozilla.org)
Limited availability
We can now transition between discrete states. That allows to transition to or from display: none. Be careful with some older articles / videos on the topic. They might use an older syntax.
I am sorry that I put Masonry into the session teaser, before I looked at the current implementation. I heard about Masonry Grids some three years ago. It hasn’t moved since. Don’t bother looking into this.
Not implemented anywhere
These topics did not make it into the slides, but they are also interesting: