The future of style

The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C.

Latest articles

Minutes Telecon 2022-06-22

Source: CSS WG BlogDael Jackson • 22 June 2022

Full Meeting Minutes

Release Notes for Safari Technology Preview 147 with Safari 16 Features

Source: Surfin' Safari 21 June 2022

Safari Technology Preview Release 147 is now available for download for macOS Monterey 12.3 or later and macOS Ventura beta. Updates to Safari Technology Preview are no longer available for macOS Big Sur. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS Monterey, or System Settings under General → Software Update on macOS Ventura.

Note: Shared Tab Groups and syncing for Tab Groups, Website Settings, and Web Extensions are not enabled in this release.

Many of the new Safari 16 features are now available in Safari Technology Preview 147:

Live Text. Select and interact with text in videos or translate text in images on the web in macOS Ventura beta on Apple Silicon-based Macs.

Web technologies. Experience and test the HTML, CSS, JavaScript, and other web technologies that are available in Safari 16 Beta and included in previous Safari Technology Preview releases.

Web Push. Send notifications to people who opt-in on your website or web app with Safari Technology Preview on macOS Ventura beta.

Passkeys. Preview the new type of phishing-resistant credential that makes signing in to websites safer and easier. Available through Safari’s WebAuthn platform authenticator. To learn more about passkeys, see Meet passkeys.

Improved Safari Web Extensions. Test out API improvements including the ability to open a Safari Web Extension popover programmatically.

Web Inspector Extensions. Build custom tooling or convert existing developer tools extensions to use in Web Inspector.

Flexbox Inspector. Use the new visualization overlay in Web Inspector to help you more quickly and easily understand the layout of elements with Flexbox. It marks both the free space and gaps between flex items to reveal how they affect the result.

If you see bugs or unexpected behavior with the interface of Safari Technology Preview, please file feedback with Apple’s Feedback Assistant. If you come across an implementation bug in web technology, Web Inspector, or have a request, please file a ticket on the WebKit bug tracker.

Debug the web in 3D with the 3D View tool

Source: Microsoft Edge Blog Microsoft Edge Team • 21 June 2022

Microsoft Edge DevTools has had a 3D View tool for some time already, and it’s a really great way to visualize how web pages are constructed. The tool is becoming even better! We've recently added new functionality to it and updated the navigation interface to make it more powerful and easier to use. In this article, we'll look at some of the great ways you can use the 3D View tool to solve common web development problems such as DOM complexity, unwanted scrollbars, or z-index stacking issues. And then we will go over a new performance improvement capability we just added. Screenshot of Microsoft Edge, with some Bing.com search results and DevTools opened on the side, showing the page in 3D.

Solving common problems, faster

For web developers, being able to visualize a web page in three dimensions can be very useful. Let's review a few use cases when the 3D View tool comes in handy.

Find out how complex a page is

Sometimes, extra HTML <div> elements are used to achieve a certain style, or make a JavaScript-based feature work. But things can quickly get out of hand, and it’s not uncommon to end up with DOM trees that are very deeply nested. Screenshot of part of a DOM tree as seen in Edge DevTools where many DIV elements are nested into each other. This can make it much harder to work on the HTML code of your page, as well as debug it. But it can even have performance implications. The more the DOM tree grows, the longer the browser will need to re-calculate styles when things change. The 3D View tool is a fast way to find these deeply nested containers. Select the DOM tab of the 3D View tool to see the DOM tree in 3 dimensions and discover which part of your page may have too many wrappers. Screenshot of Microsoft Edge DevTools 3D View tool, with the DOM tab selected, showing a very high tower of nested elements.

Quickly spot out-of-viewport elements

Sometimes, elements end up outside the visible browser viewport. Whether you've positioned an element there because you plan to transition it in the page later, or whether it was by accident, finding them in DevTools can prove quite hard. You can't use the element picker to select them in the page, they're just not reachable. Using right-click > inspect is also not an option in this case, and using the Elements panel to find them may be difficult. There is a much faster way to do this by using the 3D View tool. The DOM tab of the tool gives you an overall view of the entire web page and allows to zoom out and pan around the scene until you find the elements that are out of the viewport. Click one of the elements to jump to the Elements tool. Screenshot of Microsoft Edge DevTools 3D View tool, showing the page in 3D, zoomed-out a bit, and an element off to the side, outside of the page. In fact, this ability to zoom out to reveal elements that are outside of the viewport can also prove useful to debug unwanted scrollbars too. Unwanted scrollbars are one of the most frustrating issues when working with CSS. Sometimes content overflows in ways we don't want it to and this may lead to scrollbars appearing. When scrollbars appear, one of the most important things to do is finding out which elements in the page are overflowing. With a large and deep DOM tree, this is not always an easy task to do. The 3D View tool can help do this much quicker. By panning around the scene in the DOM tab and zooming out, you can discover which elements stick out of the main page container and cause scrollbars. Screenshot of Microsoft Edge DevTools 3D View tool, showing the page in 3D, zoomed-out a bit, and with the page sidebar sticking out of the page at the bottom.

Debug z-index stacking issues

Cases when modal dialogs, tooltips, or drop-down menus compete for the highest z-index on a page are also quite common and frustrating. Finding out the root cause of such a problem requires a good understanding of what a stacking context is, and what makes an element be one. Often, arbitrarily high z-index values are used to fix the issue, but that does not always work. The 3D View tool has a Z-index tab that makes investigation much easier. The tool makes it possible to see which elements are stacking contexts and how elements are stacked along the z-index axis. Screenshot of Microsoft Edge DevTools 3D View tool, on the Z-index tab, showing the page in 3D and elements that are positioned along the z-axis. As we just saw, the 3D View tool is great at quickly spotting common issues and getting you on a path to fixing them. But recently, we have made the tool even more powerful.

Debug performance issues with Composited Layers

We introduced a new tab in the 3D View tool, Composited Layers, which helps make sure a web page is broken down in the correct number of layers to have great performance when pieces of it are animated or changing independently of the rest. To understand how layers occur on the web and why they’re important, it’s necessary to know how browser rendering engines work, at a high-level. To go from HTML and CSS to pixels on a screen, a browser engine needs to go through multiple steps:
  1. Parse the HTML code and build the DOM tree of the page.
  2. Parse the CSS code and get the style and layout information for the page.
  3. Using the above, create a new tree structure that describes the layout of the page, i.e., where, and how big each element on the page is.
  4. Finally, paint the page to the screen by using the layout and style information.
During this last step, the engine may decide to paint the page in one go, or to divide it into multiple layers, paint them individually, and then compose the final image from them. There are specific CSS properties and HTML elements that make the engine decide to create a separate layer. For example, using a 3D transform property or the will-change property makes the engine create layers. This way, when content in these layers change, the engine only has to re-paint these individual layers and not the entire viewport. As a web developer, it can be very useful to know if a part of the page that you intend to animate is, indeed, in its own layer. If it is, then you can be sure that while the animation is playing, the rest of the page won’t need to be repainted too. But it’s equally important to check that you aren’t accidentally creating too many layers either, as each one needs memory. In the 3D View tool, select the Composited Layers tab to discover the layers that were created. Screenshot of Microsoft Edge DevTools 3D View tool with its Composited Layers tab, showing the page in 3D, and the list of layers that got created. In the sidebar on the left-hand side, the list of layers is displayed and hovering over each of them highlights it in the 3D scene. Click on a layer to discover details about it in particular: its size (the bigger the size, the more memory will be needed) and the reasons why it was created. On a related note, Microsoft Edge DevTools used to have a separate Layers tool which supplied the same functionality. We merged it with the 3D View tool to reduce the total number of panels, to make it easier to discover, and to make it a more consistent experience.
You can learn more about the 3D View tool on our documentation: Navigate webpage layers, z-index, and DOM using the 3D View tool, and watch this video for more information. https://www.youtube.com/watch?v=LVb1Xzzd72w We’re constantly improving the tools in Microsoft Edge, like the 3D View, and we are on a path to making DevTools a radically more user-friendly product, based on your feedback. If you have any suggestions or ideas about anything related to DevTools, you can send us feedback on our DevTools repository. We hope you enjoy the 3D View tool! – Patrick Brosset, Senior Product Manager, Microsoft Edge

