CSS
Modern CSS techniques for better layouts, responsive interfaces, cleaner stylesheets, and solving everyday front-end development challenges.
Browse 87 articles in this topic. View all topics.
- When CSS @supports Is Useful
Add modern CSS with @supports feature queries when unsupported browsers need a genuinely different layout or behaviour.
- Show Form Errors After Interaction With :user-invalid
Use :user-invalid and :user-valid to style native HTML validation states without marking untouched fields as errors.
- Smoother Page Changes With View Transitions
Use the View Transition API for same-page state changes and progressive cross-document animation on a normal multi-page site.
- Styling Scrollbars With Modern CSS
Style scrollbar width and colours with standard CSS, while keeping the control visible, usable, and familiar.
- When to use CSS clip-path or mask
Choose between CSS clip-path and mask by deciding whether the element needs a hard boundary or levels of transparency.
- Fading images with CSS masks
Use CSS masks for image fades, scroll hints, cutouts, and recolourable icons without changing the source asset.
- Responsive shapes with CSS shape()
Use the CSS shape() function for scalable clipping paths with lines and curves, while keeping a simple fallback.
- CSS @property Gives Variables a Type
Register a CSS custom property with a type, initial value, and inheritance rule so the browser can validate and animate it.
- Modern CSS You Can Actually Use Today
A practical selection of modern CSS features that simplify real websites, with a focused example for each one.
- Expandable sections with HTML details and summary
Build simple accordions and disclosure sections with the native HTML details and summary elements.
- The Modern CSS Color Functions I Find Useful
Practical uses for oklch(), color-mix(), relative colors, and light-dark() in modern CSS.
- CSS Scroll-Driven Animations Without JavaScript
Link CSS animations to scrolling for progress bars and reveal effects without maintaining scroll event listeners.
- Building a modal with HTML dialog
Build modal windows from the native HTML dialog element, including backdrops, forms, Escape handling, and practical examples.
- HTML Popover API: Popovers Without JavaScript
Create menus, help boxes, and other lightweight overlays with the native HTML Popover API and very little code.
- Native HTML and CSS Features That Replaced JavaScript
Choose native HTML and CSS before custom JavaScript. Compare dialogs and popovers, then use native forms and layout rules without rebuilding behaviour.
- How to Hide Content Accessibly
Choose between display none, visibility hidden, opacity, aria-hidden, hidden, and visually hidden text based on behaviour.
- CSS interpolate-size: Animate From 0 to auto
Animate between fixed and intrinsic sizes such as auto with CSS interpolate-size, while keeping a safe fallback.
- CSS Cascade Layers: What @layer Is Actually For
Use CSS cascade layers to decide which groups of styles win before specificity turns the stylesheet into an argument.
- Keep Component Styles Contained With CSS @scope
Use CSS @scope to contain component styles without tying every selector to a long chain of parent classes.
- Position Tooltips and Menus With CSS Anchor Positioning
Position tooltips, menus, and other floating UI next to an anchor without calculating coordinates in JavaScript.