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 2023-12-06

Source: CSS WG Blog • Dael Jackson • 08 December 2023

Full Meeting Minutes

Release Notes for Safari Technology Preview 184

Source: Surfin' Safari • 07 December 2023

Safari Technology Preview Release 184 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 270234@main…271110@main.

Accessibility

Resolved Issues

CSS

New Features

Resolved Issues

HTML

Resolved Issues

JavaScript

New Features

Resolved Issues

Media

New Features

Resolved Issues

Web Animations

Resolved Issues

Web API

New Features

Web Assembly

New Features

Web Inspector

New Features

Resolved Issues

WebGL

New Features

Updated Note: CSS Snapshot 2023.

Source: W3C's Cascading Style Sheets home page • 07 December 2023

7 Dec 2023 Updated Note: CSS Snapshot 2023.

Release Notes for Safari Technology Preview 183

Source: Surfin' Safari • 04 December 2023

Safari Technology Preview Release 183 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 269634@main…270233@main.

Accessibility

Resolved Issues

AutoFill

Resolved Issues

CSS

New Features

Resolved Issues

Fonts

Resolved Issues

Forms

Resolved Issues

HTML

New Features

Resolved Issues

JavaScript

New Features

Resolved Issues

Media

Resolved Issues

Rendering

Resolved Issues

Scrolling

Resolved Issues

SVG

Resolved Issues

URLs

Resolved Issues

Web API

Resolved Issues

Web Inspector

Resolved Issues

WebGL

Resolved Issues

Minutes Telecon 2023-11-29

Source: CSS WG Blog • Dael Jackson • 30 November 2023

Full Meeting Minutes

Minutes Telecon 2023-11-22

Source: CSS WG Blog • Dael Jackson • 22 November 2023

Full Meeting Minutes

Minutes Telecon 2023-11-15

Source: CSS WG Blog • Dael Jackson • 16 November 2023

Full Meeting Minutes

Minutes Telecon 2023-11-08

Source: CSS WG Blog • Dael Jackson • 09 November 2023

Full Meeting Minutes

Minutes Telecon 2023-11-01

Source: CSS WG Blog • Dael Jackson • 02 November 2023

Full Meeting Minutes

Release Notes for Safari Technology Preview 182

Source: Surfin' Safari • 01 November 2023

Safari Technology Preview Release 182 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 269058@main…269633@main

CSS

New Features

Resolved Issues

Forms

New Features

HTML

New Features

Resolved Issues

JavaScript

New Features

Resolved Issues

Loading

Resolved Issues

Media

New Features

Resolved Issues

Rendering

Resolved Issues

Scrolling

Resolved Issues

Storage

New Features

SVG

Resolved Issues

Text

Resolved Issues

Web API

Resolved Issues

Web Assembly

New Features

Resolved Issues

Web Inspector

New Features

WebRTC

Resolved Issues

Release Notes for Safari Technology Preview 181

Source: Surfin' Safari • 01 November 2023

Safari Technology Preview Release 181 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 268060@main…269057@main.

Accessibility

Resolved Issues

CSS

New Features

Resolved Issues

DOM

Resolved Issues

Forms

Resolved Issues

HTML

New Features

Resolved Issues

JavaScript

New Features

Resolved Issues

Loading

Resolved Issues

Media

New Features

Rendering

Resolved Issues

Deprecations

SVG

Resolved Issues

Web API

New Features

Resolved Issues

Web Inspector

Resolved Issues

WebDriver

Resolved Issues

WebGL

Resolved Issues

WebRTC

Resolved Issues

Updated Working Draft: CSS Values and Units Level 4.

Source: W3C's Cascading Style Sheets home page • 27 October 2023

27 Oct 2023 Updated Working Draft: CSS Values and Units Level 4.

WebKit Features in Safari 17.1

Source: Surfin' Safari • 26 October 2023

Today we are pleased to share what new in WebKit for Safari 17.1. It’s now available for iOS 17, iPadOS 17, macOS Sonoma, macOS Ventura and macOS Monterey.

Managed Media Source

