Chrome 154 is rolling out now, and this post shares some of the key features from the release. Read the full Chrome 154 release notes.
Highlights from this release:
Responsively-sized <iframe> lets an <iframe> size itself based on the intrinsic size of its embedded document.
CSS scroll-marker-group modes adds links and tabs modes to configure the focus order and accessibility semantics of scroll markers.
CSS text-decoration-inset lets you adjust the start and end points of text decorations.
Responsively-sized <iframe>
Chrome 154 adds support for responsively-sized iframes, letting an <iframe> element in a parent document size itself to the embedded document's layout overflow sizing so that scrolling in the child document is avoided. This replaces the pattern where you manually measure iframe content, send dimensions with postMessage(), and update the iframe size in the embedding page.
To size an iframe to its content height, use the frame-sizing CSS property on the <iframe> element in the embedding page:
.embed { width: 100%; frame-sizing: content-height; }
The embedded document must also opt in by including a <meta name=“responsive-embedded-sizing”> element in its <head>:
<meta name=“responsive-embedded-sizing” content=“allow-origins=*”>
For more details and demos, see Responsive iframes in Chrome 154.
CSS scroll-marker-group modes
The scroll-marker-group property controls whether a scroll container generates a ::scroll-marker-group pseudo-element before or after its contents. Chrome 154 enhances scroll-marker-group with two modes that set the focus order and WAI-ARIA accessibility semantics of ::scroll-marker-group and ::scroll-marker:
/ Links mode (default) / scroll-marker-group: after links;
/ Tabs mode / scroll-marker-group: before tabs; CSS text-decoration-inset
By default, an element's text decoration (such as an underline, overline, or line-through) is the same length as the rendered text. The text-decoration-inset CSS property lets you adjust the start and end points of an element's text decoration so that it is inset from, extended beyond, or shifted relative to the text run edges.