--- title: Best CSS-Tricks posts — September 2024 | daily.dev description: The most upvoted CSS-Tricks posts from September 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/css_tricks/best-of/2024/09 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/css_tricks/best-of/2024/09 og:type: website og:site_name: daily.dev og:title: Best CSS-Tricks posts — September 2024 | daily.dev og:description: The most upvoted CSS-Tricks posts from September 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 — September 2024 1. 1 [](https://daily.dev/posts/css-masonry-css-grid-2lzoord3d "CSS Masonry & CSS Grid") Article ![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 2y CSS Masonry & CSS Grid Masonry layout in CSS, often associated with packing items of varying sizes into columns, lacks a baked-in solution unlike the 'Holy Grail' layout with CSS Grid. There are two competing proposals for integrating masonry into CSS, each with its merits: one as a sub-feature of CSS Grid and another as a separate module. Discussions among CSS experts highlight the challenges and benefits of both approaches, with accessibility and layout performance being key considerations. 98 2. 2 [](https://daily.dev/posts/color-mixing-with-animation-composition-cudksutfg "Color Mixing With Animation Composition") Article ![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 2y Color Mixing With Animation Composition Mixing colors in CSS has been simplified with the \`color-mix()\` function, allowing for easy blending and proportion setting between two colors. Additionally, the \`animation-composition\` property enables combining keyframe effects with underlying values, capable of producing smooth transitions and new computed color values. By pausing animations and using DevTools, one can extract these new color values for further use. 64 1 3. 3 [](https://daily.dev/posts/time-travelling-css-with-target-jkeqy6l5s "Time Travelling CSS With :target") Article ![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 2y Time Travelling CSS With :target Explore the creative use of the :target pseudo-class in CSS, focusing on its application in creating a Tic Tac Toe game entirely with CSS. This method allows styling and animating based on user interaction without using JavaScript, offering benefits such as bookmarking game states and utilizing browser navigation for game control. The approach is presented as a fun, educational way to push CSS boundaries. 48 5 4. 4 [](https://daily.dev/posts/css-tricks-ni0aqt8bp "CSS-Tricks") Article ![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 2y CSS-Tricks Eric Meyer, Brian Kardell, and Stephanie Stimac, with support from Igalia, have introduced BCD Watch. It analyzes releases from the Browser Compatibility Data (BCD) repository, reporting weekly changes including new support or dropped features in major browsers. The tool aims to centralize and track browser compatibility data efficiently, integrating well with MDN and Caniuse.com. 41 5. 5 [](https://daily.dev/posts/two-css-properties-for-trimming-text-box-whitespace-akihvcvef "Two CSS Properties for Trimming Text Box Whitespace") Article ![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 2y Two CSS Properties for Trimming Text Box Whitespace Learn how to use the text-box-trim and text-box-edge properties in CSS to remove unnecessary whitespace above and below the content in text boxes. These properties are accessible via a feature flag in Chrome 128+ and Safari 16.4+, and help streamline design consistency by eliminating unwanted leading. Understand how to specify trimming from different edges and heights to achieve precise spacing and alignment without cumbersome calculations. 40 3 6. 6 [](https://daily.dev/posts/multiple-anchors-ukro7r88u "Multiple Anchors") Article ![Avatar of css_tricks](https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks)CSS-Tricks · 2y Multiple Anchors The post explores a CSS technique allowing one target element to be attached to multiple anchors on a page. By using the \`anchor()\` function in combination with different inset properties, elements like \`.target\` can be associated with multiple \`.anchor\` elements effectively. This method is illustrated through examples involving \`