Updated Candidate Recommendation: CSS Custom Properties for …

Source: W3C's Cascading Style Sheets home page16 June 2022

16 Jun 2022 Updated Candidate Recommendation: CSS Custom Properties for Cascading Variables Level 1.

Minutes Telecon 2022-06-15

Source: CSS WG BlogDael Jackson • 15 June 2022

Full Meeting Minutes

Minutes Telecon 2022-06-08

Source: CSS WG BlogDael Jackson • 08 June 2022

Full Meeting Minutes

News from WWDC22: WebKit Features in Safari 16 Beta

Source: Surfin' Safari 06 June 2022

WebKit has had a big year, with over 162 new features and improvements shipping in WebKit browsers — including Safari 15.2, Safari 15.4, and Safari 15.5. Features from earlier this year include dialog element, lazy loading, inert, :has() pseudo-class, new viewport units, Cascade Layers, focus visible, accent color, appearance, font palettes for color fonts, BroadcastChannel, Web Locks API, File System Access API, enhancements to WebAssembly, support for Display-P3 in canvas, additions to COOP and COEP, improved CSS autocompletion and new CSS variable tooling in Web Inspector, and much, much more.

We’re excited to announce today the major web technologies shipping in Safari 16 beta.

If you are an Apple Developer program member, you can test Safari 16 today by installing the developer betas of macOS Ventura, iOS or iPadOS 16.

Web Inspector Extensions

Safari 16 brings support for Web Inspector Extensions, so you can enhance Safari’s built-in browser developer tools. This can be especially helpful when using powerful third-party frameworks and services — perhaps your team uses React, Angular, Vue, or Ember; or maybe a popular test suite or another developer service. Now with Safari Web Inspector Extensions, you’ll be able install developer tools extensions from those frameworks and services to make your job developing with them faster and easier. Look for such extensions in the App Store this fall.

Extensions for popular third-party frameworks and services aren’t the only exciting use of Web Inspector Extensions. Often, a small enhancement to developer tools can make a huge difference in workflow. You might be the best person to imagine and create such an extension. Web extensions are made from HTML, CSS, and JS — a perfect project for web developers. To learn the basics of building a Safari Web Extension, either from a quick-start template or by converting an existing extension to work with Safari, along with how to package it for the App Store, watch the Tech Talk Build and deploy Safari Extensions.

Safari Web Inspector Extensions are made with the same JavaScript APIs as the developer tools extensions in other browsers. This makes it possible for the creators of your favorite developer tools extensions to easily port them to Safari.

Web Inspector Extensions join other improvements to Safari Web Extensions, including the ability to sync which extensions are enabled across iOS, iPadOS, and macOS.

Container Queries

After years of collaboration by engineers working on various browsers to figure out whether or not they would even be possible, Container Queries are finally here. Similar to Media Queries, Container Queries allow you to adjust the layout or styling of a particular item on your web page based on the size of its container rather than the size of the viewport. They’ll be an invaluable tool for creating reusable components in a design system.

Safari 16 supports size queries and container query units. “Size queries” are what web developers imagine when they talk about container queries — the opportunity to write CSS that only applies if a container is a certain size. Other ideas for style queries are also being discussed as part of Container Queries as something for the future.

Container query units are similar to viewport units, but they specify a length relative to the dimensions of a query container instead of the viewport.

unit relative to
cqw 1% of a query container’s width
cqh 1% of a query container’s height
cqi 1% of a query container’s inline size
cqb 1% of a query container’s block size
cqmin The smaller value of cqi or cqb
cqmax The larger value of cqi or cqb

Web Push for macOS

a push notification on macOS

Web Push is coming to Safari 16 on macOS Ventura. This lets you remotely send notifications to users of your websites and web apps — and deliver those notifications even when Safari isn’t running. It uses the same combination of web standards you may be familiar with from other browsers: Push API and Notifications API, along with Service Worker.

Users opt into notifications by first indicating interest through a user gesture — such as clicking a button. Then, they’ll be prompted to give permission for your site or app to send notifications. Users will be able to view and manage notifications in Notifications Center, and customize styles and turn notifications off per website in Notifications Settings.

If you’ve already implemented Web Push for your web app or website using industry best practices, it will automatically work in Safari. Although, if you’ve excluded Safari through browser detection, you’ll need to switch to feature detection to get it working.

Web Push in Safari uses the same Apple Push Notification service that powers native push on all Macs and iOS devices. If you tightly manage push endpoints on your server, be sure you allow URLs from any subdomain of push.apple.com. You do not need to be an Apple Developer Program member.

And look for Web Push for iOS and iPadOS in 2023.

Subgrid

CSS Grid shipped over five years ago, in March 2017, revolutionizing what’s possible in layout design on the web. Subgrid takes Grid to another level, providing an easy way to put grandchildren of a grid container on that grid. It makes it possible to line up items across complex layouts without being constrained by the HTML structure. And Safari’s Grid Inspector lets you turn on the overlays for as many grids as you want — which is especially helpful when coding subgrid.

Flexbox Inspector

Following last year’s Grid Inspector, Safari 16 adds a Flexbox Inspector. It pairs perfectly with the addition of the Alignment Editor in Safari 15.4.

Overlays for Flexbox containers make it easier to visualize the effects your CSS has on Flexbox containers. The new overlay helps you visually distinguish between free space and gaps. It also shows the bounds of items revealing how they are distributed both on the main axis and cross axis of your Flexbox containers. The toggle-able “Order Numbers” option helps show the layout order of elements in the container, which can be helpful when using the order CSS property for items. And, just like our overlays for Grid last year, you can turn on as many Flexbox overlays as you need, without impacting performance.

Accessibility Improvements

Safari 16 introduces a re-architecture of WebKit’s accessibility support on macOS that delivers improved performance and increased responsiveness. This change allows WebKit to service more accessibility requests from clients like VoiceOver in less time than before. On some complex webpages, we’ve measured twice the number of accessibility requests served in twenty-five percent less time.

This release also greatly improves accessibility support for elements with display:contents by ensuring they are properly represented in the accessibility tree.

Animation Improvements

CSS Offset Path (also known as Motion Path) provides web developers a way to animate things along a custom path of any shape. The offset-path property let’s you define a geometrical path along which to animate. The offset-anchor, offset-distance, offset-position, and offset-rotate properties give you additional abilities to refine the exact movement of the object being animated. While the offset property acts as a shorthand for combining these properties.

With Safari 16, you can now animate a CSS Grid. That means changes in the size of rows and/or columns can be animated, opening up a whole new set of possibilities for movement on a page.

Safari 16 also adds support for composite operations, resolving how an element’s animation impacts its underlying property values. And it adds support for discrete animation to thirty-nine CSS properties — see the full list in the Safari Technology Preview 143 release notes.

Overscroll Behavior

CSS Overscroll Behavior determines what happens when a user scrolls and reaches the boundary of a scrolling area. It’s useful when you want to stop scroll chaining — when a user scrolls inside a box and hits the end, you now have control over stopping or allowing scrolling on the rest of the page.

Shared Worker

Just when you thought there weren’t enough different kinds of workers, there’s a new type of worker in Safari — Shared Worker. Like Service Worker, a Shared Worker runs JavaScript in the background, but its lifetime is slightly different. Your Shared Worker runs as long as the user has any tab open to your domain, and all the tabs open to the same domain can share the same Shared Worker. So, if you want to do something like have one WebSocket connection open to a server that communicates on behalf of multiple tabs, try out Shared Worker.

And more

There’s much more, including fixes and improvements to form controls as well as support for <form>.requestSubmit() and the showPicker() method for HTML input elements. Plus support for Shadow Realms, as well as support for the worker-src Content Security Policy directive.

To learn more about what’s in Safari 16 for web developers, including a list of bug fixes, read the Safari 16 beta release notes.

Feedback

We love hearing from you. Send a tweet to @webkit, @jensimmons, or @jonathandavis to share your thoughts on this release. What technology from Safari 16 are you most excited about? What features or fixes do you want to see next? If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technology or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features. You can also use the WebKit Feature Status page to watch for new information about the web features that interest you the most.

