UA+

Different box model

We use the traditional box model, where the padding and border of the element is drawn inside and not outside the specified width and height. That makes combining relative and absolute units in properties like inline-size and block-size easier.

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

See the box model page on wikipedia for details.

Improve focus styles

Add spacing between content and its focus outline.

:focus-visible {
  outline-offset: 3px;
}

Disable text size adjustment

To improve readability on non-mobile optimized websites, browsers like mobile Safari increase the default font size when you switch a website from portrait to landscape. We don't want that for our optimized sites.

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

Read Your CSS reset needs text-size-adjust (probably) by Kilian Valhof for details.

Increase line height

Long paragraphs are easier to read if the line height is higher.

:where(html) {
  line-height: 1.5;
}

Add scrollbar gutter

Prevent the page from “jumping” when switching from a long to a short page.

:where(html) {
  scrollbar-gutter: stable;
}

See Day 25: scrollbar gutters in body and html for details.

Remove UA styles for h1s nested in sectioning content

Nesting h1s in section, articles, etc., shouldn't influence the styling of the heading since nesting doesn't influence semantics either.

:where(h1) {
  font-size: 2em;
  margin-block: 0.67em;
}

See Remove UA style for h1-h6 in section (et. al.) and hgroup for details.

Improve abbreviations with titles

The abbr element with the title isn't useful regarding accessibility because support is inconsistent and it's only accessible to some users. Still, it's commonly used. This rule shows a dotted underline on abbreviations in all browsers (there's a bug in Safari) and changes the cursor.

:where(abbr[title]) {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

Read Using abbr Element with title Attribute by Adrian Roselli for details.

Optimize mark element in Forced Colors Mode

The colors of the mark element don't change in Forced Colors Mode, which can be problematic. Use system colors instead.

@media (forced-colors: active) {
  :where(mark) {
    color: HighlightText;
    background-color: Highlight;
  }
}

See Tweaking Text Level Styles

Compare inputs in the live demo

Announce del, ins, and s to screen readers

With the exception of NVDA (2024.4.2), which announces "deletion", none of the common screen readers announces the s element.
Voice Over on macOS and iOS and Narrator don't announce ins and del.

Usually, screen readers not announcing text-level semantics is something we just accept, but devs using elements like <s> without knowing that they may not convey semantics is a common issue. We announce the start and end of stricken, inserted, and deleted content with pseudo-elements.

:where(del::before, del::after,
ins::before, ins::after,
s::before, s::after) {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

:where(s::before) {
  content: "stricken text start ";
}

:where(s::after) {
  content: " stricken text end";
}

:where(del::before) {
  content: "deletion start ";
}

:where(del::after) {
  content: " deletion end";
}

:where(ins::before) {
  content: "insertion start ";
 }

:where(ins::after) {
  content: " insertion end";
}

See Tweaking Text Level Styles

For languages other than English, you should provide translations, e.g.:

:lang(de) :where(s::before) {
  content: "Durchgestrichener Text Beginn ";
}

Avoid overflow caused by embedded content

:where(audio, iframe, img, svg, video) {
  max-block-size: 100%;
  max-inline-size: 100%;
}

Prevent fieldsets from causing overflow

Reset the default `min-inline-size: min-content` to prevent children from stretching fieldsets.

:where(fieldset) {
  min-inline-size: 0; 
}

Compare fieldsets in the live demo

See Bootstrap issue

Turn labels into block elements

Labels for inputs, selects, and textarea should be block elements.

:where(label):has(+:where(textarea, input, select)) {
  display: block; 
}

Increase the block-size of textareas

The default height of textareas is small. We increase it a bit.

:where(textarea:not([rows])) {
  min-block-size: 6em;
}

Inherit font styling in form elements

buttons, inputs, selects, and textarea should have the same font family and size as the rest of the page.

:where(button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
}

Normalize search input styles

Remove the rounded corners of search inputs on macOS and IOS and normalize the background color

:where([type="search"]) {
  -webkit-appearance: textfield;
}
 
/* iOS only */
@supports (-webkit-touch-callout: none) {
  :where([type="search"]) {
    border: 1px solid -apple-system-secondary-label;
    background-color: canvas;
  }
}

Maintain direction in some input types

Some input types should remain left-aligned in right-to-left languages, but only if the value isn't empty because the placeholder should be right-aligned.

:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
  direction: ltr;
}

See rtlstyling.com

Improve table styling

With the default styling, tables are hard to scan. These rules add padding and collapsed borders.

:where(table) {
  border-collapse: collapse;
  border: 1px solid;
}

:where(th, td) {
  border: 1px solid;
  padding: 0.25em 0.5em;
}

Increase specificity of [hidden]

Make it harder to accidentally unhide elements with the [hidden] attribute while still maintaining the until-found functionality.

[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

Fading dialogs

Add fade in and fade out transitions for the dialog element and backdrops and reduce the opacity of the backdrop.

:where(dialog)::backdrop {
  background: oklch(0% 0 0 / 0.3);
}

:where(dialog),
:where(dialog)::backdrop {
  opacity: 0;
  transition: opacity 300ms ease-out, display 300ms allow-discrete,
  overlay 300ms allow-discrete;
}

:where(dialog[open]),
:where(dialog[open])::backdrop {
  opacity: 1;
}

@starting-style {
  :where(dialog[open]),
  :where(dialog[open])::backdrop {
    opacity: 0;
  }
}