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.
- Prevent Scroll Chaining With overscroll-behavior
overscroll-behavior controls scrolling at a container's boundary. Compare contain and none, use axis-specific rules, and understand the limits for modals.
- Set Anchor and Snap Insets With CSS scroll-padding
scroll-padding sets a viewing inset for anchor targets and snap positions. See page, gallery, and panel examples, plus how it differs from normal padding.
- Keep Anchor Links Below Sticky Headers With scroll-margin
scroll-margin keeps anchor targets clear of sticky headers. Set a useful offset, account for changing header heights, and keep smooth scrolling optional.
- Better Vertical Text Alignment With text-box-trim
CSS text-box-trim adjusts space around text using font metrics. See cap and baseline edges, heading and button examples, plus readable browser fallbacks.
- Why content-visibility Often Needs contain-intrinsic-size
contain-intrinsic-size reserves space while content-visibility skips rendering. See how auto remembers sizes and how to choose useful placeholder values.
- Can content-visibility Make Long Pages Render Faster?
CSS content-visibility can defer rendering work on long pages. See where auto helps, why placeholder sizes matter, and what to check before keeping it.
- Let Components React to CSS Variables With Style Queries
CSS style queries let components react to custom properties on their ancestors. Compare theme and density examples with var(), classes, and support limits.
- Sticky and Snapped Elements With CSS Scroll-State Queries
CSS scroll-state queries can style stuck headers and snapped cards, or hint at more scrollable content. See the container setup and fallback choices.
- CSS border-shape Can Draw Boxes clip-path Cannot
CSS border-shape lets borders and shadows follow a custom outline. Compare it with clip-path, try complete examples, and keep a usable rounded fallback.
- CSS corner-shape Goes Beyond Rounded Corners
CSS corner-shape adds bevels, scoops, and squircles to ordinary boxes. See how it works with border-radius, normal borders, and a rounded-card fallback.
- CSS Calculations With sibling-index() and sibling-count()
Use CSS sibling-index() and sibling-count() for staggered animations and position-based calculations, with working examples and browser support checks.
- Using HTML Attribute Values Inside CSS With attr()
CSS attr() reads HTML attributes for generated labels and typed calculations. Use working examples, check support, and handle missing or invalid values.
- Smarter Responsive Calculations With CSS round()
CSS round() snaps responsive values to useful steps. See rounding strategies, spacing scales, and a column calculation, with browser support checks.
- What the Browser Already Does Without a Framework
Before adding a frontend framework, check what HTML, CSS, forms, responsive images, preferences, and browser navigation already provide.
- Better Line Breaks With CSS balance and pretty
Use text-wrap balance for short headings and text-wrap pretty selectively for longer copy without hard-coded line breaks.
- Why 100vh Doesn’t Always Fit a Mobile Screen
Why 100vh can exceed the visible mobile screen. Choose svh, lvh, or dvh, let content grow, and put older Safari workarounds in their historical context.
- 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.