Web technology sessions at WWDC22

Source: Surfin' Safari 06 June 2022

WWDC22 is here, and with it, a host of announcements of new web technology shipping in WebKit on macOS, iOS and iPadOS, including advancements in privacy and security – plus new features for Safari, Web Inspector and Safari Web Extensions. Much of the news was announced on Monday during this year’s keynote, is listed in the Safari 16 Beta Release Notes, and is described in News from WWDC: WebKit Features in Safari 16 Beta. But that’s not all.

Ten sessions at WWDC22 go into greater detail, demonstrating new technology directly relevant to web developers. New videos will be released each day this week. You can watch them on the WWDC22 website, or in the Apple Developer app for macOS, iOS, iPadOS, and tvOS.

Be part of the conversation during WWDC on the Apple Developer Forums, or share your thoughts with @WebKit on Twitter.

Tuesday, June 7

What’s new in Safari and WebKit

Explore the latest features in Safari and WebKit and learn how you can make better and more powerful websites. We’ll take you on a tour through the latest updates to HTML, CSS enhancements, Web Inspector tooling, Web APIs, and more.

Watch What’s new in Safari and WebKit starting on Tuesday, June 7.


Meet Web Push for Safari

Bring better notifications to your websites and web apps in Safari on macOS with Web Push. We’ll show you how you can remotely send notifications to people through the web standards-based combination of Push API, Notifications API, and Service Workers.

Watch Meet Web Push for Safari starting on Tuesday, June 7.


Meet Passkeys

It’s time for a security upgrade: Learn how to add support for passkeys to create a quick and easy sign in experience for people, all while offering a radical increase to account security. Passkeys are simple and strong credentials built to eliminate phishing attacks. We’ll share how passkeys are designed with security in mind, show you how people will use them, go over how to integrate passkeys in your log in flow, and explore the platform and web APIs you need to adopt this feature.

Watch Meet Passkeys starting on Tuesday, June 7.


Wednesday, June 8

What’s new in Safari Web Extensions

Learn how you can use the latest improvements to Safari Web Extensions to create even better experiences for people browsing the web. We’ll show you how to upgrade to manifest version 3, adopt the latest APIs for Web Extensions, and sync extensions across devices.

Watch What’s new in Safari Web Extensions starting on Wednesday, June 8.


Replace CAPTCHAs with Private Access Tokens

Don’t be captured by CAPTCHAs! Private Access Tokens are a powerful alternative that help you identify HTTP requests from legitimate devices and people without compromising their identity or personal information. We’ll show you how your app and server can take advantage of this tool to add confidence to your online transactions and preserve privacy.

Watch Replace CAPTCHAs with Private Access Tokens starting on Wednesday, June 8.


Thursday, June 9

Create Safari Web Inspector Extensions

Learn how to add your own tools directly into Web Inspector using the latest Web Extensions APIs. We’ll show you how to create your own tab in Web Inspector, evaluate JavaScript in the inspected page, and use the result to help you troubleshoot and identify potential problems.

Watch Create Safari Web Inspector Extensions starting on Thursday, June 9.


What’s new in web accessibility

Discover techniques for building rich, accessible web apps with custom controls, SSML, and the dialog element. We’ll discuss different assistive technologies and help you learn how to use them when testing the accessibility of your web apps.

Watch What’s new in web accessibility starting on Thursday, June 9.


Enhance your Sign in with Apple experience

Learn how you can provide safe and fast authentication in your app using Sign in with Apple. We’ll show you how you can upgrade password-based accounts into secure, single-tap login credentials, and explore how you can seamlessly handle changes to user sessions in your app. We’ll also help you take advantage of Sign In with Apple across the web and on other platforms. To get the most out of this session, we recommend having familiarity with Sign In with Apple and REST API. We’d also recommend having a basic understanding of JavaScript.

Watch Enhance your Sign in with Apple experience starting on Thursday, June 9.


Friday, June 10

What’s new in WKWebView

Explore the latest updates to WKWebView, our framework for incorporating web content into your app’s interface. We’ll show you how to use the JavaScript fullscreen API, explore CSS viewport units, and learn more about find interactions. We’ll also take you through refinements to content blocking controls, embedding encrypted media, and using the Web Inspector.

Watch What’s new in WKWebView starting on Friday, June 10.


Improve DNS security for apps and servers

Discover the latest ways to ensure that DNS — the foundation of internet addressing — is secure within your app. Learn how to authenticate DNS responses in your app with DNSSEC and enable DNS encryption automatically with Discovery of Designated Resolvers (DDR).

Watch Improve DNS security for apps and servers starting on Friday, June 10.

Announcing our Global Scope 2022 curator, Shawn (swyx) Wang

Source: Web Directions Blog John • 27 May 2022

We were working on the idea for what became Global Scope, our JavaScript focussed conference for years, and in 2021, as part of our approach to online conferences (creating a series of focussed in-depth events around different aspects of front end engineering including CSS, Web performance, PWAs, accessibility and more) we held our first Global Scope.

Aren’t there enough JavaScript conferences already?

Why another JS conference? The goal of the Global Scope was to focus entirely on JavaScript. There are many in-person and online conferences all over the world with the word JavaScript in their name. But as amazing as many of them are, none focusses specifically on JavaScript-they’re effectively web development conferences.

Now, we’ve run dozens of web development conferences, so we have very much nothing against them at all–but we did feel that like C++, Python, Go, Rust and so many other languages, JavaScript deserved a conference all to itself–which is the goal of Global Scope.

Getting the program right

Last year we worked with a number of folks at TC39 (the technical committee at ECMA responsible for standardising ECMAScript (aka JavaScript)) to program the conference.

This year, we’re excited and honoured to have Shawn Wang (aka swyx) helping curate (and MC) the program. Our goal is a mix of recent and emerging JavaScript language features (like modules, new array features and more) as well as development practices, like debugging.

The aim is to help you keep up to date with developments in JavaScript, both the language itself, and its use.

If you work with JavaScript, we hope you can join us July 22 and 29 for an amazing program, hand crafted by Shawn Wang.

About Shawn Wang

Shawn Wang has worked on React and serverless JavaScript at Two Sigma, Netlify and AWS, and most recently as Head of Developer Experience at Temporal.io.

He has started and run communities for hundreds of thousands of developers, like Svelte Society/r/reactjs, and the React TypeScript Cheatsheet.

His nontechnical writing was recently published in the Coding Career Handbook for Junior to Senior developers.

The post Announcing our Global Scope 2022 curator, Shawn (swyx) Wang appeared first on Web Directions.

Release Notes for Safari Technology Preview 146

Source: Surfin' Safari 25 May 2022

Safari Technology Preview Release 146 is now available for download for macOS Big Sur and of macOS Monterey 12.3 or later. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.

This release covers WebKit revisions 293023-293745.

Note: Tab Groups do not sync in this release.

Web Inspector

CSS

JavaScript

Forms

Media

Rendering

Scrolling

HTML

Shared Worker

Service Worker

Web API

Accessibility

Security

Minutes Telecon 2022-05-25

Source: CSS WG BlogDael Jackson • 25 May 2022

Full Meeting Minutes

Customizing Color Fonts on the Web

Source: Surfin' Safari 25 May 2022

Color fonts provide a way to add richness to your designs without sacrificing any of the many benefits of using plain text. Regardless of how decorative a color font is, the underlying text is always searchable, copy/paste-able, scalable, translatable, and compatible with screen readers.

WebKit now supports CSS @font-palette-values. With this at-rule, you can access predefined color palettes provided by the font designer, and you can customize them in order to make the color font a perfect match for the colors in your designs.

ONCE upon a time in the middle of winter, when the flakes of snow were falling like feathers from the clouds, a Queen sat at her palace window, which had an ebony black frame, stitching her husband’s shirts. While she was thus engaged and looking out at the snow she pricked her finger, and three drops of blood fell upon the snow. Now the red looked so well upon the white that she thought to herself, “Oh, that I had a child as white as this snow, as red as this blood, and as black as the wood of this frame!” Soon afterwards a little daughter came to her, who was as white as snow, and with cheeks as red as blood, and with hair as black as ebony, and from this she was named “Snow-White.” And at the same time her mother died.

