# New CSS Features: Highlight API and Beyond

Latest CSS innovations and practical use cases for web developers.

- **Source:** [CSS-Tricks](https://brifing.si/source/eea3b580-b2ba-4369-b9e0-7fc8ad2ad5e3)
- **Published:** 2026-08-14
- **Topic:** [Software & Engineering](https://brifing.si/c/engineering)
- **Original article:** <https://css-tricks.com/whats-important-17/>
- **On Brifing:** https://brifing.si/s/e299733f-38b0-4938-ae0b-dc3db6f7aa76

## CSS Custom Highlight API

The CSS Custom Highlight API, now supported by all major browsers, offers new text highlighting capabilities. Powered by JavaScript but styled via ::highlight() pseudo-element, it provides flexibility for document markup tools. Sunkanmi Fafowora's demonstration showcases practical implementations, particularly useful for code editors. This API represents a significant step forward in browser-native text manipulation features.

## Image Overflow Behavior

Temani Afif explained how img elements can overflow their own content, enabling dynamic image swapping via CSS. The content property allows loading different resolution images conditionally. The image-set function automates device-appropriate image selection. This technique offers substantial advantages for responsive design implementations and performance optimization in modern web development.

## Text Stroke Challenges Solved

Tyler Sticka addressed the alignment issues with text-stroke properties. The paint-order property ensures text fill covers the inner half of strokes. While -webkit-text-stroke prefix remains necessary across browsers, this solution improves typographic rendering quality. The development community continues working toward full standardization of these text decoration features.

## Skeleton UI Styling Techniques

Lea Verou explored CSS-only methods for styling skeleton loading states. Lesser-known properties like box-decoration-break: clone prove valuable. Community contributions produced innovative combinations using text-decoration and masks. Agustin Capeletto's suggestions provide solutions for diverse element types. These techniques significantly enhance perceived performance during content loading.

## Practical Uses of lh Unit

Ahmad Shadeed demonstrated versatile applications for the lh (line-height) unit. With 1lh equaling computed line-height, this unit ensures typographic consistency. It's particularly effective for maintaining vertical rhythm in layouts. The unit helps preserve text block proportions across responsive breakpoints, solving common alignment challenges in CSS.

## Diagonal Scrolling Feature

Bramus introduced the scroll-axis-lock property enabling diagonal scrolling interactions. Default behavior restricted scrolling to single axes. This enhancement improves user experience in complex interfaces like maps and games. As browser support grows, we'll see broader adoption in applications requiring multidimensional navigation. The feature demonstrates evolving standards for rich web interactions.

## CSS Navigation Matching

Bramus unveiled this innovation allowing element styling based on navigation context. Dynamic styles can apply according to route origins or destinations. Particularly valuable for single-page applications, it enables history-aware UI personalization. While not yet in stable browser releases, this feature promises to revolutionize navigation-related styling capabilities.

## Significance of Frontend Innovations

These CSS advancements substantially improve modern web development workflows. Features like Custom Highlight API enhance complex application performance. Community contributions and open standards accelerate web evolution. Developer awareness of these innovations provides competitive advantages. The rapid pace of frontend ecosystem progress shows no signs of slowing in 2023.

## Sources covering this story

- https://css-tricks.com/whats-important-17/ — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._
