Latest in CSS: Geolocation, Syntax Highlighting, and More
Explore the newest CSS features and their practical applications.
1Delayed and Instant Tooltips
Abhishek Jakhar explained why tooltips should start delayed and disappear instantly. This prevents accidental triggers while ensuring immediate closure when needed. Small hover areas should retain the delay due to higher accidental trigger risks. Chris Coyier enhanced this approach using modern CSS features, implementing interest invokers currently supported only in Chrome.
2Advances in Geolocation API
The Geolocation API has been complex due to external hardware like GPS, Wi-Fi, and cellular networks. New improvements simplify permission management but introduce some styling restrictions. Currently only supported by Chrome, these features can be used alongside the existing Geolocation API, allowing developers to benefit from them today.
3Syntax Highlighting with MicroLighter
Dave Rupert created MicroLighter, a small syntax highlighter using the new Custom Highlight API. This tool enables developers to highlight code blocks more effectively. Geoff shared additional insights on its usage. MicroLighter is particularly designed to improve readability in complex code blocks.
4Passing CSS Grid Info to CSS Variables
Temani Afif demonstrated how to pass CSS grid information to custom properties. This includes row/column counts and each cell's coordinates (x/y indexes). The only requirement is equal-width columns, which might change as CSS evolves. This technique enhances dynamic grid styling capabilities.
5Dark Mode: Two-State or Three-State?
Lea Verou advocates for two-state dark mode while Bramus prefers three-state. A personal preference might be the auto-overridden two-state approach. Vale.Rocks details how this improves user experience. Dark mode preferences significantly impact eye comfort and energy savings.
6Introduction to Class Prefix Selector
Bramus introduced the class prefix selector, not yet supported anywhere. This selector offers cleaner and more performant solutions compared to attribute selectors. For example, .something-* can be used. Geoff evaluated its potential and future applications, expanding CSS selector capabilities.
7The named-feature() Function
Bramus also introduced the @supports named-feature() function, supported by Chrome. This function queries support for specific features otherwise impossible to check. For instance, it can verify if transforms are respected during anchor positioning. This significantly enhances @supports functionality.
8Flex-Wrap: Balance Property
The new flex-wrap: balance property in Chrome adapts text-wrap: balance for flex items. Ahmad Shadeed explained its functionality and use cases. This property ensures more balanced distribution of flex items across rows, achieving more consistent UI layouts ideal for user interfaces.