Best of CSS-Tricks — 2024
- 1
- 2
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.
- 3
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.
- 4
CSS Olympic Rings
The post showcases a modern approach to creating animated 3D Olympic rings using vanilla CSS, focusing on efficiency, readability, and leveraging modern CSS features like trigonometric functions and relative color syntax. The project involves using layers, custom properties, and transforms to create the ring shapes and their animations, demonstrating the power and flexibility of current CSS standards.
- 5
Fluid Everything Else
The post discusses modern approaches to responsive design, focusing on the limitations of traditional methods like media queries. It introduces fluid typography and layout techniques using container queries and CSS's clamp() function to create more seamless and adaptive designs. Examples and code snippets are provided to illustrate these concepts.
- 6
Knowing CSS is Mastery to Frontend Development
While modern frameworks like React and TypeScript, along with component libraries such as MUI and Tailwind, have made styling easier, many developers lack the knowledge to assess the quality of CSS in their codebases. This can lead to performance issues and a lack of understanding of foundational principles. Ultimately, prioritizing user experience and a deeper understanding of CSS are crucial for effective frontend development.
- 7
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.
- 8
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.
- 9
CSS Selectors
CSS is highly effective in selecting and styling elements. It provides various selector types, such as universal, type, class, ID, and attribute selectors, each serving different specificity needs. CSS combinators, like descendant, child, general sibling, and adjacent sibling combinators, help refine selections. Pseudo-selectors target pseudo-elements for additional styling without altering HTML. Understanding specificity and combining selectors enhances CSS expertise and maintainability.
- 10
Transitioning to Auto Height
Chrome Canary has introduced support for transitioning CSS properties to 'auto' values, significantly improving the ability to animate elements whose dimensions are unknown. This feature helps avoid the need for fixed-height transitions, allowing for more dynamic and responsive designs. The implementation leverages CSS 'calc()' to compute dimensions dynamically, and can handle properties like height, block-size, width, and inline-size. Additionally, transitioning from 'display: none' remains complex but doable with 'transition-behavior: allow-discrete' and '@starting-style' declarations.
- 11
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.
- 12
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.
- 13
- 14
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.
- 15
“If” CSS Gets Inline Conditionals
The CSS Working Group (CSSWG) has resolved to add the if() conditional to the CSS Values Module Level 5 specification. The proposal, led by Lea Verou, aims to allow styles to be applied based on conditional requirements. This conceptual feature could enable inline conditionals with selectors, transforming how styles are applied. The syntax involves specifying conditions and setting style values based on those conditions. The feature is still under development, with ongoing discussions and potential changes.
- 16
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.
- 17
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.
- 18
CSS Stuff I’m Excited After the Last CSSWG Meeting
The CSS Working Group (CSSWG) has discussed exciting new features for CSS that are expected to be implemented in 2024. Highlights include the addition of the `if()` function for conditional styling without using JavaScript, advancements in cross-document view transitions which allow seamless navigation between pages, and improvements in anchor positioning to make element placement more intuitive and less error-prone. These developments are the result of years of collaborative efforts among developers and are likely to significantly enhance web development practices.
- 19
State of CSS 2024 Results
The State of CSS 2024 survey results are now available, offering insights into demographics, feature usage, and industry trends. Highlights include gender and regional pay disparities, the evolving age demographics of front-end developers, and underused CSS features like `hanging-punctuation`. Tailwind has surpassed Bootstrap as the top CSS framework, reflecting changing preferences. Despite advancements, mobile testing remains lower than expected at 67%. The survey also lists highly anticipated features like Mixins and Masonry layouts, which are seeing progress in development.
- 20
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.
- 21
Anchor Positioning Quirks
Anchor positioning is a new CSS feature that brings new dynamics in positioning absolute elements, accompanied by quirks and potential bugs. It introduces concepts like the inset-modified containing block (IMCB) and properties such as position-area and position-try-fallbacks. Despite fast browser adoption, some discrepancies between the specification and implementations persist. The feature also calls for attention to accessibility considerations when linking elements semantically and visually.
- 22
The “Other” C in CSS
Sara Soueidan's presentation at CSS Day 2024 emphasizes how CSS impacts accessibility beyond visual appearances. She covers the accessibility tree (accTree), the implications of CSS properties like `display: contents`, and the importance of proper element naming. Additionally, Sara discusses visually hiding elements and the pitfalls of using CSS-generated content for meaningful information. The presentation offers practical advice on ensuring accessible, user-friendly web designs.
- 23
CSS Functions and Mixins Module Notes
The introduction of the CSS Functions and Mixins Module could reduce the need for preprocessors like Sass, thanks to its ability to loop through lists and keep styles DRY. The new module, still in draft stages, introduces both custom functions and mixins distinctively. Custom functions work like advanced custom properties and offer capabilities such as returning multiple values conditionally. Mixins, akin to those in Sass, enable reusable style blocks but with the new @apply at-rule for embedding styles in CSS rulesets. Various nuances and potential limitations are under discussion within the CSS Working Group.