All CSS Techniques
Modern CSS guide organized by category
Layout
What Are CSS Gap Decorations? Drawing Lines in Grid Gaps
Using row-rule and column-rule (Chrome 139+ behind a flag)
CSS Gap Decorations lets you draw decorative lines in grid/flex gap areas. Available via Chrome 139+ flag.
What Is CSS Subgrid? Aligning Card Contents to the Parent Grid
Inherit parent grid tracks to children
Subgrid inherits parent grid row/column tracks to child grids. It maintains alignment consistency in complex card layouts.
CSS Container Queries: Styling by Parent Size, Not Viewport
How they differ from viewport-based media queries
Container Queries change styles based on parent container size instead of viewport. They enable true component-based responsive design.
Selectors & Properties
What Is CSS :has()? Styling Parents Without JavaScript
Select parent/sibling by child condition
:has() selector is a relational pseudo-class that selects parent or sibling elements based on child or subsequent element conditions.
How to Use Native CSS Nesting Without Sass
Referencing the parent selector with &
CSS Nesting allows writing nested rules natively in the browser without preprocessors. The & selector references the parent.
What Are CSS Cascade Layers? Controlling Priority with @layer
Untangling style conflicts in large projects
Cascade Layers explicitly stratify CSS priority with @layer rules. They solve style conflict issues in large-scale projects.
Animation & Transitions
What Are Scroll-Driven Animations? Animating on Scroll Without JS
Using the scroll() and view() timelines
Scroll-driven Animation implements CSS animations linked to scroll position using scroll() and view() timelines.
What Is the View Transitions API? Smooth Animations Between Pages
Works in both SPAs and multi-page apps
View Transitions API provides smooth transition animations between pages or DOM state changes. Works with both SPA and MPA.
Typography & Color
How to Use CSS color-mix() to Blend Two Colors by Ratio
Generating palettes on the fly in a design system
The color-mix() function creates new colors by mixing two colors at specified ratios. Useful for generating dynamic color palettes in design systems.
What Is text-wrap: balance? Even Line Breaks for Headings
Use it on short text — long body copy has a performance cost
text-wrap: balance distributes line breaks evenly to solve the orphan word problem on the last line.