THIS answer so angered the Queen that she became quite yellow with envy. From that hour, whenever she saw Snow-White, her heart was hardened against her, and she hated the little girl. Her envy and jealousy increased so that she had no rest day or night, and she said to a Huntsman, “Take the child away into the forest. I will never look upon her again. You must kill her, and bring me her heart and tongue for a token.” The Huntsman listened and took the maiden away, but when he drew out his knife to kill her, she began to cry, saying, “Ah, dear Huntsman, give me my life! I will run into the wild forest, and never come home again.”

You can try out @font-palette-values today in Safari 15.4 or later.

Color palettes work great in WebKit with the COLRv0 font file format, and we are investigating other formats like SVG.

Background on the font above

The font in this demo is a revival of Bradley, a “fairytale blackletter” originally released in 1895. The typeface came with a special set of ornate Initial caps meant for drop caps (see also ::initial-letter) and other titling uses, which David digitized this past December for his Font of the Month Club, just in time for the holidays.

Each glyph is made up of a handful of distinct layers (letterform, backdrop, ornate linework, letter outline, and border). Making the layers different-yet-coordinated colors adds depth to the design, taking it beyond what a simple foreground/background can provide. It felt like the perfect use case for a color font with multiple color palettes, and a unique opportunity for a 127-year-old font to play a small part in an emerging font technology.

Palettes in CSS

Fonts can define one or more of their own color palettes inside the CPAL table inside the font file. The palettes are ordered, and so they are identified by index. For example, a font might define color palette #3 that uses blues and greens, but another palette #5 might use reds and oranges. Colors within a palette inside the font are also identified by index – all palettes contain the same number of colors within themselves.

These color palettes can be tweaked or overridden in CSS using font-palette-values. An example looks like this:

@font-palette-values --lilac-blossom {
    font-family: "Bradley Initials DJR Web";
    base-palette: 7;
    override-colors: 0 #fff, 1 #F3B0EB;
}

This example means “Make a color palette named Lilac Blossom, that, when applied to Bradley Initials DJR Web, is just like the 7th palette in the font, but overrides color #0 in that palette to be white, and color #1 in the palette to be #F3B0EB.” If you don’t want to override any colors, that’s no problem – just delete the entire override-colors descriptor.

You can then apply this color palette by simply supplying it to the font-palette property like this:

font-palette: --lilac-blossom;
The Round Table

 

Progressive Enhancement

If you’re using an older version of Safari, or a different browser which doesn’t understand the font-palette property, it will render the default (0th) color palette in the font. Here’s what the above example would look like in such a browser:

The Round Table

 

If the fallback behavior is undesirable for your particular font, you can detect browsers that understand CSS color palettes in your stylesheet by using the @supports media query, like so:

@supports (font-palette: --lilac-blossom) {
    .lilacblossom {
        font-palette: --lilac-blossom;
    }
}

@font-palette-values --lilac-blossom {
    font-family: "Bradley Initials DJR Web";
    base-palette: 7;
    override-colors: 0 #fff, 1 #F3B0EB;
}

Dark Mode

Not all color palettes are clearly visible on all backgrounds. Without color fonts, the color used to render text was entirely determined by the CSS author, but now that fonts can have color palettes defined inside them, it’s up to CSS authors to pick or create a color palette that is legible on the background it’s being rendered on. This can be particularly tricky when font fallback occurs, or when the user has blocked some fonts from loading.

Fonts such as Bradley Initials DJR Web have an extra tool for helping with this, though. Fonts can indicate that certain palettes inside them are usable with light backgrounds or usable with dark backgrounds, and these palettes are hooked up to the font-palette property. You don’t even have to use @font-palette-values!

So, if you want to use a color palette on a dark background, you can simply say font-palette: dark, like this:

ABCDEFG

And the same thing for a light background: font-palette: light:

ABCDEFG

Because the font-palette property has no effect on non-color fonts, it’s safe to set it in conjunction with the prefers-color-scheme media query, like this:

@media (prefers-color-scheme: dark) {
    :root {
        background: black;
        color: white;
        font-palette: dark;
    }
}

Fallback

Because @font-palette-values blocks are scoped to a specific font, you can make multiple of them that share a name. This is really powerful – it means you can define a single color palette name, and have it applied differently to whatever font happens to be rendered with it. Here’s an example:

@font-palette-values --lilac-blossom {
    font-family: "Bradley Initials DJR Web";
    base-palette: 1;
}

@font-palette-values --lilac-blossom {
    font-family: "Megabase";
    base-palette: 2;
}

<div style="font-palette: --lilac-blossom;">
    <div style="font-family: 'Bradley Initials DJR Web';">Pizza is amazing!</div>
    <div style="font-family: 'Megabase Web';">Is there any food better than pizza?</div>
</div>

This will have Bradley Initials DJR Web’s Lilac Blossom palette applied to Bradley Initials DJR Web, and Megabase’s Lilac Blossom palette applied to Megabase. And you only had to specify the font-palette property once!

Contextual color

In addition to pulling colors from palettes, some color fonts set aside special shapes that are connected to the foreground color of the current element. This makes them extra flexible, but it also means that these shapes operate independently from font-palette. In these cases, you can simply use the color property to change their color, like in this demo using Megabase.

<div style="font-family: 'Megabase Web';">
    <div style="color: black;">They were just pushed into space.</div>
    <div style="color: blue;">As much as I care about you.</div>
</div>

They were just pushed into space.

As much as I care about you.

Conclusion

Of course, with power comes responsibility; just because you can change colors, doesn’t mean you always should. Often the colors in a palette are coordinated to harmonize aesthetically, so it’s good to have a sense of how they are meant to relate to one another. You can look at the font’s predefined color palettes to see how the font designer assigned the roles for each color in the palette, and tweak accordingly.

It is also important to choose colors that contrast strongly against the background in order to keep your text readable and your webpage accessible. Colors in the palette that are used to form the base of the letters should typically “pop” against the background, while supporting layers like shadows, outlines, and decorative elements might contrast less in order to keep them from overpowering the letterforms.

Color fonts are a great improvement over graphic images, because they work by default with screen readers, copy/paste, and find-in-page. Also, they gracefully show fallback text if the font somehow fails to load, and they reflow if the browser window resizes. Not only that, color fonts are more flexible than graphic images, because they can incorporate the foreground color of the element using them into the design of the font.

Color fonts are not meant to take the place of single-color fonts. But used in moderation, at a big enough size in the right circumstance, they can be the perfect icing on the cake!

You can contact Myles C. Maxfield at mmaxfield@apple.com or @Litherum, and you can contact David Jonathan Ross at david@djr.com or @djrrb, and you can find David’s work at djr.com.

We’d love you to Speak at Web Directions Summit in Sydney late 2022

Source: Web Directions Blog John • 25 May 2022

Late last year, (just literally as the omicron wave hit Australia) we announced our annual Summit (along with our Code Leaders conference) would be returning late 2022, to Sydney.

When we return it will be over 3 years since our last in-person conference.

So much has changed in the world and our industry since then. And we want to hear from you about it.

There’ll be over 80 presentations across 6 specialised tracks (up from our our traditional tracks–Product, Design, and Front End development)–plenty of opportunity an scope.

So, if you’ve got experience, lessons learned, ideas to share with your colleagues, across design, product, dev and more, we’d love to hear from you.

Here’s there tracks we have lined up (and read on for what we think makes for a great presentation–hint it really helps when getting on the program to keep these in mind)

When do CFPs close?

CFPs close June 30, but don’t delay–if we get a good proposal we like we’ll often lock it in early!

Submit you proposal (or proposals) here.

The Old Favourites

Design

All things modern design–product, UX, UI, IxD, visual, Design Research, DesignOps–if the design team does it we would love to hear about it.

Product Management

From discovery to onboarding, A/B Testing to growth strategies, customer success and more, our Product track covers everything the modern product professional and team needs to succeed.

Front End Dev

