This session will focus on HTML, CSS and JS. Some of this you will have heard of – like Container Queries and the Parent Selector :has, which you can use already. The main bulk of the session will focus on stuff you will probably not be able to use right now. But a little bit down the road some of this will be quite useful.
- For example, did you know that we have an brand new HTML element with <search>? With this addition every ARIA landmark now has a native HTML equivalent.
- CSS Cascade Layers offer developers better control over which styles take priority, by defining explicit contained layers of specificity.
- The View Transitions API allows animated transitions between different web pages.
- The Popover API proposes a standard mechanism for displaying popovers on the Web.
There is actually a lot more on the horizon. Let’s see how much I can cram into 45 minutes.
----------
Linklist
Here are all the topics and links I mentioned in the session (in the same order as in the session). You will also be interested in the article »What's new in CSS and UI: I/O 2023 Edition«, which popped up in my timeline a few days after the session.
:has (parent selector)
The :has selector is also known as the “parent” selector, but actually offers far more.
WebP
All modern browsers support the image file format WebP. You can use it directly as an image style in Drupal – if your server supports WebP as well.
Content Security Policy
The Content-Security-Policy HTTP response header helps you reduce XSS risks on modern browsers by declaring which dynamic resources are allowed to load. Quite useful. And easy to implement in Drupal cause there are two modules for that.
Colors
The web got far more colorful in the last few years. Next to new color spaces you may also use fancy color functions.
Accessibility: search element
We are getting a new search element so that every ARIA landmark has a native HTML equivalent. But you can’t use it right now.
Accessibility: WAI-adapt
»There are many people with cognitive and learning disabilities that affect their ability to interact with the web. Some people cannot process numeric information (dyscalculia), but others understand numbers better than words. Some people with severe language disabilities use symbols to represent words; some people need (or want) simplified user-interfaces.« [W3C Editor's Draft] WAI-adapt addresses these needs.
No, you can’t use this yet.
Dynamic Viewport Units
Responsive Design can be a pain in the ass when you need to address the viewport height on mobile devices. Especially with moving UI elements and an annoying 100vh bug in Safari. The new Viewports Units will give developers more control.
Scroll-Linked Animations
Sometime in the future, you will be able to animate your website based on the scroll position. This feature can currently be activated in Chromium browsers.
Container Queries
This is what every frontend developer has been waiting for. And now you can use it, cause as of February 2023 they are stable in all modern browsers.
CSS Selector Nesting
As seen in Sass: You will soon be able to nest selectors natively in CSS.
CSS Cascade Layers
The CSS Cascade can get tricky when you want to override settings with a certain specificity. CSS Cascade Layers are intended to make this easier – by defining explicit contained layers of specificity. But it takes some time to wrap your head around this approach.
Intl API
This is a little bit older than I thought. But I didn’t know about it. An API for plural sensitive formatting and plural language rules.
Sanitizer API
The HTML Sanitizer API will allow developers to take untrusted strings of HTML and Document or DocumentFragment objects, and sanitize them for safe insertion into a document’s DOM.
Popover API
This API will save a lot of time with any kind of popup (fine, popover). Right now you have to make sure the popover sits above the rest of the page (z-index). You usually need a layer to darken the rest of the page. Clicking next to the popover closes it. And then you should address focus management which many people forget. This API is aiming to solve all this directly. That would have helped me a lot on some recent projects.
View Transitions API
Soon we will be able to do page transitions between webpages. It not only looks nicer, it can also help with usability/orientation. Chromium browsers already support it. For other browsers you can implement a fallback.
text-wrap: balance
This feature will evenly distribute your text on available lines. Currently it is only works in Chrome Canary, behind the experimental features flag. But you can already put it in your CSS. Someday browsers will support it (unless they change the syntax), until then browsers will ignore it.
Stay up-to-date
Some people were asking me where I get info about new stuff. Try these links:
