What’s !important #18:, Syntax ::highlight()ing, named-feature(), and More

This week’s CSS‑Tricks roundup spotlights a cascade of Chrome‑only features that push the language toward richer interaction and styling primitives. Chris Coyier demonstrated “interest invokers” that expose two new properties—interest‑delay‑start and interest‑delay‑end—letting developers fine‑tune tooltip activation and dismissal without JavaScript. Dave Rupert leveraged the freshly‑minted Custom Highlight API to build MicroLighter, a lightweight syntax highlighter powered by the ::highlight() pseudo‑element. Bramus introduced a class‑prefix selector syntax (e.g., `.something-*`) that promises faster matching than attribute selectors, and paired it with a Chrome‑supported @supports named‑feature() function for querying niche capabilities such as transform‑aware anchor positioning. Meanwhile, Ahmad Shadeed explained Chrome’s flex‑wrap: balance, which distributes flex items evenly across rows, mirroring the text‑wrap: balance behavior.

Beyond Chrome, the roundup notes Firefox 154’s arrival with sibling‑count() and sibling‑index() (renamed Baseline), plus text‑box‑trim, text‑box‑edge, and text‑box utilities that give authors direct control over inline‑box geometry. Chrome 152 adds an autocorrect pseudo‑class, and both browsers are slated to adopt the alpha() color function and OpaqueRange type, though Safari lags on these. The article also revisits the <geolocation> element, now usable alongside the classic Geolocation API but still Chrome‑exclusive, and highlights Temani Afif’s technique for exporting CSS grid dimensions into custom properties—a method that currently requires equal‑width columns. Finally, a brief debate surfaces over dark‑mode theming: Lea Verou argues for a binary two‑state model, while Bramus pushes a tri‑state approach that includes an “auto‑until‑overridden” fallback.

These additions illustrate a competitive push where Chrome aggressively prototypes granular UI controls, while Firefox catches up with layout‑centric utilities. The split support means developers must adopt progressive‑enhancement patterns or feature‑detect via @supports(named-feature()) to avoid breaking experiences in non‑Chrome browsers. As the Custom Highlight API and class‑prefix selector mature, they could reshape how libraries handle syntax highlighting and BEM‑style naming, potentially reducing reliance on heavy JavaScript. However, the fragmented rollout also raises maintenance overhead and the risk of “Chrome‑only” design patterns ossifying into de‑facto standards without broader consensus.