What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More

In the latest “What’s !important #17” roundup, Sunkanmi Fafowora showed that the CSS Custom Highlight API, powered by the ::highlight() pseudo‑element, has reached full support across Chrome, Edge, Safari and Firefox, turning what was once an experimental feature into a production‑ready tool for programmatic text highlighting. At the same time, Temani Afif revealed that the <img> element can act as a container whose source can be swapped or layered via the CSS content and image‑set properties, effectively letting developers change raster assets without touching markup. Tyler Sticka addressed a long‑standing visual glitch in -webkit‑text‑stroke by layering the fill with paint‑order, a workaround that mitigates the half‑inside stroke problem until browsers standardize a better algorithm. Lea Verou pushed the envelope on pure‑CSS skeleton screens, combining box‑decoration‑break: clone, thick text‑decoration, transparent color and CSS masks to simulate loading placeholders without extra markup, though she noted edge‑case issues with rounding corners. Ahmad Shadeed reminded readers that the lh unit now maps directly to computed line‑height, opening new possibilities for vertical rhythm calculations, while Bramus van der Linden introduced scroll‑axis‑lock for true diagonal scrolling and a prototype CSS navigation‑matching selector that can style elements based on the user’s navigation direction.

These demonstrations arrive at a moment when the CSS ecosystem is rapidly expanding beyond static styling into interactive, state‑driven behavior traditionally handled by JavaScript. The universal adoption of the Custom Highlight API signals that browsers are willing to expose low‑level text manipulation hooks, potentially reducing the need for third‑party libraries for search‑term highlighting. Likewise, scroll‑axis‑lock and navigation‑matching hint at a future where CSS can express complex UI gestures and routing cues, narrowing the gap between design and logic layers. The community‑driven experiments—particularly Verou’s skeleton UI technique—showcase how developers are leveraging emerging properties (box‑decoration‑break, mask) to eliminate markup bloat, a trend that aligns with performance‑first web standards.

Looking ahead, the biggest uncertainty lies in the timing of formal spec adoption for navigation‑matching and the refinement of text‑stroke rendering. If browsers standardize these features soon, we could see a shift toward declarative UI patterns that simplify codebases. Developers should monitor Chrome’s “origin‑trial” releases, Safari’s WebKit roadmap, and Firefox’s Bugzilla entries to gauge when these APIs move from experimental flags to stable defaults, and be prepared to refactor existing JavaScript‑heavy solutions accordingly.