Skip to content

default-styles.md

Latest commit

 

History

History
510 lines (388 loc) · 8.46 KB

default-styles.md

File metadata and controls

510 lines (388 loc) · 8.46 KB

Default Styles

This section forms the normalization and ergonomics foundation of browserux.css. It covers base HTML elements, from spacing reset to print styles.

Spacing reset

Removes all default browser margin and padding for a predictable starting point:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

Box model

Applies border-box globally so that borders and paddings are included in calculated dimensions:

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

html {
  box-sizing: border-box;
}

Inheriting from html allows third-party libraries to define their own box model without conflict.

HTML root element

html {
  font-family: var(--bux-typo-font-family);
  font-size: 62.5%;
  min-height: 100%;
  overflow-y: scroll;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  tab-size: 4;
  -moz-tab-size: 4;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
Property Role
font-size: 62.5% Sets 1rem = 10px for easier calculations (1.6rem = 16px)
min-height: 100% Flex/grid layouts with 100vh without blank page effect
overflow-y: scroll Fallback: keeps scrollbar visible, prevents layout shifts
scrollbar-gutter: stable Modern solution: reserves scrollbar space without forcing it visible
-webkit-tap-highlight-color: transparent Removes the grey/blue flash on tap in Android/iOS
text-size-adjust: 100% Prevents Safari iOS from changing text size on rotation
tab-size: 4 Readable indentation in pre / code blocks

overflow-y: scroll and scrollbar-gutter: stable both solve the same problem (layout shift caused by the scrollbar) but for different browsers. Both rules are kept for full coverage.

overscroll-behavior is no longer applied globally on html. While useful for preventing scroll chaining in specific UI patterns, applying it at the page level also changes native browser behaviors such as pull-to-refresh or gesture navigation in some environments. It is better used deliberately on scrollable components like dialogs, drawers, and side panels.

Sections (body)

body {
  background: var(--bux-page-bg);
  color: var(--bux-page-color);
  font-size: var(--bux-typo-font-size);
  line-height: var(--bux-typo-line-height);
  min-height: 100%;
  overflow-wrap: break-word;
}
  • background and color apply the theme on load (with automatic dark mode support).
  • min-height: 100% : ensures compatibility with sticky footer layouts.
  • overflow-wrap: break-word : prevents long words or URLs from overflowing their container.

Headings

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

text-wrap: balance distributes heading text more evenly across multiple lines, preventing unsightly orphans. Particularly effective on narrow viewports.

Content grouping

Horizontal rule (hr)

Replaces the native 3D border with a clean separator that adapts to the current theme:

hr {
  border: none;
  border-top: 1px solid currentColor;
  color: inherit;
  height: 0;
  overflow: visible;
}

Horizontal overflow

Prevents block quotes and code blocks from exceeding their container:

blockquote,
pre {
  max-width: 100%;
}

Monospace

Applies a consistent monospace font for pre blocks:

pre {
  font-family: var(--bux-typo-font-family-mono);
}

Text semantics

Links (a)

a {
  outline: 0;
  text-decoration: none;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.2em;
  touch-action: manipulation;
}
  • text-decoration: none : removes underline (reapply in your styles if needed).
  • text-underline-offset: 0.2em : offsets the underline to avoid collisions with descenders.
  • touch-action: manipulation : removes the 300ms tap delay on mobile.

Abbreviations and definitions

abbr[title],
dfn[title] {
  cursor: help;
  text-decoration: underline dotted;
}

Bold

b,
strong {
  font-weight: bolder;
}

Code and keyboard

code,
kbd,
samp {
  font-family: var(--bux-typo-font-family-mono);
}

code {
  max-width: 100%;
  white-space: pre-wrap;
}

Small text

small {
  font-size: 80%;
}

Subscript and superscript

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

Embedded content

Inline media alignment

Removes the space below inline media caused by default baseline alignment:

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

Responsive media

img,
svg,
video {
  height: auto;
  max-width: 100%;
}

Image selection removal

img::selection {
  background-color: var(--bux-transparent);
}

SVG theming

svg {
  fill: currentColor;
}

SVGs automatically inherit the current text color, simplifying theming (dark mode included).

Touch ergonomics on clickable areas

area {
  touch-action: manipulation;
}

Tabular data

Browser bug fixes

table {
  border-color: inherit;
  text-indent: 0;
}
  • border-color: inherit : fixes border color inheritance in Chrome and Safari.
  • text-indent: 0 : removes automatic indentation in some WebKit versions.

Overflow prevention

table,
td {
  max-width: 100%;
}

Forms

Fieldset & Legend

fieldset {
  border: none;
  padding: 0;
}

legend {
  padding: 0;
}

Buttons

button {
  appearance: none;
  border: none;
  background: none;
  user-select: none;
}

Mobile responsiveness

button,
input,
label,
select,
textarea {
  touch-action: manipulation;
}

Font inheritance

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

Cursors

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
label[for],
select {
  cursor: pointer;
}

[disabled],
[aria-disabled="true"] {
  cursor: not-allowed;
}

iOS / Safari compatibility

button,
[type="button"],
[type="reset"],
[type="submit"] {
  appearance: button;
  -webkit-appearance: button;
}

Overflow handling

input,
textarea {
  max-width: 100%;
}

Text selection allowed

input,
select,
textarea {
  user-select: text;
}

Search fields

[type="search"] {
  appearance: textfield;
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

Auto-resizing textarea

textarea {
  field-sizing: content;
  resize: vertical;
}

field-sizing: content automatically adjusts the textarea height to its content, without JavaScript. resize: vertical is kept as a fallback.

Requires Chrome 123+, Edge 123+. Firefox and Safari do not yet support field-sizing.

Firefox fixes

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-ui-invalid {
  box-shadow: none;
}

Interactive elements

<summary> rendering

summary {
  display: list-item;
}

Text selection on interactive buttons

[role="button"],
details[open] summary,
summary {
  user-select: none;
}

[hidden] element

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

The !important is intentional: it guarantees that the semantic meaning of the hidden state always overrides potential specificity conflicts.

The :where(:not([hidden="until-found"])) part is equally intentional:

  • Classic hidden must stay truly hidden, even if another stylesheet sets display: block, flex, or grid.
  • hidden="until-found" must keep its native browser behavior so content can still be revealed by "Find in page" or fragment navigation.

This keeps the defensive reset while preserving a modern HTML capability that would otherwise be broken by a blanket [hidden] { display: none !important; } rule.

Print

Removes backgrounds, shadows, and decorative colors for clean print output, and displays link URLs:

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img,
  figure {
    page-break-inside: avoid;
  }
}