Covers key technologies and practices in front end development, including CSS, JavaScript, DOM APIs, PWAs, Web Components, performance, accessibility, security, and more. If it’s about building modern, standards based Web sites and apps, we want it on this track!

3 Brand New Tracks!

And now for the new tracks!

Content Design/Strategy

Often overshadowed, we’ll be featuring a track covering all things content design and strategy for the first time at Summit this year.

The React ecosystem

React and its ecosystem are such a core area of focus today that we’re spinning up a new track to focus on all things React and related, including NextJS, Remix, Redux, headless CMS, and more…

Career Development Track

We started with the idea of a Junior developer track, but quickly realised what’s important to juniors is important to everyone-which includes developing your career.

So for the first time in 2022, we’ll have a Career Development track. We’ll have sessions focussed on designers, developers, product professionals, and at different stages of folks’ journey–junior, mid-level, senior and beyond.

Don’t forget Code Leaders

Code Leaders has run for several years alongside our Code conference in Melbourne (we’re focusing all our energy when it comes to in-person events this year on Summit). We felt it was too important just to let slide so we’re running it the day before Summit.

It’s aimed at senior engineering professionals, engineering managers, CTOs and the like and covers higher level issues in technology, as well as leading and managing engineering teams an organisations.

So, if you’d like to share your ideas and experience leading engineering teams, we’d love to hear your proposals.

Submit your proposals by June 30

CFPs close June 30, but don’t wait til the deadline, as if we see a proposal we like, we will often lock it in right away. Submit your proposal here for Summit, and submit a proposal here for Code Leaders.

What do speakers get?

Speakers chosen from our CFPs we fly to Sydney from wherever they are, put them up in a nice hotel, and look after them very nicely with speaker dinners, receptions and more.

We film all presentations, edit them, and weave our magic to create unique online presentations which we host at Conffab (and you can of course host elsewhere).

What we think makes a great presentation

At Web Directions we have a strong editorial style we’ve developed over more than 15 years of putting together conferences. The type of sessions that prove popular, and so which we program, tend to have a number of characteristics:

One of the things we love hearing from our audience is “I can’t wait to get back to work and put this into practice“. If you can aim for that, for the event’s target audience, you’ll go a long way to getting a place in the schedule.

Here’s a few more tips what we recommend to give yourself the best chance of getting a place at our conferences.

Once again: Submit your proposals by June 30

As we said, CFPs close June 30, but don’t wait til the deadline, as if we see a proposal we like, we will often lock it in right away. Submit your proposal here for Summit, and submit a proposal here for Code Leaders.

The post We’d love you to Speak at Web Directions Summit in Sydney late 2022 appeared first on Web Directions.

Reports of the Web’s death have been greatly exaggerated

Source: Web Directions Blog John • 22 May 2022

One of the side effects of running several focussed conferences into various aspects of front end development as we do with our series of online conferences is you really do get a good understanding of what’s happening with the Web platform–the technologies themselves, in browsers, developers’ perspectives, and more broadly still the place of the Web in society more widely.

So today, after Google’s I/O conference last week, with a slew of new Web features announced, a new found dynamism to Safari’s Technology Preview releases, and some other interesting developments I thought I’d bring together some of these trends for this weeks newsletter.

Resurgence in CSS (and Safari)

Apple, with Safari in the early 2000s, and a huge amount of innovation (canvas, animation, transformation, web fonts and other CSS features) in and around the time of the launch of the iPhone was as responsible as anyone for the resurgence of the Web after some moribund times as Internet Explorer (and Windows) became increasingly dominant around the turn of the millennium.

Recently, many have expressed concern about Safari on the iPhone (where webkit has a monopoly as the sole browser engine, regardless of the browser you use) holding back innovation on the Web platform (more on that issue another time), but it’s exciting see so much innovation particularly around CSS, in Safari as well as other browsers.

We outlined some of these in recent weeks, and covered many of them in great detail at Hover a few weeks back (videos available soon at Conffab).

In short a wave of new features, many focussed less on visual effects and more on addressing issues around architecting complex large scale CSS are arriving (or have already arrived) in Browsers.

At Google I/O, Adam Argyle (who’d a similar detailed wrap upon new and emerging CSS features at Hover in 2021), gave an overview CSS in 2022.

Regulators and legislators turn to the web (browsers)

In 2001 at the height of the market dominance of Internet Explorer (a perfectly natural phrase to older web folks, one which might seems odd to those more recent to Web development) the United States Government brought an anti monopoly case against Microsoft, for (among other things) bundling Internet Explorer with the Windows Operating System.

In 2021 and 2022, regulators and legislators around the world have been turning their attention to mobile platforms, particularly iOS and Android. This attention has a strong focus on App Stores, but also on search engine and browser competition, and will likely have far reaching if not always easy to predict implications.

What increasingly seems likely is the European Union will, with the EU’s Digital Markets Act, require Apple, as the Register reported recently, “to allow browser competition on iOS devices”.
The Register quotes The Platform Law Blog, an expert publication on platforms related regulation and legislation, who conclude

Article 5 point (e) has been expanded to capture instances where the gatekeeper requires business users to offer or interoperate with a web browser engine. This is most likely meant to address Apple’s policy of requiring all browsers running on iOS to utilize Apple’s WebKit browser engine – a policy which the UK CMA has recently found may have restricted the development of web apps, among others.

The leaked “final” version of the Digital Markets Act: A summary in ten points

There seems to be a number of trends, including governments and regulators responding to the “techlash” against huge technology platforms leading to the prospect of considerable regulation of technology platforms, not just in the EU, but in more traditionally regulation averse jurisdictions like the US and UK.

The sense is growing that we will see the EU (and likely other jurisdictions) require iOS to allow alternative web browser engines.

It remains to be seen whether other barriers to adoption Web applications face, such as access to device APIs like Bluetooth and NFC, long available to native apps on these platforms, access to devices’ notifications systems, and the ability to install Web applications on a parity with native app installation will be something that is also required of these platforms.

But it does certainly feel that the use cases and value of Web applications is only going to increase on mobile they gain more parity with native apps.

I Replaced My Native iOS App with a Cross-Platform Web App and No One Noticed

Let’s finish with a bit of a case study, from Australian developer Chris Nielsen, about an app he’s developed, and what happened when it went from being a native iOS app to being a web app (still delivered as a native iOS app).

Reports of the web’s death are greatly exaggerated.

Learn more at Code

We’re covering the web platform, and PWAs, in depth at Code, our online conference in September. So if learning more about these sort of trends, and the capabilities of the web platform you can harness to deliver amazing web based experiences, we’d love to see you there!

The post Reports of the Web’s death have been greatly exaggerated appeared first on Web Directions.

Web Directions Lazy Load ’22 session spotlight–Introduction to Cloudflare Workers

Source: Web Directions Blog John • 19 May 2022

Jon Kuperman, Developer Advocate Cloudflare

A lightning talk on Cloudflare’s edge platform. How it works and how you can use it today to deploy serverless functions to hundreds of data centers across the globe.

About Jon Kuperman

Jon Kuperman is a Developer Advocate at Cloudflare. He publishes content on JavaScript, TypeScript, CSS, Web Development, React, career advice and a few other things! You can find him at @jkup on Twitter.

In 2022 we have a whole series of events for Front End Developers

Across 2022 Web Directions is presenting our series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

banners for all of our 2022 events

Priced individually from $195, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Lazy Load ’22 session spotlight–Introduction to Cloudflare Workers appeared first on Web Directions.

Minutes Telecon 2022-05-18

Source: CSS WG BlogDael Jackson • 18 May 2022

Full Meeting Minutes

Release Notes for Safari Technology Preview 145

Source: Surfin' Safari 16 May 2022

Safari Technology Preview Release 145 is now available for download for macOS Big Sur and of macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.

This release covers WebKit revisions 291957-293023. This release of Safari Technology Preview does not support versions of macOS Monterey prior to 12.3. Please update to macOS Monterey 12.3 or later to continue using Safari Technology Preview.

Note: Tab Groups do not sync in this release.

Web Inspector

:has() pseudo-class

Container Queries and Containment

CSS Grid

CSS

Dialog Element

JavaScript

Media

WebAuthn

Web API

