normalize.css
Differences from - Smaller
- Includes only normalizations for the latest Chrome, Firefox, and Safari
- Sets
box-sizing: border-box
- Improves consistency of default fonts
- Sets a more readable tab size
- Fully tested
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
- sass-extras - Useful utilities for working with Sass
Provide system fonts
Are there any downsides to setting this by default?
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:
Thoughts?
(If you 👎 please also share your thoughts on why)
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
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:
Using
:root
so users can easily override it on a per-element basis.Thoughts?
(If you 👎 please also share your thoughts on why)
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.
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
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 needbox-sizing: content-box
on a specific element, and having to write out:And then realizing that's incorrect, it should actually be this:
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 thebox-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 hereAdd some tests
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
Backers (Total: $40.00)
Submitted pull Requests
Tips
IssueHunt has been backed by the following sponsors. Become a sponsor
@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 👍
Improvements
Hello, First of all, love this project!
I have a couple of personal suggestions tough:
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. 👋
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: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?
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.
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.
Only show dotted underline on abbr[title] if @media (supports: hover) media query
Currently we have this:
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:
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.
Outdated `:-moz-focusring` makes form elements less accessible
The package applies an outdated inaccessible focus ring to form elements in firefox:
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.