Best of CSS-Tricks — October 2024

1. 1
   Article

   CSS-Tricks·2y

   CSS Anchor Positioning Guide

   CSS Anchor Positioning provides a simple way to attach and position elements adjacent to others directly in CSS, allowing for fallback positions to avoid overflow issues. It has gained rapid browser support, notably being released in Chrome 125, and offers a more efficient alternative to JavaScript-based positioning. The guide covers key concepts, such as defining anchors and targets, and explains properties like `position-area`, `position-visibility`, and `position-try-fallbacks` for fine-grained control. The spec includes handy functions like `anchor()` and `anchor-size()` for attaching and scaling elements relative to anchors. However, some bugs and spec changes exist, impacting implementation nuances.

   94

   2
2. 2
   Article

   CSS-Tricks·1y

   Tooltip Best Practices

   Tooltips provide simple text hints for UI controls and must contain only descriptive text. They should use the `aria-labelledby` or `aria-describedby` attributes for accessibility, depending on their purpose. Tooltips should not include interactive content and must be accessible through hover or focus actions. For touch devices, alternatives like Toggletips or integrating the descriptive text in the design are recommended.

   62

   1
3. 3
   Article

   CSS-Tricks·2y

   Unleash the Power of Scroll-Driven Animations

   Scroll-driven animations are directly linked to scrolling progress, pausing and playing with scroll direction. Unlike scroll-triggered animations, which run independently, scroll-driven ones offer performance perks by avoiding render-blocking. Techniques are demonstrated using CSS properties like `animation-timeline` and JavaScript's `ScrollTimeline` to create responsive animations. Core concepts also include view timelines and named/anonymous timelines for more complex animation management, benefiting from hardware acceleration. Performance tips like preferring `overflow: clipped` over `hidden` and attaching animations after shorthand properties ensure smooth operation.

   50

   1
4. 4
   Article

   CSS-Tricks·1y

   Come to the light-dark() Side

   Implementing dark and light mode in modern CSS has become simpler. Using the 'color-scheme' property on the root element enables automatic switching based on the visitor’s OS preference. Native HTML supports both black-on-white (light mode) and white-on-black (dark mode) themes. The 'light-dark()' function provides fine-grained control over color schemes, and you can use JavaScript to toggle modes and remember user preferences using localStorage or sessionStorage. This approach benefits accessibility and user experience, making websites comfortable for a wider audience.

   35

   3