Tuesday, December 10, 2024

Mastering Branding: A Creative Guide by Singapores Top Graphic Designer

Discover groundbreaking Creative branding tips from...

The Collective #888

Olá, creative makers! 👋 Happy Monday,...

Interop 2024  |  Blog  |  web.dev

Web DevelopmentInterop 2024  |  Blog  |  web.dev


Following on from the success of Interop 2022
and Interop 2023,
we are excited about the opportunity to collaborate once again with all key browser vendors and other relevant stakeholders.
Our shared objective is to enhance interoperability between web platforms,
thereby simplifying the work of developers and enriching the overall experience for internet users.

Interop, at its core, is a comprehensive series of tests and benchmarks designed to evaluate the compliance of individual browsers based on our joint commitment to web standards.
Ultimately, Interop strives to eliminate inconsistencies between browsers and foster a unified vision within the industry.

For Interop 2024, there was a public proposal process to source the initial list of features.
From that list, all parties have worked together to create the list of focus areas for 2024.
The following list includes the areas where we hope to see 100% of the selected tests passing by the end of the year.

All focus areas for 2024

Interop 2024 includes 12 new focus areas,
plus 5 carried over from 2023 with some fixes still to be made.
The areas are:

  • Accessibility
  • CSS Nesting
  • Custom Properties
  • Declarative Shadow DOM
  • font-size-adjust
  • HTTPS URLs for WebSocket
  • IndexedDB
  • Layout
  • Pointer and Mouse Events
  • Popover
  • Relative Color Syntax
  • requestVideoFrameCallback
  • Scrollbar Styling
  • @starting-style and transition-behavior
  • Text Directionality
  • text-wrap: balance
  • URL

To view details of all the focus areas, visit the Interop 2024 Dashboard,
where details of the features and work needed is shown,
along with the current scores for each browser.
In the rest of this article,
you can find out about some of the areas where Chrome needs to do the most work to reach 100%.

Nesting

The CSS nesting
module defines a syntax for nesting selectors,
providing the ability to nest one style rule inside another,
with the selector of the child rule relative to the selector of the parent rule.

CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.

CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets.
It also potentially helps reduce the size of CSS files,
thereby decreasing the amount of data downloaded by users.

While all browsers support CSS Nesting,
there are some differences in implementations due to changes to the specification.
During Interop 2024, the aim is to ensure all browsers follow the current specification.

Learn more about CSS Nesting,
and discover a key update to the specification that enables
nesting of bare element tag names.

text-wrap: balance

The balance value of the CSS text-wrap
property indicates to the browser that you would like it to balance the lines of text.
It’s typically used in headings or other short text sections to avoid typographic widows.

A headline wrapping onto two lines, with two words onthe second line.
An unbalanced headline
A headline wrapping onto two lines, with each line equal.
A balanced headline

Browsers differ in their support for the various longhand and shorthand versions of this property.
During Interop 2024, we aim to make these interoperable.

Balancing headlines and other short text sections is a feature frequently requested by developers,
learn more about it in CSS text-wrap: balance,
the post an end to typographic widows on the web,
or CSS Text Balancing with text-wrap: balance.

HTTP(s) URLs for WebSocket

The WebSocket constructor originally required ws: and wss: URLs,
preventing the use of relative URLs and resulting workaround code.

The specification has been updated to allow http(s) schemes, and therefore relative URLs.
These are normalized to ws: and wss:.
During Interop 2024, we’ll update our implementation to support http(s) schemes.

Relative Color Syntax

Relative Color Syntax is defined in the
CSS Color 5 specification,
and provides a way to manipulate colors in CSS.
For example, darken, lighten, or desaturate a color.

Relative Color Syntax is roughly interoperable,
but browsers haven’t implemented the currentcolor keyword;
these tests are included in Interop 2024.

Learn about all the things you can do with this feature in
CSS relative color syntax.

The Interop 2024 dashboard

As in previous years,
the current scores for experimental and stable browser releases will be published on the
dashboard, so you can see how the scores are shaping up.

Screenshot of the dashboard with scores - Interop: 65, Investigations: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
The experimental browser version scores as of February 1, 2024.

We’re really excited to see how much improvement can be made across all of the focus areas this year.

More about Interop 2024

Check out our other content

Check out other tags:

Most Popular Articles