🐒 Normalize browsers' default style

  • By Sindre Sorhus
  • Last update: Dec 30, 2022
  • Comments: 16

Differences from normalize.css

All credit should go to normalize.css. I just removed some cruft and added some improvements. If you have questions about the source, check out the original source and this for details.

The goal of this project is to make itself obsolete.

Browser support

  • Latest Chrome
  • Latest Firefox
  • Latest Safari

Install

$ npm install modern-normalize
Download
CDN

Usage

@import 'node_modules/modern-normalize/modern-normalize.css';

or

<link rel="stylesheet" href="node_modules/modern-normalize/modern-normalize.css">

FAQ

Can you provide Sass, Less, etc, ports?

There's absolutely no reason to have separate ports for these. They are just CSS supersets and can import CSS directly.

Related

Github

https://github.com/sindresorhus/modern-normalize

Comments(16)

  • 1

    Provide system fonts

    Are there any downsides to setting this by default?

    body {
    	font-family:
    		'-apple-system',
    		'system-ui',
    		'BlinkMacSystemFont',
    		'Segoe UI',
    		'Roboto',
    		'Helvetica Neue',
    		'Arial',
    		'sans-serif',
    		'Apple Color Emoji',
    		'Segoe UI Emoji',
    		'Segoe UI Symbol';
    }
    

    Users then get good defaults but can override it with their own body selector if they want.

    Alternatively, if this gets a lot of resistance, we could provide a CSS variable, so users who want it can just do:

    body {
    	font-family: var(--system-fonts);
    }
    

    Thoughts?

    (If you 👎 please also share your thoughts on why)

  • 2

    Add acceptance tests

    A starting point to create acceptance tests and to validate outdated styles (will close #1, close #22)


    IssueHunt Summary

    Referenced issues

    This pull request has been submitted to:


    IssueHunt has been backed by the following sponsors. Become a sponsor

  • 3

    Fix `tab-size`

    I would like to change the tab-size from 8 to 4. I realize it's not strictly a normalization, as all browsers use 8, but it would improve the experience for everyone, so I think it's worth an exception. 8 is just a really really bad default. It has, for example, made tab-indented code on the web unreadable (https://github.com/isaacs/github/issues/170).

    I propose adding the following:

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

    Using :root so users can easily override it on a per-element basis.

    Thoughts?

    (If you 👎 please also share your thoughts on why)

  • 4

    Remove more outdated styles

    I've already removed a lot of outdated styles (https://github.com/sindresorhus/modern-normalize/commit/c2e7aa3009b2a2391fabca66326a88bbffd16acf https://github.com/sindresorhus/modern-normalize/commit/b52144d04b756539ac5ac8734213ed812f349d2a), but I'm sure there are more things that are fixed in browsers by now. We should go through the styles and check whether they're still valid in latest Chrome and Firefox.

  • 5

    Differences from normalize, 'Doesn't force font-family...' is no longer valid

    As of recent, Normalize.css now uses font-family: inherit; for input elements.

    https://github.com/necolas/normalize.css/commit/ca8a357baf6e724ab84843ac4607f8d2024cf0f8

  • 6

    Don't inherit box-sizing by default

    We previously had * { box-sizing: inherit } in our design system, and chose to remove it because it caused more problems than it fixed. It's rather annoying to need box-sizing: content-box on a specific element, and having to write out:

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

    And then realizing that's incorrect, it should actually be this:

    .target { box-sizing: content-box; }
    .target::before, .target::after, .target > *, .target > *::before, .target > *::after  { box-sizing: border-box; }
    

    The only time where having it this way actually helped was the times when a third-party widget expected to have content-box by default (and for some reason didn't set it itself). Which was actually pretty rare occurrence these days, and the box-sizing: inherit doesn't really help because you still need to debug why the layout is all wrong.

    But when content-box was needed without being set, it was much easier to either wrap the third party component in a utility class that switched box models, or to just apply the style to the widget that required it with notes on why it was needed.

    All in all, we found that * { box-sizing: inherit } does more harm than good. So I thought I'd suggest the change here

  • 7

    Add some tests

    Issuehunt badges

    It could be useful for this project to stay up to date with the default values of the declarations which are normalized here within the supported browsers.

    This should be possible by testing the output of window.getComputedStyle() against what is expected from each browser, and the results can be used to remove rules which are no longer needed in recent versions.

    If we want to be more ambitious, it can potentially also be used to find new differences between other elements that should potentially be normalized as well.


    IssueHunt Summary

    rafaelfbs rafaelfbs has been rewarded.

    Backers (Total: $40.00)

    Submitted pull Requests


    Tips


    IssueHunt has been backed by the following sponsors. Become a sponsor

  • 8

    @import: dependency was not found

    I'm using webpack and the modern-normalize.css was not found with the import path provided in the readme. I had to use the tilde character to point to the node_modules folder. I thought it would be nice to share this tip with others.

    Thanks for this normalizing style-sheet. It's perfect for projects where I don't care about non evergreen browsers 👍

  • 9

    Improvements

    Hello, First of all, love this project!

    I have a couple of personal suggestions tough:

    • Maybe it is an idea to add an pre compiled minified version.
    • Maybe a scss/less version.
    • Add to common cdn providers (don't know it this is easy).
    • Maybe for the people that live under a stone add it to bower.
  • 10

    More accessible line height

    Hey, first of all, nice project.

    I am just wonder why you set the line-height to 115% (https://github.com/sindresorhus/modern-normalize/blob/master/modern-normalize.css#L25)? Is it because the default leading for most browsers is between 110% to 120%?

    The line height typically recommended in typography is 120–145%. Do you have a special reason? Otherwise I would recommend something like 130%, because it still looks nice, but greater leading is actually a good practise for accessibility. You could even go all the way up to 150% which is the recommended leading by the W3C accessibility guidelines.

    I would think if we want to normalize, we could also try to normalize not just to the defaults, but also a little bit in the direction of an overall accessible web. Looking forward to your thoughts. 👋

  • 11

    box-sizing: inherit

    The box-sizing: border-box; fix is one of the first normalizing techniques I use when starting from scratch. But since I discovered the improvement by CSS-Tricks and Paul Irish improved the original post, this is the best modern recommendation:

    /* apply a natural box layout model to all elements, but allowing components to change */
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    

    So, my suggestion here is to update the style to follow that. I can do a PR if needed.

  • 12

    , and

    What I'm always doing is img display block and max-width 100%. I'm sure this can only be added to a new major version.

    Even if you don't added I'm curious what do you think why it should not be added or what you prefer as defaults for img tag?

  • 13

    heading and paragraph margin top

    Would it be worth setting all h1 and p etc. tags to have 0 margin on the top?

    By default Chrome sets "margin-block-start: 0.67em;" on to heading elements and "margin-block-start: 1em;" on to p.

    I find it pretty useless as the margin top collapses away if the element is preceded by another heading or paragraph element. But also the first heading or paragraph that you add to any container that has padding ends up too far away from the top.

    image

    For context, the popular (yet older) "normalize.css" does not get rid of the margin top, but Bootstrap's "reboot" does get rid of it.

  • 14

    Only show dotted underline on abbr[title] if @media (supports: hover) media query

    Currently we have this:

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

    This means that abbr tags have dotted underline even on iPhone and iPad where its impossible to see the title as browser doesn't support hover - even with a mouse connected.

    I propose to change this to:

    @media (hover: none) {
      abbr[title] {
        text-decoration: none;
      }
    }
    
    @media (hover: hover) {
      abbr[title] {
        text-decoration: underline dotted;
      }
    }
    
  • 15

    Replace deprecated box-sizing fix by a better one

    see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/. Even Paul Irish, original author of the fix currently part of modern-normalize, has agreed on this and edited his origjnal post back from 2021: https://www.paulirish.com/2012/box-sizing-border-box-ftw/

    This will also fix https://github.com/sindresorhus/modern-normalize/issues/48.

  • 16

    Outdated `:-moz-focusring` makes form elements less accessible

    The package applies an outdated inaccessible focus ring to form elements in firefox:

    /**
    Restore the focus styles unset by the previous rule.
    */
    
    :-moz-focusring {
    	outline: 1px dotted ButtonText;
    }
    

    This thin dotted gray line is inaccessible, outdated. Browsers have updated their default focus styles to be much more accessible, including Firefox.

    Here an unstyled, focused textarea (without modern-normalize):

    image

    https://codepen.io/rickymetz/pen/ZrbXqJ

    It would be fantastic if modern-normalize could undo the custom application of an inaccessible legacy Firefox focus style.