Friday, October 7, 2022
HomeWeb developmentNew to the web platform in August

New to the web platform in August


Stable browser releases #

In August, Firefox 104, Chrome 104, and Chrome 105 became stable.

Individual transforms #

Chrome 104 includes individual properties for CSS Transforms. The properties are scale, rotate, and translate, which you can use to individually define those parts of a transformation.

By doing so, Chrome joins Firefox and Safari which already support these properties.

Browser support: chrome 104, Supported 104 firefox 72, Supported 72 edge 104, Supported 104 safari 14.1, Supported 14.1 Source

New media query syntax #

Chrome 104 also includes the media query range syntax. This has already been shipped by Firefox, and helps streamline media queries. For example the following media query:

@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}

Can be written using a comparison operator:

@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}

Browser support: chrome 104, Supported 104 firefox 63, Supported 63 edge, Not supported × safari, Not supported × Source

Container queries #

Chrome 105 is an exciting release bringing the long-awaited feature of container queries to the web platform. While media queries give you a way to query against the size of the viewport, container queries provide a method of querying against the size of a container.

To use container queries, turn on containment using the container-type property.

.card-container {
container-type: inline-size;
}

Setting the container-type to inline-size queries the inline-direction size of the parent. In latin languages like english, this would be the width of the card, since the text flows inline from left to right.

Now, we can use that container to apply styles to any of its children using @container:

.card {
display: grid;
grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}

You can find out more about container queries in the post @container and :has(): two powerful new responsive APIs landing in Chromium 105.

The :has() parent pseudo-class #

The post mentioned above also mentions :has(). This new pseudo-class The CSS :has() pseudo-class gives you a way to target the parent element and siblings based on conditions. Learn more in :has() the family selector.

Browser support: chrome 105, Supported 105 firefox 103, Behind a flag edge 105, Supported 105 safari 15.4, Supported 15.4 Source

Sanitizer API #

Also in Chrome 105 is the Sanitizer API. This API builds sanitization into the platform to help remove cross-site scripting vulnerabilities.

Browser support: chrome 105, Supported 105 firefox 83, Behind a flag edge 105, Supported 105 safari, Not supported × Source

Also in Chrome 105 is the :modal CSS pseudo-class. This matches an element that is in a state in which it excludes all interaction with elements outside it. For example, a &LTdialog> opened with the showModal() API.

Browser support: chrome, Not supported × firefox 103, Supported 103 edge, Not supported × safari 15.6, Supported 15.6 Source

The findLast() and findLastIndex() methods #

Firefox 104 adds support behind a flag for the methods Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast(), and TypedArray.prototype.findLastIndex(). These are used to find the value and index (respectively) of the last element in an Array or TypedArray that matches a supplied test function.

Browser support: chrome 97, Supported 97 firefox 104, Supported 104 edge 97, Supported 97 safari 15.4, Supported 15.4 Source

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.

Due to release dates falling just outside the month, the only new beta in August was Firefox 105, which is currently light on details.

The Safari 16 beta mentioned in June is also still ongoing.

Last updated: Improve article
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments