Css Articles
Multi-Line Padded Text and box-decoration-break
Using the CSS box-decoration-break property to create padded, multi-line text with background colors, solving a common web design challenge.
Update Q4 2022 — Free book chapter, and a mouseless Mac setup
Author updates on new web design book edition, potential Vim/JavaScript projects, and shares experiences with custom keyboards and input devices.
CSS box-sizing: border-box
A developer argues for using CSS box-sizing: border-box as the universal default, criticizing design systems that don't adopt it.
Position Statement for the 2022 W3C TAG Election
Lea Verou's re-election statement for the W3C Technical Architecture Group, focusing on web standards and developer needs.
Inside the mind of a frontend developer: Hero section
A frontend developer shares their detailed thought process and decision-making while building a responsive hero section with modern CSS.
Why you should never use px to set font-size in CSS
Explains why using px units for CSS font-size can harm accessibility and override user preferences, advocating for em/rem units instead.
Converting Display-p3 colors from Sketch to CSS values you can use in Safari
Explains how to convert Display-p3 colors from Sketch to CSS for Safari, covering color spaces and current browser support limitations.
CSS Halftone Patterns
Explains how to create halftone patterns using CSS, covering gradients, masks, and filters for a retro printing effect.
A CSS class-naming convention might still be your best choice
Argues that CSS class-naming conventions like BEM or ECSS remain a pragmatic choice for scalable CSS architecture, even with modern features like Cascade Layers.
State of CSS 2022 now open!
The State of CSS 2022 survey is now open, gathering developer feedback on new CSS features, pain points, and usage patterns.
Use cases for CSS comparison functions
Explores practical use cases for CSS comparison functions like clamp(), max(), and min(), including fluid sizing, decorative elements, and hero sections.
Detecting CSS Selector Support
Explains how to use CSS @supports for feature detection, including checking property support and new selectors like :has() and :focus-visible.
Creative CSS Layout (and the Flexible Web)
A talk on modern CSS layout techniques, emphasizing flexibility and new features like Container Queries and :has().
CSS container queries are finally here
CSS container queries are now supported in modern browsers, enabling responsive component design based on parent container size instead of viewport.
selection pseudo element
Explains how to use the CSS ::selection pseudo-element to style highlighted text, including supported properties and limitations.
Pseudo classes vs Pseudo elements
Explains the key differences between CSS pseudo-classes (like :hover) and pseudo-elements (like ::before), including syntax and use cases.
Creative List Styling
Explores HTML list types and creative CSS styling techniques for web development.
A Handy Use For Cascade Layers
Using CSS Cascade Layers to manage style order and specificity in live coding demos, particularly with container queries.
Help design the State of CSS Survey 2022!
CSS, News, Surveys, Data Analysis, State Of CSS Since 2019, the annual State of CSS survey has collected feedback from web developers from across the