Safari 17.1 now brings the new Managed Media Source API to iPhone. Originally shipped in Safari 17.0 for iPad and Mac, Managed Media Source is a power-efficient, low-level toolkit for streaming video.

Watching streaming video is an amazing thing we all do with our devices. But to get the highest-quality video without downloading any unnecessary data and without killing the battery, it takes a complicated stack of technology working under the hood every time you hit the play button. Adaptive bitrate streaming is a technique for switching between media data formats on the fly, depending on the speed of the internet connection and capabilities of the device, even as the conditions change.

For years, many websites have used Media Source Extensions (MSE) to handle adaptive bitrate streaming. It’s a low-level toolkit that gives the web page more control and more responsibility for managing buffering and resolution. But MSE isn’t particularly good at managing buffer levels, network access, and media variant selection. Plus, it uses a lot of power, which can be especially painful on mobile devices with smaller batteries.

Managed Media Source adds the capabilities of MSE, without any of the drawbacks. We were excited to propose ManagedMediaSource to the W3C’s Media Working Group for formal standardization.

Note that support for Managed Media Source is only available when an AirPlay source alternative is present, or remote playback is explicitly disabled.

const videoSource1 = document.createElement('source');
videoSource1. type = 'video/mp4' ;
videoSource1.src = URL.createObjectURL(mediasource);
video.appendChild(videoSource1) ;
const videoSource2 = document.createElement('source');
videoSource2. type = 'application/x-mpegURL' ;
videoSource2.src = "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8";
video.appendChild(videoSource2);

Learn all about Managed Media Source API by watching Explore media formats for the web at WWDC23.

Photo of hands on a laptop with code using Managed Media Source on the screen. A still from the WWDC session.

Safari Extensions updates

Safari 17.1 also adds support for storage.session.setAccessLevel and updated storage.session to be accessed only byTRUSTED_CONTEXTS by default.

Bug Fixes

WebKit for Safari 17.1 provides multiple bug fixes and feature polish.

Accessibility

Authentication

CSS

JavaScript

Loading

Media

Performance

Rendering

Web API

Web Apps

Web Inspector

WebGL

Updating

If you are running macOS Ventura or macOS Monterey, you can update Safari by going to Software Update, and clicking “More info”. On macOS Ventura, that’s  > System Settings > General > Software Update > More info. To get Safari 17.1 on your iPhone or iPad, go to Settings > General > Software Update, and tap to update.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features.

Feedback

We love hearing from you. To share your thoughts on Safari 17.1, find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. Or send a reply on X to @webkit. If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

You can also find this information in the Safari 17.1 release notes.

CSS Text Level 4 Draft Updated

Source: CSS WG Blog • Florian Rivoal • 20 October 2023

The CSS Working Group has published an updated Working Draft of the CSS Text Module Level 4.

This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation.

