• 1.General

  • 1.1 - A more intuitive box-sizing, that preserves inheritance

    
    

    html {
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    

  • 1.2 - Prevents font inflating on mobile Safari

    
    

    html {
      -moz-text-size-adjust: none;
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
    }
    

  • 1.3 - Setting body defaults

    
    

    body {
      min-block-size: 100vh;
      min-block-size: 100svh;
      min-inline-size: 320px;
      margin: 0;
      line-height: calc(1ex / 0.32);
    }
    

    • Read more about the ex-unit used for line-height.

    • 1.3.1 - Turning off "subpixel anti-aliasing" in MacOS browsers

      
      

      body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      

    
    

• 2. Text

  • 2.1 - Adding optimal line height, and setting vertical rhythm

    
    

    • 2.1.1 Paragraphs

      p {
          margin-inline: 0;
          margin-block-start: 0;
          margin-block-end: 0;
        }
      
      p:not(:last-child) {
          margin-block-end: calc(1ex / 0.32);
        }
      

      
      

    • 2.1.2 Headings

      h1,
      .h1 {
        line-height: calc(1ex / 0.42);
        margin-inline: 0;
        margin-block-start: 0;
        margin-block-end: calc(1ex / 0.42);
      }
      

      Rest of headings' style
      

      h2,
      .h2 {
        line-height: calc(1ex / 0.42);
        margin-inline: 0;
        margin-block-start: 0;
        margin-block-end: calc(1ex / 0.42);
        }
      
      h3,
      .h3 {
        line-height: calc(1ex / 0.38);
        margin-inline: 0;
        margin-block-start: 0;
        margin-block-end: calc(1ex / 0.38);
      }
      
      h4,
      .h4 {
        line-height: calc(1ex / 0.37);
        margin-inline: 0;
        margin-block-start: 0;
        margin-block-end: calc(1ex / 0.37);
      }
      

  • 2.2 - Wrapping of long strings that could cause overflow, f.e. URLs

    
    

    :where(p, h1, h2, h3, h4, h5, h6) {
      overflow-wrap: break-word;
      hyphens: auto;
    }
    

    CSS-tricks article about the differences between overflow-wrap¹, word-break² and the non-standard word-wrap³.

  • 2.3 - Improve line wrapping

    
    

    :where(h1, h2, h3, h4, h5, h6, blockquote) {
      text-wrap: balance; // wrapping lines roughly the same length
      white-space: unset;
    }
    

    
    

    p,
    li,
    figcaption {
      text-wrap: pretty; // adding visual balance by removing orphans
      max-inline-size: 65ch; //*
    }
    

    • Eric Meyer about the ch unit.

  • 2.4 - Setting underline not to interfere with descendants, and neutralize link colors

    
    

    a {
      text-decoration-skip-ink: auto;
      color: currentColor;
      text-underline-offset: 0.15em;
    }
    

  • 2.5 - Dealing with punctuation that offsets text

    
    
    • A more visual (video) representation by Dmitry Mayorov.
    
    
    • Can I use hanging-punctuation ?
      As of June 6, 2025, only Safari TP and Safari on iOS support it.
    
    

    blockquote {
      text-indent: -0.4em;
    }
    
    @​supports (hanging-punctuation: first) {
      html {
        text-indent: 0;
        hanging-punctuation: first allow-end last;
      }
    }
    
    pre {
      hanging-punctuation: none;
    }
    

• 3. Media

  • 3.1 - Adding media defaults

    
    

    img,
    picture,
    video,
    canvas,
    svg {
      display: block;
      max-inline-size: 100%;
      height: auto;
    }
    

  • 3.2 - Render color of inline svg's as font color

    
    

    :where(svg) {
      fill: currentColor;
    }
    
    :where(svg):where(:not([fill])) {
      stroke: currentColor;
      fill: none;
    }
    

  • 3.3 - Adding distinctive alt text style, and maintaining aspect-ratio

    
    

    img {
      font-style: italic;
      object-fit: cover;
    }
    

• 4. Form

  • 4.1 - Inherit font properties from body

    
    

    input,
    button,
    textarea,
    select {
      color: currentColor;
      font: inherit;
      letter-spacing: inherit; //*
      word-spacing: inherit; //*
    }
    

    • Jake Lazaroff about letter- and word-spacing.

  • 4.2 - Increase textarea size for coarse pointers (e.g fingers)

    
    

    textarea:not([rows]) {
      min-height: 10em;
    }
    

  • 4.3 - Control textarea resizing

    
    

    :where(textarea) {
      resize: vertical;
    }
    @supports (resize: block) {
      :where(textarea) {
        resize: block;
      }
    }
    

  • 4.4 - Disable cursor for disabled buttons

    
    

    :where(
      button,
      button[type],
      input[type='button'],
      input[type='submit'],
      input[type='reset']
      )[disabled] {
        cursor: not-allowed;
    }
    

• 5. Lists

  • 5.1 - Fix Safari bug on VoiceOver

    
    

    :where(ul, ol)[role='list'] {
      list-style: none;
    }
    

  • 5.2 - Align text vertically and setting vertical rhythm

    
    

    :where(ul, ol)[role='list'] {
      margin-block-start: 0;
      padding: 0;
    }
    

• 6. Table

  • 6.1 - Improves table rendering consistency

    
    

    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    

  • 6.2 - Align text in table cells

    
    

    th,
    td {
      text-align: start;
      vertical-align: top;
    }
    

• 7. Miscellaneous

  • 7.1 - Adding distance above any anchored element

    
    

    :target {
      scroll-margin-block: 2ex;
    }
    

    • Kevin Powell video about scroll-padding.

  • 7.2 - Avoid markers altering the line-height in Firefox

    
    

    ::marker {
      line-height: 0;
    }
    

  • 7.3 - Make it clear that interactive elements are interactive

    
    

    :where(
      a[href],
      area,
      button,
      input:where(
      [type='button'],
      [type='submit'],
      [type='reset'],
      [type='checkbox'],
      [type='radio']
      ),
      label[for],
      select,
      summary,
      [tabindex]:not([tabindex_='-'])
    ) {
     cursor: pointer;
     touch-action: manipulation;
    }
    
    :where(input[type='file']) {
      cursor: auto;
    }
    
    :where(input[type='file'])::-webkit-file-upload-button,
    :where(input[type='file'])::file-selector-button {
      cursor: pointer;
    }
    

• 8. User queries

  • 8.1 - Allow transitions between intrinsic sizes and keyword values (e.g from and to height: auto when no explicit width is set )

    
    

    @media (prefers-reduced-motion: no-preference) {
     html {
      interpolate-size: allow-keywords;
     }
    }
    

    • If animations need mathematical calculations use calc-size.

  • 8.2 - Disables motion for users who prefer reduced motion and on devices with a slow screen refresh rate

    
    

    @media screen and (prefers-reduced-motion: reduce), (update: slow) {
      * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }
    

    • Accessing prefers-reduced-motion with Javascript.

  • 8.3 - Smooth scrolling

    
    

    html {
      scroll-behavior: smooth;
    }
    

  • 8.4 - Animate focus outline

    
    

    @media (prefers-reduced-motion: no-preference) {
      :focus-visible {
        transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
      }
    
      :where(:not(:active)):focus-visible {
        transition-duration: 0.25s;
      }
    }
    

Footnotes

1. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap ↩

2. https://developer.mozilla.org/en-US/docs/Web/CSS/word-break ↩

3. https://caniuse.com/?search=word-wrap ↩