Best of CSS-Tricks — September 2024

1. 1
   Article

   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
   Article

   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
   Article

   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
   Article

   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.

   42
5. 5
   Article

   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
   Article

   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 `<textarea>` elements resized dynamically. The technique showcases modern CSS capabilities that previously required JavaScript.

   33

   1