Drupal Dev Days Vienna | July 2023
Nicolai Schwarz | textformer.de | @textformer
This presentation needed to work on my laptop. It is not completely optimized for mobile, but you will see all the important parts. Also not all examples will work in your browser. Best viewed in Chrome.
Anyway, you will probably only need the linklist right at the start.
Best viewed in Chrome. Not all examples
will work in other browsers.
Use arrow keys to switch slides.
Or swipe left/right on touch screens.
I assume you are mostly interested in useful links. So let’s start with them:
The Content-Security-Policy helps you reduce XSS risks on modern browsers by declaring which dynamic resources are allowed to load.
WebP has better compression than JPEG, PNG and GIF and is designed to supersede them. AVIF and JPEG XL are designed to supersede WebP.
This selector is useful to provide a different focus indicator based on the user’s input modality: mouse vs. keyboard.
The intention is to have full control over which styles take priority in a project without relying on specificity hacks or !important. This is supposed to make your life easier – once you get comfortable with it.
Change translate, rotate & scale individually.
Move over Viewport Queries, we finally got those Container Queries we asked for ten years ago.
Container Queries are nice, but the containment spec actually includes more than just size queries; it also enables querying a parent's style values.
The Media Queries Level 4 specification includes syntax improvements to make media queries using features that have a »range« type easier to use.
New CSS units that account for mobile viewports with dynamic toolbars.
The inert property 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.
Fancy new stuff surrounding colors. If you want to read up all the technical details this will get really complicated really soon.
Calculate one color based on another. You could build a website with just one base color and use relative colors for everything else.
The Web Authentication API allows servers to register and authenticate users using public key cryptography instead of a password.
text-wrap: balance allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width, often used to make headlines more readable and visually appealing.
Adjusts line breaking to avoid a short single word on the last line (also known as typographic orphans.)
That useful feature from CSS preprocessors.
Select elements that contain elements that match the selector you pass into the :has() function. Commonly known as parent selector – but far more useful.
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.
Control the time position of regular CSS Animations with the position of a scrollbar.
A better solution for styling drop caps.
ARIA defines 8 landmark roles to structure web pages for accessibility. With the planned addition of search, every ARIA landmark will have a native HTML equivalent.
The evolution of CSS Conditionals.
A new specification that defines »anchor positioning«, where a positioned element can size and position itself relative to one or more »anchor elements« elsewhere on the page.
It’s important to meet individual needs and preferences, including the accessibility needs of people with disabilites. WAI-Adapt enables users to adapt (or »personalize«) how content is presented.
Toggle states with CSS instead of JavaScript. E.g. for color schemes, tabs, accordions, carousels, off-canvas menus.
Stuff I deleted from the slides because I only had 45 minutes.
I have a feeling lots of people are already using this.
This will make animations so much easier.
You may now use sin(), cos(), tan(), asin(), acos(), atan(), and atan2() in CSS
Take untrusted strings of HTML and Document or DocumentFragment objects, and sanitize them.
Provides information about the system’s battery charge level.
Fonts don’t have to be monochromatic. (An old topic, but it fits with the color themes.)
Safari supports a passwordrules HTML attribute to tell the browser that e.g. lower, upper characters and digits are required.
Occasionally people ask me where I find this stuff. Well, You can follow a few webdevs and visit some websites:
Nicolai Schwarz
@textformer, textformer.de
Designer & Webdeveloper
Dortmund, Germany
mostly Frontend stuff
with Drupal & Backdrop CMS
written various articles in the last 15 years for Screenguide, PC Magazin, Webstandards Magazin, t3n, PHP Magazin
Security
Use it: Right now!
The Content-Security-Policy helps you reduce XSS risks on modern browsers by declaring which dynamic resources are allowed to load.
You can e.g. declare sources for images, styles, scripts, fonts, frames …
CSP is implemented via HTTP response header or alternatively with a meta element.
Performance
Use it: Right now!
WebP is an image format that supports lossy and lossless compression, animation and alpha transparency. It generally has better compression than JPEG, PNG and GIF and is designed to supersede them.
AVIF and JPEG XL are designed to supersede WebP.
DesignAccessibility
Use it: Right now! (last browser Safari added it in Mar 2022)
This selector is useful to provide a different focus indicator based on the user’s input modality: mouse vs. keyboard.
:hover
:focus
:hover
:focus-visible
CSS
Use it: Right now! (all big 5 browsers added this in spring 2022)
CSS
Use it: right now (Chromium browsers were last and added it in Aug 2022)
Now you may change translate, rotate & scale individually.
CSS
Use it: Right now! (last browser Firefox added it in Feb 2023)
CSS
Use it: Somewhere down the road …
Media Queries
Use it: Right now (last browser Safari added it in Mar 23)
Syntax improvements to make media queries using features that have a »range« type (like width or height) less verbose – by using known mathematical comparison operators: >, <, >=, or <=.
Mobile
Use it: Right now! (Chromium bowsers were last and added it in Nov/Dec 2022)
UsabilityAccesibility
Use it: Right now, but carefully (last browser Firefox added it in Apr 2023)
The inert attribute is a Boolean attribute indicating that the browser will ignore the element.
»Note: While inert is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls "inert", consider using the disabled attribute, along with CSS :disabled styles, instead.«
› see developer.mozilla.org
Color
Use it: Right now!
The lab() and lch() color functions represent colors in a way that closely matches human perception and provides access to a wider spectrum of colors than offered by the usual RGB color space.
lab: lightness / a: how much green/red / b: how much blue/yellow
lch: lightness / chroma ("amount of color") / hue
»In LCH, the same numerical change in coordinates produces the same perceptual color difference. This property of a color space is called ›perceptual uniformity‹. RGB or HSL are not perceptually uniform.«
› see Lea Verou: LCH colors in CSS: what, why, and how?
Example from LCH colors in CSS: what, why, and how?
The changes in Hue are closer together.
»Today, the gamut (range of possible colors displayed) of most monitors is closer to P3, which has a 50% larger volume than sRGB.«
› see Lea Verou: LCH colors in CSS: what, why, and how?
oklab() and oklch() offer some additional improvements to lab() and lch().
› see Andrey Sitnik & Travis Turner: OKLCH in CSS: why we moved from RGB and HSL
»In short, OKLCH and LCH are both better choices for developer readability and color modification because the chroma and hue values are closer to how people actually think about color, rather than simply a and b.«
› see Andrey Sitnik & Travis Turner: OKLCH in CSS: why we moved from RGB and HSL
There’s also a new color() functional notation that allows you to specify colors in predefined color spaces. Of course, the device screen and OS also need to support the color space being used.
»The syntax for the rgb() and hsl() functions has changed with the intention of making them easier to use. The commas separating the values are no longer required and you can use a slash to specify an alpha value for the color.«
› see Brian Smith: New functions, gradients, and hues in CSS colors (Level 4)
The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount.
Color
Use it: Will take a while
With CSS Relative Color you can define a color relative to another color, using the from keyword and optionally calc() for any of the color values.
SecurityUsabilityAccessibility
Use it: Soon-ish?
The Web Authentication API allows servers to register and authenticate users using public key cryptography instead of a password. E.g. log in with your phone and your fingerprint.
Typography
Use it: Right now (as it doesn’t break anything)
text-wrap: balance allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width, often used to make headlines more readable and visually appealing.
without text-wrap: balance
Hollywood grinds to a halt on first full day of joint actors’ and writers’ strikes
with text-wrap: balance
Hollywood grinds to a halt on first full day of joint actors’ and writers’ strikes
Typography
Use it: Not yet (might land in Chrome 117)
»The balance value is more about balancing the text in a way that the last line of an element is as long as the first line. The pretty value almost behaves the same way but it’s more about preventing the single word on the last line when there are multiple lines in the element.«
› see Amit Merchant: Text Wrap Pretty is coming to CSS
CSS
Use it: Very soon (waiting for next Firefox version)
CSS
Use it: As soon as Firefox has it (or with Polyfill)
AnimationUsability
Use it: Currently in Chrome, Edge & Opera (SPA)
»The View Transition API makes it easy to change the DOM in a single step, while creating an animated transition between the two states.«
› see developer.chrome.com: Smooth and simple transitions with the View Transitions API
»Although the current implementation targets single page apps (SPAs), this feature will be expanded to allow for transitions between full page loads, which is currently impossible.«
› see developer.chrome.com: Smooth and simple transitions with the View Transitions API
LayoutAccessibility
Use it: Currently in Chrome, Edge; soon in Safari
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.
I am a popover with more information.
»With a modal dialog, the rest of the page (outside the dialog) is rendered inert, so that only the contents of the dialog are interactable.
Importantly, a popover is non-modal. Almost by definition, a popover is not permanent: it goes away (via light dismiss) when the user changes their attention to something else, by clicking or tabbing to something else.«
› see open-ui.org: Popover API (Explainer)
Animations
Use it: Not yet (can be enabled in Chrome, Edge, Opera)
Typography
Use it: Partial support in Chrome, Edge, Opera & Safari
Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.
HTMLAccessibility
Use it: Will take some time
| ARIA role | HTML element |
|---|---|
| Banner | header |
| Complementary | aside |
| contentinfo | footer |
| form | form |
| main | main |
| navigation | nav |
| region | section |
| search | - |
CSS
Was an unofficial Proposal Draft by Tab Atkins-Bittner, September 2018
Made it into CSS Conditional Rules Module Level 5,
W3C First Public Working Draft, December 2021
CSS When/Else Rules is a proposal to extend the concept of CSS conditional rules to arbitrary @when-@else-chains, and supporting this, a proposal to unify the disparate conditional rules into a single grammar.
To avoid conflicts with the preprocessor Sass – as Sass already uses @if, to control whether or not a style block gets evaluated.
CSS
First Public Working Draft, 29 June 2023
This specification defines anchor positioning, where a positioned element can size and position itself relative to one or more "anchor elements" elsewhere on the page.
For example, an author might want to position a tooltip centered and above the targeted element, unless that would place the tooltip offscreen, in which case it should be below the targeted element.
› See the draft.
Accessibilty
Use it: years in the future
»People have very different needs. There are many people with cognitive and learning disabilities that affect their ability to interact with the web. […]
The various WAI-Adapt module specifications enable authors to selectively add semantic information about content to enable content and interface personalization for individual users.«
› see w3.org: WAI-Adapt Explainer
CSS
Currently an unofficial Proposal Draft
by Tab Atkins and Miriam Suzanne
Toggle states with CSS instead of JavaScript.
E.g. for color schemes, tabs, accordions, carousels, off-canvas menus
› see: CSS Toggles Explainer & Proposal
› see: Demo Page (with Polyfill)
