Skip to content
This repository has been archived by the owner on May 25, 2020. It is now read-only.

Latest commit

 

History

History
78 lines (53 loc) · 3.15 KB

README.md

File metadata and controls

78 lines (53 loc) · 3.15 KB
Raw

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.