normalize.scss v0.1.0¶ ↑
Normalize.scss is the SCSS version of normalize.css, a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards.
View the normalize.css test file
Install¶ ↑
-
npm:
npm install --save normalize.scss
-
Component(1):
component install guerrero/normalize.scss
-
Bower:
bower install --save normalize.scss
-
Download: Go to this link, press right-click on the page and choose “Save as…”
No other styles should come before Normalize.scss.
It's recommendable to modify normalize.scss
to suit it to your project
What does it do?¶ ↑
-
Preserves useful defaults, unlike many CSS resets.
-
Normalizes styles for a wide range of elements.
-
Corrects bugs and common browser inconsistencies.
-
Improves usability with subtle improvements.
-
Explains what code does using detailed comments.
Browser support¶ ↑
-
Google Chrome (latest)
-
Mozilla Firefox (latest)
-
Mozilla Firefox 4
-
Opera (latest)
-
Apple Safari 6+
-
Internet Explorer 8+
Normalize.css v1 provides legacy browser support (IE 6+, Safari 4+), but is no longer actively developed.
Extended details¶ ↑
Additional detail and explanation of the esoteric parts of normalize.css.
pre, code, kbd, samp
¶ ↑
The font-family: monospace, monospace
hack fixes the inheritance and scaling of font-size for preformated text. The duplication of monospace
is intentional. Source.
sub, sup
¶ ↑
Normally, using sub
or sup
affects the line-box height of text in all browsers. Source.
svg:not(:root)
¶ ↑
Adding overflow: hidden
fixes IE9's SVG rendering. Earlier versions of IE don't support SVG, so we can safely use the :not()
and :root
selectors that modern browsers use in the default UA stylesheets to apply this style. SVG Mailing List discussion
input[type="search"]
¶ ↑
The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control font
, padding
, border
, or background
. In Chrome and Safari on Windows you can't control border
properly. It will apply border-width
but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield
addresses these issues without removing the benefits of search inputs (e.g. showing past searches).
legend
¶ ↑
Adding border: 0
corrects an IE 8–11 bug where color
(yes, color
) is not inherited by legend
.
Acknowledgements¶ ↑
Normalize.scss is a project by Alex Guerrero based on normalize.css from Nicolas Gallagher, co-created with Jonathan Neal.