This content originally appeared on web.dev and was authored by Rachel Andrew
Stable browser releases #
In April 2023, Firefox 112, and Chrome 112 became stable. Let's take a look at what this means for the web platform.
The inert
attribute #
Firefox 112 includes the inert
global attribute. This attribute tells the browser to ignore the element, indicating content that should not be interactive. It:
- Prevents
click
events being fired. - Prevents the element from gaining focus.
- Excludes the element and its contents from the accessibility tree.
This attribute is now interoperable in all three engines.
- Chrome 102, Supported 102
- Firefox 112, Supported 112
- Edge 102, Supported 102
- Safari 15.5, Supported 15.5
The linear()
easing function #
The linear()
easing function enables linear interpolation between a number of points. This enables more complex animations such as bounce and elastic effects. This function is in Firefox 112.
- Chrome 113, Supported 113
- Firefox 112, Supported 112
- Edge 113, Supported 113
- Safari, Not supported
CSS nesting #
Chrome 112 adds support for CSS Nesting, a feature that is highly anticipated by many developers. This introduces a new nesting selector >
, used to nest related style rules, in a way that will be familiar to developers who have used pre-processors:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
- Chrome 112, Supported 112
- Firefox, Not supported
- Edge 112, Supported 112
- Safari preview, Preview
CSS animation-composition
#
Chrome 112 also includes support for animation-composition
. Learn how this property works in Specify how multiple animation effects should composite with animation-composition.
- Chrome 112, Supported 112
- Firefox 104, Behind a flag
- Edge 112, Supported 112
- Safari 16, Supported 16
New headless mode #
If you use Chrome's Headless mode, for example with Puppeteer, then 112 brings an all new Headless mode. Learn about it in Chrome's Headless mode gets an upgrade.
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 113 and Chrome 113, with the Safari 16.5 beta still ongoing. 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 113 includes the color()
, lab()
, lch()
, oklab()
, and oklch()
functions. Also included is the color-mix()
function from CSS Color 5, and the forced-color-adjust
property.
Firefox also includes the nth-child of <selector>
syntax, giving finer control of which elements you want to select. Read more in More control over :nth-child() selections with the of S syntax.
For CSS, Chrome 113 includes the overflow-inline
, overflow-block
, and update
media features. Also included in the linear()
easing function, and the unprefixed image-set()
type.
Chrome 113 also includes WebGPU, the successor to the WebGL and WebGL 2 graphics APIs for the Web. It provides modern features such as GPU compute, lower overhead access to GPU hardware, the ability to render to multiple canvases from a single graphics device, and better, more predictable performance.
Photo by Karen Ciocca.
This content originally appeared on web.dev and was authored by Rachel Andrew
Rachel Andrew | Sciencx (2023-04-28T00:00:00+00:00) New to the web platform in April. Retrieved from https://www.scien.cx/2023/04/28/new-to-the-web-platform-in-april-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.