Content Security Policy

Security

Service Workers

WebRTC

New WebKit Features in Safari 15.5

Source: Surfin' Safari 16 May 2022

After the feature-packed release of Safari 15.4 two months ago, WebKit’s work for this version of Safari focused predominately on polishing existing features and fixing bugs.

Safari 15.5 does contain three new technologies for web developers — support for the inert property in HTML; support for the worker-src Content Security Policy directive; and the new minimumViewportInset and maximumViewportInset APIs for implementing new CSS Viewport Units in WKWebView-based apps.

Safari 15.5 is available for macOS Monterey 12.4, macOS Big Sur, macOS Catalina, iPadOS 15.5, and iOS 15.5. You can update to Safari 15.5 on macOS Big Sur and macOS Catalina by going to System Preferences → Software Update → More info, and choosing to update Safari.

Developer Features

Let’s look first at the HTML inert attribute. When set on an element, the attribute makes that element non-interactive by preventing mouse and keyboard focus, clicks, edits or text selection. It also hides the element from assistive technologies. For more information about inert, including a demo showing how inert can make the partially-offscreen content in a carousel visible, but inactive, read Non-interactive Elements with the inert Attribute.

Next, let’s look at support for worker-src from Content Security Policy Level 3. The worker-src directive provides web developers a way to restrict which URLs are allowed to be sources for worker scripts (Worker, SharedWorker, or ServiceWorker). This can be used to prevent already loaded scripts from loading more scripts in the form of workers, a situation that has potential to be susceptible to malicious attack through using excessive CPU for computation. We also updated Content Security Policy console logging in Web Inspector.

