🐒 Normalize browsers' default style

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)

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

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)

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.

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

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

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

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.

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 👍

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.

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. 👋

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.

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?

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.

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.

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;
  }
}

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.

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):

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.