CSS & HTML Tips,
    Made Simple

    Practical web development tips, snippets, and template tricks you can use today.

    How to animate elements along an SVG path using CSS offset-path
    CSS8 min

    How to animate elements along an SVG path using CSS offset-path

    Explains how to use the CSS Motion Path API to move elements along complex vector paths without JavaScript. Covers responsive path scaling and controlling element rotation along the curve.

    Editor: Paul Radford
    Oct 11, 2026
    animationfrontend
    The difference between image loading lazy and decoding async in HTML
    HTML7 min

    The difference between image loading lazy and decoding async in HTML

    Clarifies the distinct performance roles of the loading and decoding attributes on HTML images. Explains when to defer network requests versus when to defer main-thread image decoding.

    Editor: Paul Radford
    Sep 24, 2026
    frontend
    Fixing anchor link offset behind sticky headers with CSS scroll-padding
    CSS8 min

    Fixing anchor link offset behind sticky headers with CSS scroll-padding

    Explains how to use scroll-padding and scroll-margin to prevent anchor links from scrolling underneath fixed or sticky headers. Replaces old JavaScript offset calculations with native CSS.

    Editor: Paul Radford
    Sep 16, 2026
    layoutfrontend
    How to use Declarative Shadow DOM for server-rendered web components
    HTML9 min

    How to use Declarative Shadow DOM for server-rendered web components

    Declarative Shadow DOM allows developers to attach a shadow root to a custom element using only HTML, bypassing the need for client-side JavaScript execution. This article explains how to use the shadowrootmode attribute on the <template> element to enable server-side rendering for web components. The key takeaway is how this approach eliminates layout shifts and flashes of unstyled content in component-heavy applications.

    Editor: Paul Radford
    Sep 7, 2026
    frontend
    Modern CSS Layout: Grid, Container Queries & Positioning
    CSS11 min

    Modern CSS Layout: Grid, Container Queries & Positioning

    A guide to the CSS layout features that matter now: container queries, subgrid, masonry, anchor positioning, and logical properties.

    Editor: Paul Radford
    Aug 23, 2026
    layoutcontainer-queriesanchor-positioninglogical-properties
    Why native lazy loading hurts LCP and how to fix it
    Quick Tip8 min

    Why native lazy loading hurts LCP and how to fix it

    Analyzes the performance penalty of using loading="lazy" on above-the-fold images. Demonstrates how to properly combine eager loading for hero images with lazy loading for off-screen content.

    Editor: Paul Radford
    Aug 10, 2026
    frontend
    Optimizing LCP with the HTML fetchpriority attribute
    HTML7 min

    Optimizing LCP with the HTML fetchpriority attribute

    Not every image on a page deserves the same loading priority from the browser's default heuristics. Here's when to mark the hero image high, and when deprioritizing the rest helps LCP more.

    Editor: Paul Radford
    Jul 26, 2026
    frontend
    How to use the advanced CSS attr() function for types and units
    CSS7 min

    How to use the advanced CSS attr() function for types and units

    attr(data-color color, #333) feeding straight into background-color sounds like it already ships, but as of early 2026 it's spec-only. Here's what attr() actually does today, and what's coming.

    Editor: Paul Radford
    Jul 26, 2026
    selectorsfrontend