And last, we’ve added the minimumViewportInset and maximumViewportInset APIs to WKWebView so app developers can add support for all of the new CSS Viewport Units to their browser or other application on iOS, iPadOS and macOS. The minimumViewportInset corresponds to the large measurement, and maximumViewportInset corresponds to the small measurement. The new CSS Viewport Units, which shipped in Safari 15.4, include small (svw, svh, svi, svb, svmin, svmax), large (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamic (dvw, dvh, dvi, dvb, dvmin, dvmax), and logical (vi, vb) units.

Fixes and Polish

Now, let’s get to the list of bug fixes and feature polish.

HTML

Web API

CSS

Authentication

Content Security Policy

Media

WebRTC

Rendering

Apple Pay

WebGL

Web Inspector

Compatibility

SFSafariViewController

Safari Extensions

Feedback

We love hearing from you. Send a tweet to @webkit, @jensimmons or @jonathandavis to share your thoughts on this release. If you run into any issues, we welcome your feedback on the Safari UI or your WebKit bug report about web technology. Filing issues really does make a difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features. You can also use the WebKit Feature Status page to watch for new information about the web features that interest you the most.

And More

For more information on what’s in WebKit for Safari 15.5, read the Safari 15.5 release notes.

These features were first released in Safari Technology Preview: 140, 141, 142, 143, 144, and 145.

Minutes Telecon 2022-05-11

Source: CSS WG BlogDael Jackson • 11 May 2022

Full Meeting Minutes

Updated WD of Selectors Level 4

Source: CSS WG Blogfantasai • 07 May 2022

The CSS Working Group has published an updated Working Draft of Selectors Level 4. Selectors are patterns that match against elements in a tree, and are used most famously in CSS style rules as well as various Web platform APIs.

This long overdue update adds quite a few new pseudo-classes: :defined, :modal, :fullscreen, :picture-in-picture, :muted, :volume-locked, :seeking, :buffering, :stalled, :autofill, and :user-valid. It also adjusts parsing rules for most pseudo-classes such as :is() that accept selectors (but not :not()) to ignore invalid selectors in their arguments, preventing these from invalidating the entire selector. Changes since the last Working Draft are listed in the Changes section.

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([selectors-4]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Updated Working Draft: Selectors Level 4.

Source: W3C's Cascading Style Sheets home page07 May 2022

7 May 2022 Updated Working Draft: Selectors Level 4.

Styling `select` elements for real

Source: Microsoft Edge Blog Microsoft Edge Team • 05 May 2022

Styling <select> elements consistently across browsers has long been a difficult task. While it is now possible to style the button part of a <select>, styling its contents – the box that contains the list of options, and the options themselves – remains very limited. These limitations often push web developers to use libraries that provide custom select-like controls. Unfortunately using a library comes with important implications: including it in your project increases complexity, your customers will need to download the library code on each visit, and the custom select might not support keyboard navigation or the same accessibility semantics that built-in <select>s do. Screenshot of a select element containing a list of French cities. The select element is styled in a way that currently cannot be achieved with the built-in select HTML element and CSS. The options have borders around them, icons next to them, and they are organized in a grid with 4 columns. In this article, we’ll review the current state of styling <select> elements and what limitations still exist, and we’ll introduce a new and experimental element which should, over time, overcome these limitations once and for all. But before we dive in, let’s review the three main parts of a <select> element: A chart explaining what the different parts of a select element are. It shows the button part at the top, which contains the selected value text, and an icon to open the list of options. Below this, the listbox part is shown, containing a list of options, each with a value. I’ve left out the optgroup part from this list and diagram for simplicity reasons. Let’s not worry about it in this article. Also, the part names I’m using here are not meant to match the actual accessibility semantics of the <select>. They’re just easy to understand. With this out of the way, let’s review how the various parts can be styled today.

Styling the button part

Doing this is pretty easy nowadays. We can apply CSS properties to the <select> element and change its background color, borders, font, size, margin, padding, and more. With this, we can pretty quickly go from the default style of the <select> element (on the left in the image below) to something more visually pleasing and which might integrate better with the rest of our website (on the right in the image below): Two select elements, we only see the button part, not the drop-down with the options. The first one on the left has the default browser styling. The second one on the right has been custom-styled with CSS. It has a bigger font, more padding, a different background, and borders. Even better, styling the button part works very well across browsers. Back in 2018, the Filament Group design studio published Styling a Select Like It’s 2019, a blog post and CSS code snippet that showed how to style a <select> across all the main browsers that existed at this time. Now, with Internet Explorer’s retirement around the corner, it’s even easier to get <select>s to look the same across browsers.

Styling the listbox part

Sadly, there’s no way for web developers today to style the listbox. There simply is no way to target this part of the <select> with CSS. As a result, we can’t change the default shadow, border, corners, background color, or padding of this box to match the rest of our website. It’s important to realize that this part does play an important role in how a <select> looks in a web page. Let’s take a look at an example in Microsoft Edge (on the left) and Firefox (on the right), both on Windows 11: Two select elements, with default browser styles, and 3 options. The first select on the left is rendered by Edge, with a large and blurry drop-shadow and large rounded corners. The second select, on the right, is rendered by Firefox, and has a sharper and smaller drop shadow, and smaller rounded corners. As this example shows, the listbox part comes with a few things you might want to customize to your needs: Depending on the browser, and operating system, the listbox part may be implemented with internal user-agent shadow DOM, or directly by the OS, none of which can be targeted by our CSS unfortunately.

Styling the option part

For this final part, things are a bit better. Several CSS properties can be used to change the appearance of an option, and some properties applied to the <select> element are inherited too. For example, it’s possible to change the color and font of the <option> elements to match your website’s appearance. You can even give each option its own background color for example. A select element showing a list of French cities, where each option in the drop-down having a different background color. Unfortunately, only a small subset of CSS applies to options. Today, in Microsoft Edge (and any other Chromium-based browser), only the following CSS properties are taken into account: This is a good list, and it should be sufficient in most cases. But many interesting effects will not be possible to achieve. As an example, adding horizontal borders between options isn’t possible, and so is adding padding in options to give them more room to breathe. One of the most requested feature is the ability to add images next to options, and this is sadly not possible either since the background-image property doesn’t work. One other example of an interesting effect is using a grid or a flex layout to display the options in a different way. Sadly this is also not possible.

Enter the <selectmenu> element

There’s good news! Some time ago, a cross-company group of people got together ago and formed Open UI. Their goal is to create specifications for much more extensible and stylable UI controls on the Web. And then work with standard bodies and browser vendors to get them implemented. This is a part of the Web that has, historically, been left out of standardization, and up to browser implementations to deal with on their own. So it’s a very exciting project that aims to fill one of the major remaining gaps on the Web platform today. Also, the people at Open UI are great, and you can join them to follow along or even push some of the proposals! Part of the work the group has done so far is already starting to come to fruition. The Microsoft Edge team has started to implement a new HTML element in Chromium, in collaboration with Google, based on the Open UI <select> spec: the <selectmenu> element. This element is a new implementation of a select control, but fully stylable with CSS, and much more extensible too. The element is only available in Chromium-based browsers for now, and to use it, you’ll have to switch the “Experimental Web Platform features” flag in about://flags first. Using <selectmenu>, and a few lines of CSS code, you can create designs like these two examples below: Two examples of a styled selectmenu element. The first one shows a list of browsers. The button part is styled with light grey borders and rounded corners. The listbox part has a light drop-shadow, and the options in the listbox have browser icons next to them. The second example contains a list of French cities as options. The options are organized in 2 vertical columns. Borders are drawn between options. And little square icons are displayed next to each option. Notice the custom borders and shadows, the separators between options, the images, and custom layout. Here is part of the HTML and CSS code that was used for the demo on the right, with the list of cities:
<style>
  selectmenu::part(button) {
    border: 2px solid #aa99a0;
    border-radius: .15rem;
    padding: .6rem;
  }

  selectmenu::part(listbox) {
    background: #aa99a0;
    box-shadow: 0 0 .3rem 0 #0003;
    margin-top: .3rem;
    border: 2px solid #aa99a0;
    border-radius: .15rem;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    grid-auto-flow: column;
    gap: 2px;
  }

  selectmenu option {
    padding: .6rem;
    background: white;
  }
</style>
<selectmenu>
 <option value="Paris">Paris</option>
  <option value="Marseille">Marseille</option>
   ... 
</selectmenu>
The new <selectmenu> element lets you style every aspect of the different parts of the control. As a developer, you get access to it all, and are free to define your own styles, while being certain that the browser will take care of things like positioning the popup, handling keyboard access, and wiring the right accessibility semantics. If you want to learn more about Open UI, the <selectmenu> element, and how you can help with this effort, you can read my longer article about it: Say Hello to selectmenu, a Fully Style-able select Element, on CSS Tricks. Keep in mind, however, that this is very new and experimental. The spec and implementation will most definitely change as the result of ongoing discussions.

But why does this matter?

You might argue that styling the color and font of options is more than enough, and anything more is not really necessary. After all, a select is made for users to quickly choose an option from a list and that’s it. If you, as a web developer, cannot style this part of your user flow and instead are forced to rely on what the browser and OS provide, then at least your users will have a familiar and optimized experience. Take iOS for example, the iPhone and iPad operating system, options on this platform can’t be styled at all, even choosing a different font or color doesn’t work, for good reasons. As the available room may be limited on the device, it’s great that the OS can take over the rendering, positioning, sizing, and styling of the list of options for users to effectively make their choice in a familiar UI. So, if you need your users to choose from a list of options (and if other solutions like a bunch of radio buttons aren’t feasible), using a native <select>, and accepting its default design, is a great option! But, even if you agree with the above, and I hope you do, I believe a new element like <selectmenu> is still necessary. Here’s why: people, still today, build or use custom select elements purely based on aesthetics. Design decisions, not accessibility ones, still lead many web development businesses to roll out their own custom selects. As long as they do, less accessible experiences will continue to exist, complex code will need to be maintained, and heavier bundles will need to be downloaded by users. If you were about to start creating your own custom select, I suggest you read Sarah Higley’s excellent 2 part blog post, “Select your poison”, about it first. So having a fully stylable select element on the web is an important step in the right direction. It will allow web developers to define the extra styles they need and provide a coherent design, while preserving accessibility and simplicity. There’s a progressive enhancement story to this as well. The new <selectmenu> element will likely not be available everywhere for a long time and might not ever be as stylable on mobile than on desktop. That’s ok, your website could detect its availability (perhaps using User-Agent Client Hints or checking HTMLSelectMenuElement in JavaScript at runtime), and only use it when possible, letting the browser and OS decide whether to apply your CSS styles. If all you use the <selectmenu> element for is styling its various parts like in the example before, then it works just like the <select> element, and it’s possible to switch one with the other. Note, however, that at the time of this writing the <selectmenu> element also allows web developers to replace the entire user agent shadow DOM and instead insert their own custom markup. This means it is possible to not only replace the button, listbox, and options parts, but also add extra elements around or within them. This is a super power that can make it possible to create a lot of functionality that the existing <select> can’t achieve today, but that people have wanted for a while, like a combobox. Doing this, however, means that the browser might no longer be able to guaranty the accessibility of the control like it can today with a normal <select>, and it also means that you wouldn’t be able to switch between a <select> and <selectmenu> element as easily.

Closing notes

As we’ve seen, styling selects on the web isn’t as bad as it used to be in the past. Using the HTML <select> element gets you very far already, is accessible, way cheaper than using a custom library, and familiar to your users. And now, with the work that Open UI and Microsoft are doing, there’s an even brighter future ahead of us. One where we can style the contents of our selects just like we’ve always wanted, without the added complexity. Are there other things you wish the Web could do? Let browser vendors know, submit your ideas on The Web We Want! – Patrick Brosset, Senior Product Manager, Microsoft Edge

Updated Candidate Recommendation Draft: CSS Will Change Leve…

Source: W3C's Cascading Style Sheets home page05 May 2022

5 May 2022 Updated Candidate Recommendation Draft: CSS Will Change Level 1. Updated Candidate Recommendation Draft: CSS Text Level 3. Updated Candidate Recommendation Draft: CSS Text Decoration Level 3. Updated Working Draft: CSS Text Level 4.

CSS Text Decoration L4 Update

Source: CSS WG Blog fantasai • 04 May 2022

The CSS Working Group has published an updated Working Draft of CSS Text Decoration Level 4. This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.

Updates in this draft include:

Further planned work on this module includes:

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-text-decor-4]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Updated Working Draft: CSS Text Decoration Level 4.

Source: W3C's Cascading Style Sheets home page04 May 2022

4 May 2022 Updated Working Draft: CSS Text Decoration Level 4.

Release Notes for Safari Technology Preview 144

Source: Surfin' Safari 02 May 2022

Safari Technology Preview Release 144 is now available for download for macOS Big Sur and of macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.

This release covers WebKit revisions 291506-291957. This release of Safari Technology Preview does not support versions of macOS Monterey prior to 12.3. Please update to macOS Monterey 12.3 or later to continue using Safari Technology Preview.

Note: Tab Groups do not sync in this release.

Web Inspector

CSS

Web Animations

JavaScript

WebAuthn

Web API

Accessibility

Media

Security Policy

Web Extensions

An explosion in new CSS

Source: Web Directions BlogJohn • 01 May 2022

As I sit here with the countdown to day 1 of our second Hover conference showing just under two hours to go, and having spent countless hours focussed on the conference program and the state of CSS over the last several months, it has brought into focus just how much is happening with CSS, and how sophisticated and powerful it is becoming.

So let’s round up some great recent articles on what’s happening with CSS to bring us up to speed.

Oh, and the presentations from Hover will be available in a few weeks on Conffab, along with dozens of other CSS focussed sessions from previous conferences of ours. It’s an engaging, great value ($19.95 a month or $195 a year) way to keep up to date not just with CSS, but all of front end development.

If you want a detailed overview of what’s new in CSS in 2022, Jen Simmons has a great presentation at Hover, and one of our other speakers, Bramus van Damme has a very detailed article he recently published on the state of CSS in 2022.

The Architecture of CSS

For such a widely used, significant technology as CSS, its fundamental architecture is often surprisingly poorly understood by developers. To begin, Cascade and Inheritance, two foundational aspects of how CSS styles content on a page, are often confused for one another, or thought of as essentially the same thing.

Relatively poorly understood too are specificity, and more generally the rules of how CSS from a myriad of potential origins–the browser’s style sheets (yes, browsers have style sheets, called “user agent style sheets” that provide the basic style of a page) developer’s style sheets (called “author style sheets”), inline styles set on an element (think <p style='color: red'>)–actually untangle to style a page.

Meanwhile developers are often lack knowledge of the array of sophisticated selectors beyond class and id (such as attribute selectors that can allow you to style for example links that point to a particular domain), let alone the new selectors like :is, :has and :where that are revolutionising how we do CSS.

Too often developers are more or less stuck in the 1990s when it comes to CSS (perhaps having added some of CSS3 properties to their repertoire).

But my prediction is this is about to change.

New Selectors

Let’s start with these new selectors (many not that new at all). Stephanie Eckles (who is speaking at Hover on Container Queries–more on them in a moment) rounded up all the changes to CSS selectors in the level 4 selectors specification about a year ago for Smashing Magazine. Meanwhile Adam Argyle (who spoke at Hover last year) zoomed in on two highly impactful new selectors, :is() and :where() (which also receive a lot of attention at Hover this year, including an entire presentation by Kilian Valkhof all about them).

These selectors will change how we write CSS, making it more resilient, more readable but also more more compact.

We (and I include myself in this) developers really do like to stick with what’s familiar and comfortable a lot of the time–we’re like the person with a hammer, for whom everything is a nail. And so our CSS and HTML is too often full of container divs that exist solely for added styling, and classes and divs for the same reason.

But by coming to grips with the broad range of selectors, and in particular these new selectors, we can move beyond the hammer, to a whole set of precision tools.

Parent selectors

And if you want to focus in on just the single most requested feature of CSS since the 1990s (not making it up, have the receipts) here’s an article all about the :has selector (also referred to as the parent selector, but it’s much more than just selecting the parent of an element) from Ahmad Shadeed.

So learn these new selectors and transform the way you write and architect CSS. But there’s more coming in this department.

Cascade Layers

When I hear the term ‘layers’ in association with CSS I think of absolutely positioned layouts (WYSIWYG CSS editors like DreamWeaver called absolutely positioned elements in layouts “layers”)–though I have no idea if anyone under about 50 would make that association.

But Cascade Layers are actually a new approach to CSS that gives developers control over the cascade without resorting to adding !important all over our CSS, or fiddling with selectors to increase their specificity-admit it, we’ve all done it countless times.

There are several recent articles (again from recent Hover speakers) to help understand what is one of the most significant changes to CSS in its history .

Ahmad Shadeed (again! The man is a machine of CSS education) has a fantastic detailed article, Hello CSS Cascade Layers, that goes into how cascade layers work, and how they will help write CSS with more confidence, along with use-cases and examples.

Meanwhile Miriam Suzanne has a A Complete Guide to CSS Cascade Layers,

your complete guide to 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.

And not to be outdone, Bramus Van Damme, who spoke on day 1 at Hover on Cascade Layers (you’ll be able to access that presentation soon at Conffab) published The Future of CSS: Cascade Layers, a very detailed exploration of the technology.

Container Queries

The two most requested additions to CSS (according to the State of CSS Survey among other places) are the parent selector (which if you read above you’ll now know has arrived with the :has selector) and container (also referred as ‘element’) queries.

Yep, we can now style an element based on properties not just of the containing page with media queries, but properties like the width of ancestor elements using, you guessed it, container queries. Yet again, Ahmad Shadeed (remember, machine) has an introduction and detailed overview, with examples and more.

Last year at Hover Miriam Suzanne, who is one of the folks who worked to standardise the feature gave an introduction to container queries (you can watch that now with a Conffab Plus membership), while this year, Stephanie Eckles takes a practical look at use cases for container queries.

Keep up with CSS, JavaScript and the whole of front end with our online events

I haven’t chosen the articles above because they are by speakers at Hover–it’s really the opposite-we seek out these folks to speak at our events because they have an unrivalled level of knowledge, and the ability to communicate in an engaging, enlightening way. And its not just CSS–we cover all of front end technology and practice at our series of online events across the year.

So, If you want to get up to speed with all this (and much more) then Conffab, at just $19.95 a month (or $195 a year) will give you access to all the Hover videos plus those from all our other conferences, past and future. And if you want to attend our conferences live as they happen, a premium membership ($59.95 of $595 a year) gives you that. 6 in depth conferences on all things front end across the year.

The post An explosion in new CSS appeared first on Web Directions.

Updated Working Draft: CSS Color Level 4. Updated Working Dr…

Source: W3C's Cascading Style Sheets home page28 April 2022

28 Apr 2022 Updated Working Draft: CSS Color Level 4. Updated Working Draft: CSS Color Level 5.

Minutes Telecon 2022-04-27

Source: CSS WG BlogDael Jackson • 27 April 2022

Full Meeting Minutes

Non-interactive Elements with the inert attribute

Source: Surfin' Safari 27 April 2022

Elements are interactive in multiple ways; they can be focused, clicked, edited or selected. Assistive technologies such as screen readers also interact with them. What if you wanted to disable all these interactions for a section of your webpage? The inert attribute covers this.

Pre-existing Solutions

The most basic way to disable all interactions is the disabled HTML attribute, it prevents focus, clicks, edition or selection. However, it only works on form controls, and does not necessarily hide the control from assistive technologies. What if you wanted to do this on elements other than form controls?

To prevent focus, tabindex="-1" is a popular option, but it isn’t ideal because setting the attribute on a container element will not prevent its children from being focused, and it also does not prevent click-focus with a mouse. If you want to prevent keyboard focus on a whole section, every single focusable element in the section needs the attribute set.

To prevent clicks, the pointer-events: none CSS property may be an option although, unless you’ve put tabindex="-1" on the element as well, tabbing to the element and interacting with it is still possible.

To prevent selection, the user-select: none CSS property is the most common option.

To prevent editing, if you’re using contenteditable, you would need to manually remove the contenteditable attribute. If it’s a form control, you need to manually set the disabled attribute.

All of this is heavy and also does not allow you to hide the section from assistive tools, which may be appropriate when making a whole section non-interactive. It is currently possible to do this by setting aria-hidden="true" on the relevant section.

This is why the inert attribute was added to HTML, it is an efficient way to disable all of the interactions above and hide elements from assistive technology.

What is the inert attribute?

The inert attribute was originally specified in the context of the dialog element about 10 years ago, where the main use-case was making the content behind a modal dialog non-interactive. It was later removed due to a lack of adoption. Recent developer requests lead it to be re-proposed a few years later. However, the main issue with that definition was complexity in interaction with modal dialogs and performance. This is why changes have been made to the standard to use a CSS-based approach to define inert nodes.

According to the HTML specification, when a node is inert:

In addition to the above:

Example Usage: A Carousel

Let’s build a carousel with multiple pages:

You will notice that you can still interact with links/inputs/etc. from inactive pages. This is undesirable behavior that can be prevented with the inert attribute. In the switchToIndex method which changes the active page, we can add 2 lines of code that fix this.

this.items being an array of HTML elements representing each slide, the first line makes every slide inert, and the second line makes the active one non-inert.

  switchToIndex(index) {
    [...]
    this.items.forEach(item => item.inert = true);
    this.items[index].inert = false;
  }

Notice that we have used the inert DOM property. When set to a value, it is equivalent to element.toggleAttribute("inert", value) .

For support for in older browsers, you may want to use a polyfill until the inert attribute is widely supported.

Finally it is recommended to add a visual cue that a certain element is inert. Let’s make inactive slides less opaque:

.carousel-item[inert] {
  opacity: 0.6;
}

Here is the final result in action:

As you can see above, inactive slides are no longer interactive but they are still visible.

Browser support

Additional resources

In this post, we gave an overview of the new inert attribute. Here are some interesting additional resources you might want to check:

Feel free to reach out to @therealntim on Twitter for any questions. To report any issues, please file a bug blocking bug 165279.

Feeds

The Future of Style features:

If you have a post you want to add to this feed, post a link (or the whole thing) on the CSS3 Soapbox. If you own a blog with frequent posts about the future of CSS, and want to be added to this aggregator, please get in touch with fantasai.

fantasai

Made with CSS! Valid CSS!Valid HTML 4.0! RSS feed Atom feed