CSS Reset
Tended:
Status: sprout
The purpose of a CSS reset is to:
- ▪ Remove default legacy styles: useful in the early days on the Internet but no longer required. For example, removing the gap below image elements.
- ▪ Define default styles: styles that will be most common on your website. For example, if the majority of text on the site is black, set that color here.
/reset.css
/* Use a more intuitive box-sizing model */ *, *::before, *::after { box-sizing: border-box; } /* Remove all margins and padding */ * { margin: 0; padding: 0; } /* Only show focus outline when the user is tabbing (not when clicking) */ *:focus { outline: none; } *:focus-visible { outline: 1px solid blue; } /* Prevent mobile browsers increasing font-size */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Allow percentage-based heights */ /* Setting width: 100% isn't required because it is a default for block-level elements (html and body are block level) */ html, body { height: 100%; } body { /* Prevent the rubber band effect when the user scrolls to the top or bottom of the page (WebKit only) */ overscroll-behavior: none; /* Prevent the browser from synthesizing missing typefaces */ font-synthesis: none; color: black; /* UI controls color (example: range input) */ accent-color: black; /* Because overscroll-behavior: none only works on WebKit, a background color is set that will show when overscroll occurs */ background: white; } /* Remove unintuitive behaviour such as gaps around media elements. */ img, picture, video, canvas, svg, iframe { display: block; } /* Avoid text overflow */ h1, h2, h3, h4, h5, h6, p, strong { overflow-wrap: break-word; } a { text-decoration: none; } ul, ol { list-style: none; } input { border: none; } input, button, textarea, select { font: inherit; } button:disabled { color: inherit; } /* Create a root stacking context (only when using frameworks like Next.js) */ #__next { isolation: isolate; }
Most font specific properties (font-family
, line-height
, ...) aren't set here.
This is because I use Capsize.
Due to the added complexity, font properties are moved to a seperate file.
It is common to see -webkit-font-smoothing: antialiased;
in CSS resets.
This property has been deprecated so no longer required.