CSS Developments: Custom Highlight API and Other Innovations
CSS Custom Highlight API and other significant frontend developments.
1CSS Custom Highlight API
Sunkanmi Fafowora demonstrated that the CSS Custom Highlight API is now supported by all major web browsers. This API works with JavaScript and styles using the ::highlight() pseudo-element function. The syntaxes are quite fun and easy to use. This API also provides a great resource for understanding how it works alongside other highlight pseudo-elements.
2Images Overflowing Themselves
Temani Afif explained how the img element acts like a container, allowing image resources to overflow themselves. This shows that it's possible to change the src using CSS. For example, code like content: url(new-image.avif) / 'New alt text'; can be used. This technique also allows images to load at different resolutions.
3Fixing Text-Stroke Issues
Tyler Sticka reminded us that text-stroke is center-aligned, making the inner part look bad. The paint-order property ensures that the text fill is painted over the inner part of the stroke. This improves the appearance of text-stroke. However, prefixed versions like -webkit-text-stroke are still necessary. This feature is a long-awaited improvement for text-stroke.
4Styling Skeleton UIs
Lea Verou showed how to style skeleton UIs using only CSS. The CSS community suggested solutions like box-decoration-break: clone. Different elements require different solutions. For example, a combination of thick text-decoration + color: transparent + masks provides an effective solution. However, more work is needed to round the edges.
5Using the lh Unit
Ahmad Shadeed showcased different uses of the lh unit. 1lh equals the computed line-height. This unit can be used to determine the size of text blocks. For example, the lh unit can be used to dynamically adjust the height of text blocks. This is quite useful for responsive designs.
6Diagonal Scrolling
Bramus explained how the new scroll-axis-lock property facilitates diagonal scrolling. The default behavior only allows scrolling on one axis at a time. However, this property enables scrolling on both horizontal and vertical axes simultaneously. This significantly enhances user experience.
7CSS Navigation Matching
Bramus introduced CSS navigation matching. This feature allows styling elements based on where the user is navigating to or from. It's a great tool for creating dynamic and interactive web pages. For example, it's possible to change the colors or styles of certain elements during navigation.
8The Future of CSS
The CSS Custom Highlight API and other innovations represent a major step forward for frontend development. These developments make web pages more dynamic and interactive. They also offer developers more flexibility and control. The future of CSS looks even brighter with such innovations.