--- title: Best CSS-Tricks posts — October 2024 | daily.dev description: The most upvoted CSS-Tricks posts from October 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2024/10 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2024/10 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — October 2024 | daily.dev og:description: The most upvoted CSS-Tricks posts from October 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS-Tricks — October 2024 1. 1 [](https://daily.dev/posts/css-anchor-positioning-guide-girm910ju "CSS Anchor Positioning Guide") 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 [](https://daily.dev/posts/tooltip-best-practices-r8azxe9cp "Tooltip Best Practices") Article CSS-Tricks · 2y 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 [](https://daily.dev/posts/unleash-the-power-of-scroll-driven-animations-rttbrvqbt "Unleash the Power of Scroll-Driven Animations") 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 [](https://daily.dev/posts/come-to-the-light-dark-side-y4oxhwjlq "Come to the light-dark() Side") Article CSS-Tricks · 2y 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 [See all CSS-Tricks archives](/sources/css%5Ftricks/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/css_tricks/best-of/2024/10#page","url":"https://daily.dev/sources/css_tricks/best-of/2024/10","name":"Best CSS-Tricks Posts — October 2024","description":"The most upvoted CSS-Tricks posts from October 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/css_tricks/best-of/2024/10#items","numberOfItems":4,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/css-anchor-positioning-guide-girm910ju","name":"CSS Anchor Positioning Guide"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/tooltip-best-practices-r8azxe9cp","name":"Tooltip Best Practices"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/unleash-the-power-of-scroll-driven-animations-rttbrvqbt","name":"Unleash the Power of Scroll-Driven Animations"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/come-to-the-light-dark-side-y4oxhwjlq","name":"Come to the light-dark() Side"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/css_tricks/best-of"},{"@type":"ListItem","position":5,"name":"October 2024"}]}]} ```