As we head into the second half of the year, it’s a great time to look at how
Interop 2024 has improved web interoperability this year.
Where we started
At the beginning of the year,
Chrome had an experimental browser support score of 83.
Today that score is 90, with a score for stable browsers of 85 as of the
release of Chrome 126 in June. The overall experimental interop score has risen
10 points, and this post shares some of the features that have contributed to
that score.
Popover
Popover became part of Baseline Newly Available in April 2024. Popover is
exciting because so many of the UI features you need to build—for example,
menus, tooltips, overlays for making selections, and teaching UIs—are types of
popover. Before popover, creating any of these features involved a lot of custom
code. Code to make sure multiple elements were not open at once, or to enable
light-dismiss when the user clicked outside of the element. You might also have
struggled with z-index, to make sure a UI element stayed on top of the rest of
the interface.
All of these features and more are included in the
Popover API,
saving development time,
and helping to create more performant and accessible interfaces. For
example, the following code creates a popover with light-dismiss, that will
auto-close other popovers when opened.
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>
Find out more in Popover API lands in Baseline. Many
applications are already seeing the benefits of Popover.
Tokopedia were able to significantly reduce the amount of React code
by taking advantage of the feature, using a polyfill for non-supporting browsers.
Advanced custom properties with @property
The @property CSS rule lets you create advanced custom properties, with much
more detail than the name and value available in standard custom properties.
Set the allowed syntax to define what type of data this property holds—for
example color, a number, or length. Then set whether the property
inherits, and an initial value.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
The @property rule currently improves the experimental score for Firefox,
boosting the stable score when Firefox 128 ships later this month. It also joins
Baseline Newly Available.
Learn more in @property: giving superpowers to CSS variables.
The font-size-adjust property
The CSS font-size-adjust property lets you modify the size of lowercase
letters relative to the size of uppercase letters. This is useful in situations
where font fallback might happen, as it helps to ensure a fallback font is still
legible, in particular at small font sizes.
The font-size-adjust property is currently included in the experimental score
for Chrome, however it will increase the stable score when it’s released with
Chrome 127 this month. It also joins Baseline Newly Available.
text-wrap: balance
Using text-wrap: balance instructs the browser to figure out the best balanced
line wrapping for text. It’s particularly useful for headings, preventing a
heading wrapping to a single word on line two, for example.
This has recently become supported by Safari, with other browsers working to fix
failing tests to ensure this feature works well across all browsers.
In addition to these major features becoming interoperable, many other
improvements have been made. Each test that passes represents an
interoperability problem you won’t run into. We’re excited to see how close we
can get to that 100% score by the end of the year.