Discover some of the interesting features that have landed in stable and beta
web browsers during December 2023.
Stable browser releases
In December 2023 Firefox 121,
Chrome 120, and
Safari 17.2 became stable.
This post looks at what that means for the web platform.
Relaxed parsing for CSS Nesting
Chrome 120 and Safari 17.2 include
relaxed parsing for CSS Nesting.
As this has been supported in Firefox from version 117, this means that all major engines support this syntax change.
Exclusive accordions with the <details> element
Chrome 120 and Safari 17.2 include support for the name attribute for the
<details> element. This means that you can create exclusive accordion components
by grouping a number of <details> elements.
Learn more in exclusive accordion.
The :has() selector
Firefox 121 includes the CSS :has() selector. This release makes :has() interoperable across all major engines.
Find out more in :has(): the family selector.
The CSS Custom Highlight API
Safari 17.2 includes the
CSS Custom Highlight API
which lets you create and style text ranges,
extending the standard highlight pseudo-classes such as ::selection.
The CloseWatcher API
Chrome 120 includes the CloseWatcher API, a new API for listening for and responding to close requests.
These requests are triggered by the ESC key on desktop and the back gesture or button on Android,
and can be tricky to implement well.
In addition to the API, Chrome 120 upgrades <dialog> and the popover attribute to respond to the Android back button.
CSS text-wrap: balance and stable
Firefox 121 includes the balance and stable values for text-wrap.
The balance value is useful for short blocks of content such as headings,
creating more pleasing and easy to read text. The stable value prevents editable content from relowing while being edited.
Learn more about text-wrap: balance.
text-wrap: balance
text-wrap: stable
Lazy-loading of <iframe> elements
Firefox 121 supports the loading attribute on <iframe> elements.
This means that lazy-loading of iframes is now supported in all major engines.
Support for the linear() easing function
Safari 17.2 also includes support for the linear() easing function, that can be used to create
bounce and spring effects.
Beta browser releases
Beta browser versions give you a preview of things that will be in the next
stable version of the browser. It’s a great time to test new features, or
removals, that could impact your site before the world gets that release. New
betas are
Firefox 122,
Chrome 121, and
Safari 17.3.
These releases bring many great features to the platform. Check out the release
notes for all of the details. Here are just a few highlights.
Firefox 122 and Chrome 121 include the showPicker() method for HTMLSelectElement.
This shows the same picker that would be shown when the element is selected,
but can be triggered from a button press or other user interaction.
Chrome 121 includes the scrollbar styling properties scrollbar-color and scrollbar-width,
along with improved CSS masking for SVG,
and highlight pseudo-elements for text that has been misspelled or is grammatically incorrect.