CSS-Tricks Highlights: Custom Highlight API and More
Explore the latest CSS-Tricks roundup featuring the Custom Highlight API, fixing text-stroke with paint-order, and diagonal scrolling.
Stock photo for illustration only, not from the actual event
- How to implement the CSS Custom Highlight API powered by JavaScript
- Fixing inner text-stroke rendering issues using the paint-order property
- Enabling diagonal scrolling experiences with the new scroll-axis-lock
CSS-Tricks is back with another insightful roundup of front-end web development techniques, starting with Sunkanmi Fafowora's demonstration of the CSS Custom Highlight API, which is now supported across all major web browsers. Although it bears 'CSS' in the name and handles styling through the ::highlight() pseudo-element, JavaScript plays the core role in making it function.
On the typography front, Tyler Sticka shared a practical method for fixing text-stroke rendering issues using paint-order. Because text strokes are center-aligned by default, half of the stroke bleeds inward, often creating an undesirable look. While the paint-order property does not alter the alignment itself, it ensures that the text fill is painted directly over the problematic inner half of the stroke, though the vendor-prefixed -webkit-text-stroke remains necessary for full compatibility.
Stock photo for illustration only, not from the actual event
Meanwhile, Lea Verou explored methods for styling skeleton UIs using pure CSS, sparking great community contributions such as Agustin Capeletto's suggestion of box-decoration-break: clone. Verou also experimented with thick text-decoration combined with transparent colors and masks to push creative layout boundaries further without requiring heavy HTML structural changes.
These modern CSS additions demonstrate a continuous shift toward native browser capabilities that reduce reliance on complex JavaScript hacks for advanced styling and layout behaviors, ultimately improving maintainability and performance for web developers.
Ahmad Shadeed showcased various use cases for the lh unit, which equals the computed line-height, providing a seamless way to size elements relative to typography. Additionally, Bramus introduced scroll-axis-lock to facilitate diagonal scrolling alongside CSS navigation matching, a powerful capability that allows developers to style elements based on user navigation pathways.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment