Normal CSS

Normalize browser's styles ~600B.

Consistency

Consistent abbreviation styles

Fixed the inconsistent appearance of <abbr> across browsers.

abbr[title] {
    text-decoration: underline dotted;
}

Consistent control styles

Fixed the inconsistent appearance of controls across browsers.

::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
 
:-moz-ui-invalid {
    box-shadow: none;
}
 
progress {
    vertical-align: baseline;
}
 
[type="search"] {
    appearance: textfield;
    outline-offset: -2px;
}
 
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
}
 
::-webkit-search-decoration {
    -webkit-appearance: none;
}
 
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

Consistent horizontal lines

Fixed the inconsistent appearance of horizontal lines across browsers.

hr {
    height: 0;
    color: inherit;
}

Consistent bold styles

Fixed the inconsistent font weight of <b> and <strong> across browsers.

b, strong {
    font-weight: bolder;
}

Consistent code styles

Fixed the inconsistent font size of code-related elements across browsers.

pre,
code,
kbd,
samp {
    font-size: 1em;
}

Consistent small styles

Fixed the inconsistent font size of <small> across browsers.

small {
    font-size: 80%;
}

Consistent superscript and subscript styles

Fixed the inconsistent appearance of superscripts and subscripts across browsers.

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

Consistent table styles

Fixed the inconsistent appearance of tables across browsers.

table {
    text-indent: 0;
    border-color: inherit;
}

Intuitive sizing control

Control the size of elements more intuitively, including content and padding, without worrying about the impact of padding and borders on dimensions.

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

Elimination

Remove anchor styles

The <a> element usually serves as more than just an inline text link; it could be a button, navigation, or even a card.

Removing its default underline and inheriting the parent color allows you to start with a clean style.

a {
    color: inherit;
    text-decoration: none;
}

Remove control styles

Inherit the font family, size, and color of control elements from the parent's settings and remove spacing and background as a cleaner starting point.

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;
}

Remove default borders and preset to solid style

Remove borders from all elements to give you the freedom to fully customize the appearance of your elements, preset to the most used solid style.

*, ::before, ::after {
    border-width: 0;
    border-style: solid;
}

Remove default spacing

Setting margins and padding to zero allows you to customize the appearance and spacing of elements without worrying about the impact of default browser styles.

body, blockquote, dl, dd, hr, figure, p, pre, h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
 
td, legend, fieldset {
    padding: 0;
}
 
ul, ol {
    margin: 0;
    padding: 0;
}

Remove heading styles

Remove heading styles as headless semantic tags. Typically you won't rely on the browser's default size and font weight.

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

Remove list styles

Remove the ul styles while retaining it as a commonly used structural markup for elements like the navbar and menu.

ul {
    list-style: none;
}

Remove tap highlight color

You should customize the tap highlight color based on current UI features rather than relying on the default.

body {
    -webkit-tap-highlight-color: transparent;
}

The -webkit-tap-highlight-color CSS property controls the highlight color that appears when an element is tapped on a mobile device, such as Safari and some WebKit-based mobile browsers.

Eliminate click delays

Disable double-click to zoom on links, input fields, and buttons to improve responsiveness for touch devices.

a, button {
    touch-action: manipulation;
}

An instantly responsive UI enables users to confidently press each button without pausing and waiting for a response. To learn more about the influence of human reaction times and web performance, explore the introduction to RAIL.

Disabling user-scalable=no can harm user experience, accessibility, and mobile-friendliness and have negative SEO implications.

<meta name="viewport" content="width=device-width, user-scalable=no">

Improvement

Better text rendering and appearance

Ensure consistent, clear, high-quality text and font appearance across various browsers.

* {
    text-rendering: geometricPrecision;
}
 
body {
    line-height: 1.2;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

Readable tab size

Setting the tab size to 4 makes the code more structured and easier to read.

body {
    -moz-tab-size: 4;
    tab-size: 4;
}

Responsive friendly media elements

Preset the maximum width of media-related elements to the parent container to make them responsive.

Before

After

img, svg, video, canvas, audio, iframe, embed, object {
    max-width: 100%;
    display: block;
}

Browsers default these elements to inline display. block can be centered using common tricks like margin: auto.

For media that needs to overflow the container, you can cancel the maximum width by selecting descendants:

<article class="max-w:none_:where(img)">…</article>