CSS
Browse 72 articles in this topic. View all topics.
- Making Links Easy to Recognize
Make links recognisable with underlines, clear focus states, useful text, and behaviour that does not surprise the reader.
- When CSS Layout Order Stops Matching the HTML
Keep Grid and Flexbox layouts aligned with the HTML order so keyboard focus and screen reader reading do not jump around the page.
- Keyboard Focus Styles With :focus-visible
Keep a clear keyboard focus indicator while avoiding the same focus ring after every pointer interaction.
- Where CSS Performance Problems Come From
Focus CSS performance work on stylesheet weight, layout, painting, DOM size, and unused rules before benchmarking ordinary selectors.
- 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
Replace common JavaScript components with native HTML and CSS, from disclosures and dialogs to container queries and scroll effects.
- How to Hide Content Accessibly
Choose between display none, visibility hidden, opacity, aria-hidden, hidden, and visually hidden text based on behaviour.