All CSS Techniques
Modern CSS guide organized by category
🏗️ Layout
CSS Gap Decorations
Draw lines in gaps with row-rule/column-rule
CSS Gap Decorations lets you draw decorative lines in grid/flex gap areas. Available via Chrome 139+ flag.
CSS Subgrid
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
Components responding to parent container size
Container Queries change styles based on parent container size instead of viewport. They enable true component-based responsive design.
🎯 Selectors & Properties
:has() Selector
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.
CSS Nesting
Native nesting rules without Sass
CSS Nesting allows writing nested rules natively in the browser without preprocessors. The & selector references the parent.
CSS Cascade Layers
Explicit style priority control with @layer
Cascade Layers explicitly stratify CSS priority with @layer rules. They solve style conflict issues in large-scale projects.
✨ Animation & Transitions
Scroll-driven Animation
Scroll-based interactions without JS
Scroll-driven Animation implements CSS animations linked to scroll position using scroll() and view() timelines.
View Transitions API
Smooth animations during page transitions
View Transitions API provides smooth transition animations between pages or DOM state changes. Works with both SPA and MPA.
🎨 Typography & Color
color-mix()
Mix two colors by ratio for dynamic color generation
The color-mix() function creates new colors by mixing two colors at specified ratios. Useful for generating dynamic color palettes in design systems.
text-wrap: balance
Balanced line breaks for headings
text-wrap: balance distributes line breaks evenly to solve the orphan word problem on the last line.
🔮 Modern CSS Patterns
CSS Anchor Positioning
Anchor elements to others without JS
CSS Anchor Positioning positions elements relative to other elements. It implements tooltip and dropdown positioning with CSS only, without JavaScript.
Popover API
Native HTML popover/modal implementation
Popover API natively implements modals and popovers with the HTML popover attribute. Accessibility is automatic and JavaScript is minimized.