The most notable changes since last publication are:

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 ([css-text-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 Level 4.

Source: W3C's Cascading Style Sheets home page • 20 October 2023

20 Oct 2023 Updated Working Draft: CSS Text Level 4.

Minutes Telecon 2023-10-18

Source: CSS WG Blog • Dael Jackson • 18 October 2023

Full Meeting Minutes

Minutes Telecon 2023-10-11

Source: CSS WG Blog • Dael Jackson • 11 October 2023

Full Meeting Minutes

Simplified Responsive Design Mode

Source: Surfin' Safari • 06 October 2023

Responsive design is a well-established practice of creating designs that adapt to different screen sizes. Gone are the days when you could create a new website designed for one screen size. Today’s devices are a menagerie of resolutions, from screens that fit on your wrist to the one you hold in your hand or rest on your lap, and even virtual screens that wrap around your entire field of vision.

There are so many screen sizes today that it’s made designing to a specific set of resolutions almost meaningless. Instead, we’re using powerful modern layout tools like Container Queries, Grid, and Flexbox to create fluid layouts so that designs can adapt to any screen size.

Creating resilient, adaptive designs requires tools that help you quickly explore your layouts in every resolution. Responsive Design Mode in Safari does just that. It gives you a fast preview of how your web page layout adapts to different viewport dimensions and aspect ratios in real time.

As part of the suite of developer tools, Responsive Design Mode is available when you enable Show features for web developers in Safari’s Advanced settings. Once enabled, you can jump into Responsive Design Mode for the currently focused tab or window by choosing Enter Response Design Mode from the Develop menu or pressing Command-Control-R (⌃⌘R).

New Design

With its streamlined design in Safari 17, Responsive Design Mode makes it faster and easier to test your designs.

Screenshot of webkit.org in the simplified Responsive Design Mode

Resizing

Notably, the row of device and window icons is gone, helping you focus on creating adaptive designs that fluidly respond to any screen size as the web moves away from rigid, resolution-specific designs.

Close up cropped image of Responsive Design Mode showing with display size controls showing 485 × 985 (82%), 3x, Open with Simulator button

Resizing is as easy as clicking the “handles” at any side of the viewport preview and dragging them to any size. You can watch the dimensions of the viewport change in the size display shown in screen point units at the upper-left.

You can even test viewport sizes beyond the size of the display you’re actively using. Keep dragging the handles, and the preview fluidly scales, showing the zoom level as a percentage of the actual size of the viewport. At 100%, each pixel of web content is visible in the preview. When the viewport grows to a size larger than the window size of Safari, the zoom level decreases, indicating the preview is scaled down to fit the available space in the window.

Pixel Density

Another dimension of screen size designers need to consider today is the pixel density of screens. Pixels have gotten much smaller on modern devices, affecting the pixel-based assets in your designs, like interface icons, photos, or videos. A menu next to the effective viewport dimension allows you to change the pixel ratio used in the preview. The 1x, 2x, and 3x settings help you test all the assets you went the extra mile to prepare to give your users the best experience regardless of their device capabilities.

Instead of generating each asset by hand, many folks opt to configure their build tools to automatically resize assets for the srcset attribute on image elements or the image-set() function in CSS to set the pixel ratio for a background-image.

<img src="image_1x.jpg" srcset="image_2x.jpg 2x, image_3x.jpg 3x">

<style>
body {
    background-image: image-set("background_1x.jpg" 1x, "background_2x.jpg" 2x);
}
</style>

Here, the pixel ratio control helps you ensure your tooling is configured correctly to generate all the needed assets.

In CSS you can use media queries to apply styles based on the pixel ratio of the display. For instance, you can set thinner lines on a 2x display:

@media (min-resolution: 2dppx) {
  .dividerLine {
    border: 0.5px solid grey;
  }
}

The pixel ratio control also allows you to test those styles.

Simulators

Responsive Design Mode shows you a good approximation of how your web page layout will be affected by viewport sizes. But iOS, iPadOS, watchOS, and visionOS have different rendering behaviors optimized to their form factors that are necessarily different than macOS.

Fast, real-time feedback is what makes Responsive Design Mode so helpful, but it comes with a tradeoff in accuracy. It’s a familiar problem in technology. For example, Xcode offers SwiftUI developers a preview mode that allows them to see the interfaces their code generates and even lets them interact with the interface in a limited capacity. But the complete experience requires building the project to see the result run in a simulator or on an actual device.

So now, it’s easy to jump into device simulators to try your site designs with the same full-fidelity experience as an actual device.

Screenshot of webkit.org in Responsive Design Mode alongside an iPhone 14 Pro Max simulator with webkit.org loaded in Safari

Responsive Design Mode offers a new Open with Simulator menu for quickly jumping into an Xcode device simulator for the current web page. It shows a list of suggested simulators, but many more are available than what’s listed. You’ll need to download and install Xcode from the App Store for free to run simulators. Selecting the Add simulators… option from the Open with Simulator menu will open a new tab in Safari with instructions on adding more simulators.

To get a more accurate idea of how your web pages will behave in those environments, you can use simulators without needing access to the devices themselves.

Web Inspector

Responsive Design Mode becomes an even more powerful tool when combined with Web Inspector. It allows you to find the source of layout issues while resizing the page or adjusting the pixel ratio. With developer features enabled, select Show Web Inspector from the Develop menu or press Command-Option-I (⌥⌘I).

Screenshot of webkit.org in Responsive Design Mode with Web Inspector docked to the right side of the window

When debugging narrow viewport sizes, you might find it helpful to click the Dock to left or Dock to right button in Web Inspector to put it side-by-side with the preview viewport.

Feedback

The updated Responsive Design Mode distills the tools to the essentials for quickly assessing the layout of your web pages at any screen size. It gives you at a glance access to layout issues and accelerates testing your pages in a variety of device-accurate simulators.

We love to hearing from you. Send a tweet to @webkit to share your thoughts Responsive Design Mode. Find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. If you run into any issues, we welcome your feedback on Safari UI like Responsive Design Mode, or your WebKit bug report about web technologies or Web Inspector. Reporting issues makes an enormouse difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features.

Note: Learn more about Web Inspector from the Web Inspector Reference documentation.

Get ready for Interop 2024

Source: Surfin' Safari • 06 October 2023

The primary strength of the web is that it works everywhere. It doesn’t matter which type of device, which operating system, or which browser a user has… the web is the web. And it just works — or at least it should.

To make this vision a reality, web developers strive to make sure the sites they are building work in every browser, on every device. There are an unknowable number of permutations of screen sizes, device capabilities, accessibility accommodations, software versions, browser support for features, and more. Everyone using the web has wildly-different configurations. And that’s ok. That’s the beauty of the web. It’s designed to handle such variety. By using feature detection and progressive enhancement techniques, you support everyone. You structure your code so that it gracefully falls back when a browser/device doesn’t support something, or when the user personally can’t or doesn’t want to use that support.

The other responsible party? The browsers. It’s often ok when browsers haven’t had a chance yet to implement all of the brand-new technologies — but to make a web that works everywhere, when a browser does implement something new, they need to do so in a fashion that’s the same as other implementations.

How in the world is it possible for all the browser engines to have identical interoperable implementations?

Web standards.

A web standard is an official technical document detailing everything a browser engineer needs to know to be able to implement a particular web technology. Web standards are written in industry organizations where dozens of companies come together to discuss, debate, and improve ideas, until they agree through a formal consensus-driven process. Such organizations include the W3C, WHATWG, TC39, IETF, and the Khronos Group.

The success of interoperability is dependent on browser-makers maintaining a commitment to implement according to mature, official web standards. It can be hard to progressively-enhance around rogue, buggy or incorrect implementations.

The Interop project from Web Platform Tests is an effort by Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla to collectively focus on improving the interoperability of specific technologies which are of the highest priority to web developers. Interop 2023 evaluated 26 focus areas. Automated tests were chosen to assess the correctness of implementations.

The Interop 2023 dashboard displays the current results for each browser — both the “experimental” browsers (Safari Technology Preview, Firefox Nightly, and Chrome Dev), and the “stable” browsers (the versions in the hands of everyday users).

Chrome Dev 97. Firefox Nightly 91. Safari Technology Preview 94.The current scores for “experimental” browsers, as of Oct 3, 2023. See the Interop 2023 dashboard for details on how this score is calculated.

At the beginning of 2023, just 48% of these tests passed in all three engines (stable versions). Nine months later, 75% of the tests pass in all stable browsers, and 87% of the tests pass in all experimental browsers (hinting at the near future). It’s an amazing improvement.

Screenshot of the stable score graph, January to September 2023. Green line for the overall interop score rises from 48 to 87.The graph of progress for “stable” browsers, the browsers people use, as of Oct 3, 2023.

So which technologies will be chosen for Interop 2024? Well, this is where you come in.

From now through October 5 [update: extended to October 7], anyone can submit a proposal asking that a particular technology that’s already been defined in a web standard be included in next year’s Interop project.

Which new web technologies are most desired by developers? How can browsers support those needs by implementing them sooner rather than later? What incomplete implementations are getting in the way, keeping developers from making websites that work everywhere? Which bugs are causing the most problems? What tests can we use to find those bugs and squash them?

To submit, first read the requirements and guidance for Focus Area proposals so you will have the highest likelihood of success. Once you’ve gathered all the needed information, file an issue on GitHub. The proposal submission period ends Saturday, October 7, 2023.

Do be sure to take the time to fill out all the fields. Tracking down the current state of implementations, assessing the test coverage, and finding evidence of developer demand makes for a much stronger proposal. Make your case!

So far, over 80 proposals have been filed. CSS Nesting, the popover attribute in HTML, and the JPEG XL image format are just some of what’s been proposed. Feel free to read through the list of proposals and add your comments. If you agree something should be included, leave a comment to strengthen its case by adding more evidence of why it’s a high priority. Proposals can be refined through Thursday, October 12, 2023.

There will certainly be too many good proposals, and the group planning Interop 2024 will have to make some tough calls — favoring the items that are of highest priority to developers, and are possible to both test and accomplish. By participating, you can help us know what’s most important to you.

Do you have an idea for new technology that would be great to add to the web, but that has not already gone through the web standards process? Such ideas cannot be included in Interop 2024. The Interop project is not the right venue to create new web standards. Those ideas should be proposed to the CSS Working Group, the WHAT Working Group for HTML, TC39 for JavaScript, or any of the many other working groups inventing the web.

Also, in order for automated tests to be used to evaluate success in implementing current web standards, there has to be a mechanism to test the technologies being proposed. The currently-available testing infrastructure only tests desktop versions of browsers, on one-or-two year old versions of operating systems. That sometimes means a particular technology cannot be properly tested. There is work ongoing to improve the testing infrastructure, so hopefully in the future more can be included.

Tests are incredibly important, too. It’s rare that the tests are perfect. Often they don’t cover important areas of the web standard, or the tests themselves were written without a correct understanding of what the web standard intends. Help writing or updating tests is welcome.

Once all the proposals are in, the group organizing Interop 2024 will make its decisions about what to include. And we’ll be announcing what’s in the project next year. Stay tuned!

Minutes Telecon 2023-10-04

Source: CSS WG Blog • Dael Jackson • 05 October 2023

Full Meeting Minutes

Release Notes for Safari Technology Preview 180

Source: Surfin' Safari • 04 October 2023

Safari Technology Preview Release 180 is now available for download for macOS Sonoma and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 267603@main…268059@main.

Accessibility

Resolved Issues

CSS

New Features

Resolved Issues

Deprecations

JavaScript

New Features

Loading

Resolved Issues

Media

Resolved Issues

Web Animations

Resolved Issues

Web API

Resolved Issues

Release Notes for Safari Technology Preview 179

Source: Surfin' Safari • 04 October 2023

Safari Technology Preview Release 179 is now available for download for macOS Sonoma beta and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 266624@main…267815@main.

CSS

New Features

Resolved Issues

HTML

New Features

Resolved Issues

HTTP

Resolved Issues

Media

New Features

Resolved Issues

SVG

New Features

Web Animations

Resolved Issues

Web API

New Features

Resolved Issues

Deprecations

Web Inspector

New Features

Resolved Issues

WebGL

New Features

CSS Nesting and the Cascade

Source: Surfin' Safari • 04 October 2023

You might have noticed that Safari Technology Preview 179 includes an update to CSS Nesting that adds support for the new “relaxed parsing behavior”.

What does this mean? It means you no longer have to worry about whether or not each nested selector starts with a symbol. It means that now nested CSS like this will work just fine:

article {
  h1 { 
    font-size: 1.8rem;
  }
  p {
    font-size: 1.2rem;  
  }
}

(If you didn’t realize there was a previous limitation and are curious about what it was, you can read about it in Try out CSS Nesting today, from Feb 2023. But also, you can ignore this limitation since it’s going away soon.)

This is fantastic news. After many months of debates over how CSS Nesting could work, we ended up with the best possible solution. In the end, browser engineers figured out how to make the parsing engine handle nested type selectors (element selectors).

How is browser support? In late August 2023, Firefox 117 shipped support for Nesting using the relaxed parsing behavior from the beginning. Safari 16.5 shipped the original version of Nesting in May 2023, and Safari Technology Preview 179 brought the update to the relaxed parsing behavior in September 2023. Chrome is tracking their coming update in this issue.

By the way, any code written with an & will continue to work. In fact, & is an important tool for CSS like this:

ul {
  padding-left: 1em;
  article & {
    padding-left: 0;
  }
}

Which is the equivalent of:

ul {
  padding-left: 1em;
}
article ul {
  padding-left: 0;
}

The & gives you a way to say “this is where I want the nested selector to go”. It still does the same job, it’s simply no longer required before an element selector.

Another question

There is one more thing about CSS Nesting that’s still up for debate. We still have time to make the change if we do so very soon.

Let us ask you a question. If you wrote this nested CSS, which color would you want the article text to be?

article {
  color: blue;
  @supports (text-shadow: 0 0) {
    color: red;
  }
  color: yellow;
}

Do you want it to result in this unnested equivalent, Option 1, where color: red wins?

article {
  color: blue;
  color: yellow; 
}
@supports (text-shadow: 0 0) {
  article {
      color: red;
  }
}

Or do you want it be computed to be this equivalent, Option 2, where color: yellow wins?

article {
  color: blue;
}
@supports (text-shadow: 0 0) {
  article {
      color: red;
  }
}
article {
  color: yellow; 
}

Currently, the Nesting specification says Option 1 is correct, and so that’s how it’s implemented in browsers. This is how all of the preprocessors work: Less (demo), Sass (demo), Stylus (demo), PostCSS (demo), and more. Perhaps matching over fifteen years of third-party tooling is the best way to go.

But many people find this to be an unexpected gotcha, since it seemingly reorders styles. It makes something that’s earlier in the cascade override something that’s later in the cascade. These folks expect Option 2 to be how it works, where the fundamentals of the cascade stay fully intact — when two declarations have the same specificity, the later one always wins.

We ran a survey to find out what you want. The results were remarkable consistent across the first 48 hours.

Option 1: 38%
Option 2: 62%

Your input helps the CSS Working Group make a final decision on how code like this should work. It’s still not fully clear if Option 2 is possible, but before embarking on a deeper effort to find out, it helps to know what web developers want.

Thanks for participating!

Minutes Telecon 2023-09-27

Source: CSS WG Blog • Dael Jackson • 27 September 2023

Full Meeting Minutes

Updated Working Draft: CSS Paged Media Level 3.

Source: W3C's Cascading Style Sheets home page • 14 September 2023

14 Sep 2023 Updated Working Draft: CSS Paged Media Level 3.

Minutes Telecon 2023-09-06

Source: CSS WG Blog • Dael Jackson • 07 September 2023

Full Meeting Minutes

Release Notes for Safari Technology Preview 178

Source: Surfin' Safari • 06 September 2023

Safari Technology Preview Release 178 is now available for download for macOS Sonoma beta and macOS Ventura. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update.

This release includes WebKit changes between: 266624@main…267312@main.

Web Inspector

CSS

CSS Container Queries

JavaScript

SVG

Accessibility

Media

IntersectionObserver

Web API

WebGL

First Working Draft of CSS Transitions Level 2

Source: CSS WG Blog • David Baron • 05 September 2023

The CSS Working Group has published an First Public Working Draft of CSS Transitions Level 2. CSS Transitions allow property changes in CSS values to occur smoothly (or discretely) over a specified duration.

Level 2 (currently written as a delta specification, since Level 1 is not complete) introduces two new features:

It also improves integration with Web Animations and defines a new
interface and other rules for that integration.

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 ([css-transitions-2]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

New Candidate Recommendation: CSS View Transitions Level 1. …

Source: W3C's Cascading Style Sheets home page • 05 September 2023

5 Sep 2023 New Candidate Recommendation: CSS View Transitions Level 1. New Working Draft: CSS Transitions Level 2.

Updated Candidate Recommendation Draft: CSS Text Level 3.

Source: W3C's Cascading Style Sheets home page • 03 September 2023

3 Sep 2023 Updated Candidate Recommendation Draft: CSS Text Level 3.

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