Skip to content

standards, browsers, CSS, Baseline

Web

9 items
The prefix selector, a hyphen followed by an asterisk, set between two oversized curly braces.
Webmedium signal

A class prefix selector is now spec text in Selectors Level 5

The draft of August 18 adds section 2.1, Class Prefix Selectors, defining .foo-* to match any class beginning with that prefix. It replaces the attribute-selector workarounds every design system carries. Nothing implements it yet, and the matching rule has an edge that will catch people: .foo-* does not match foo--bar.

CSS Working Groupverified

The Baseline wordmark beside its double check mark, on a pale green field.
Webmedium signal

Put Baseline in CI so the browser stops deciding for you

Three packages and about 20 minutes. One config tells your build which browsers you target, a linter warns when a stylesheet reaches past that line, and CI says it on the pull request instead of a user saying it in a bug report six weeks later.

web.dev, npmverified

SVGSMILa timing chart before the markup
Webweak signal

A timing chart as the blueprint for SMIL animation in SVG

On August 20 at Smashing Magazine, Johan Grobler described a method in which a complex SMIL animation is first drawn as a timing chart and only then written in markup. Every bar on the chart corresponds to one animate element, and its length and position become the values of the dur and begin attributes. Because a single animate changes exactly one property of one element, the count climbs fast: a three-dot loader takes six of them. The piece also covers synchronizing to another animation's start or end through the begin attribute, and honoring prefers-reduced-motion through the picture element.

Smashing Magazineverified

Webmedium signal

Firefox 154 brings sibling-index(), sibling-count(), and text-box-trim

The August 18 release adds three CSS features you can use right away. sibling-index() and sibling-count() give an element's position among its siblings and their total, directly in CSS and without a line of JavaScript, which ends the need to hand-write variables like --i for staggered animation delays. Alongside them come text-box-edge, text-box-trim, and the text-box shorthand, which remove the extra space above and below text so headings finally sit in the grid the way they look in the design. On the JavaScript side, includes(), join(), chunks(), and windows() were added to the iterator prototype.

MDNverified

Webmedium signal

New on the web platform in July: Firefox 153 and Chrome 151

Rachel Andrew summarizes July's stable releases. Firefox 153 widens how the select element is parsed so that any nested element is allowed inside it, which opens the path to genuinely customizable dropdowns without JavaScript replacements. The same release brings the Picture-in-Picture API to desktop, the Intl.Locale Info API with getCalendars(), getTimeZones(), and getWeekInfo(), and IndexedDB getAllRecords(). Chrome 151 adds the CSS ruby-overhang property, manual slot assignment in declarative Shadow DOM through the shadowrootslotassignment attribute, and the animation property on the AnimationEvent and TransitionEvent interfaces.

web.devverified

Webmedium signal

July Baseline digest: Intl.Locale and rect() cross the line

The edition published on August 10 moves Intl.Locale into newly available — a standard way to parse, modify, and inspect Unicode language and region tags, useful anywhere dates, numbers, and currencies are formatted without an extra library. Array.fromAsync(), which turns asynchronous data streams into an array, and the CSS rect() function, which describes rectangular shapes for clip-path and offset-path far more readably than going through polygon(), both moved to widely available. An updated MDN guide to choosing image formats shipped alongside the digest.

web.devverified

Webweak signal

May Baseline digest: container style queries and the :open pseudo-class

Newly available now includes container style queries, which let you style based on a custom property of a parent element, along with the :open pseudo-class for dialog and details, the ToggleEvent.source property, the image-rendering property that keeps pixel art and QR codes sharp when scaled, the text-decoration-skip-ink: all value, and SharedWorker. Widely available now covers the lh and rlh units, Navigator.userActivation, clip-path, and the :user-invalid pseudo-class.

web.devverified

Webmedium signal

How Baseline helps you ship less JavaScript

Jad Joubran gives a practical method for auditing package.json: which libraries can be dropped today because the browser does the same job natively. The piece explains Baseline's three states — limited availability, newly available, and widely available — and shows how to use them as a measure instead of a feeling. The gap between the claim that something needs a library and the fact that the browser already does it closes faster than most projects track.

Smashing Magazineverified

Webmedium signal

NoLoJS: a catalog of patterns HTML and CSS now handle

Aaron T. Grogg assembled a survey of common JavaScript patterns that today are solved with plain HTML and CSS, with no script at all, or the smallest one possible. The collection pairs well with the Baseline piece: first check what the platform already does, then drop the dependency. The result is a lighter page and better Core Web Vitals numbers.

GitHubverified