About normalize.css
…things by Nicolas Gallagher
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
Normalize.css is currently used in some form by Twitter Bootstrap,HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks, toolkits, and sites.
Overview
Normalize.css is an alternative to CSS resets. The project is the product of 100′s of hours of extensive research by @necolas and @jon_neal on the differences between default browser styles.
The aims of normalize.css are as follows:
- Preserve useful browser defaults rather than erasing them.
- Normalize styles for a wide range of HTML elements.
- Correct bugs and common browser inconsistencies.
- Improve usability with subtle improvements.
- Explain the code using comments and detailed documentation.
It supports a wide range of browsers (including mobile browsers) and includes CSS that normalizes HTML5 elements, typography, lists, embedded content, forms, and tables.
Despite the project being based on the principle of normalization, it uses pragmatic defaults where they are preferable.
Normalize vs Reset
It’s worth understanding in greater detail how normalize.css differs from traditional CSS resets.
Normalize.css preserves useful defaults
Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common typographic elements.
When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.
Normalize.css corrects common bugs
It fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements, correctingfont-size
for preformatted text, SVG overflow in IE9, and many form-related bugs across browsers and operating systems.
For example, this is how normalize.css makes the new HTML5 search
input type cross-browser consistent and stylable:
/*
* 1. Addresses appearance set to searchfield in S5, Chrome
* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in S5, Chrome on OS X
*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
Resets often fail to bring browsers to a level starting point with regards to how an element is rendered. This is particularly true of forms – an area where normalize.css can provide some significant assistance.
Normalize.css doesn’t clutter your debugging tools
A common irritation when using resets is the large inheritance chain that is displayed in browser CSS debugging tools.
This is not such an issue with normalize.css because of the targeted styles and the conservative use of multiple selectors in rulesets.
Normalize.css is modular
The project is broken down into relatively independent sections, making it easy for you to see exactly which elements need specific styles. Furthermore, it gives you the potential to remove sections (e.g., the form normalizations) if you know they will never be needed by your website.
Normalize.css has extensive documentation
The normalize.css code is based on detailed cross-browser research and methodical testing. The file is heavily documented inline and further expanded upon in the GitHub Wiki. This means that you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests.
The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.
How to use normalize.css
First, download normalize.css from GitHub. There are then 2 main ways to make use of it.
Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.
Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.
Closing comments
Normalize.css is significantly different in scope and execution to CSS resets. It’s worth trying it out to see if it fits with your development approach and preferences.
The project is developed in the open on GitHub. Anyone can report issues and submit patches. The full history of the project is available for anyone to see, and the context and reasoning for all changes can be found in the commit messages and the issue threads.
Related reading
Detailed information on default UA styles: WHATWG suggestions for rendering HTML documents, Internet Explorer User Agent Style Sheets andCSS2.1 User Agent Style Sheet Defaults.
Translations
Another CSS image replacement technique
…things by Nicolas Gallagher
A new image replacement technique was recently added to the HTML5 Boilerplate project. This post explains how it works and how it compares to alternative image replacement techniques.
Here’s the CSS behind the recent update to the image replacement helper class in HTML5 Boilerplate. It has also made its way into the Compassframework.
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
What does each declaration do?
font:0/0 a
– a shorthand property that zeros out the font size and line-height. Thea
value acts as a very short font-family (an idea taken from theBEM implementation of this method). The CSS validator complains that using0/0
in the shorthandfont
property is not valid, but every browser accepts it and this appears to be an error in the validator. Usingfont:0px/0 a
passes validation but it displayed asfont:0/0 a
in the code that the validator flags as valid.text-shadow:none
– makes sure that any inherited text shadow is removed for the text. This prevents the chance of any text shadow colors showing over the background.color:transparent
– needed for browsers than don’t completely crush the text to the point of being invisible. Safari 4 (extremely rare) is an example of such a browser. There may also be mobile browsers than require this declaration. IE6/7/8 don’t recognise this value forcolor
, but fortunately IE7/8 don’t show any trace of the text. IE6 shows a faint trace.
In the HTML5 Boilerplate image replacement helper, we’ve also removed any border
and background-color
that may be on the element. This makes it easier to use the helper class on elements like button
or with links that may included background or border properties as part of a design decision.
Benefits over text-indent methods
The new technique avoids various problems with any text-indent method, including the one proposed by Scott Kellum to avoid iPad 1 performance problems related to large negative text indents.
- Works in IE6/7 on
inline-block
elements. Techniques based on text indentation are basically “broken”, as shown by this test case:http://jsfiddle.net/necolas/QZvYa/show/ - Doesn’t result in any offscreen box being created. The
text-indent
methods result in a box being drawn (sometimes offscreen) for any text that have been negatively or positively indented. It can sometimes cause performance problems but thefont
-based method sidesteps those concerns. - No need to specify a text-alignment and hide the overflow since the text is crushed to take up no space.
- No need to hide
br
or make all fallback HTMLdisplay:inline
to get around the constraints of using a text indentation. This method is not affected by those problems. - Fewer styles are needed as a result of these improvements.
Drawbacks
No image replacement hack is perfect.
- Leaves a very small trace of the text in IE6.
- This approach means that you cannot use
em
units for margins on elements that make use of this image replacement code. This is because the font size is set to0
. - Windows-Eyes has a bug that prevents the reading of text hidden using this method. There are no problems with all other screenreaders that have been tested. Thanks to @jkiss for providing these detailed results and to@wilto for confirming this technique works for JAWS 12 in IE 6/7/8 and Firefox 4/5/6.
- Like so many IR methods, it doesn’t work when CSS is loaded but images are not.
- Text may not be hidden if a visitor is using a user style sheet which has explicitly set important
font-size
declarations for the element type on which you have applied the IR class.
It’s worth noting that the NIR image replacement technique avoids these drawbacks, but lacks support in IE6/7.
Closing comments
I’ve been using this technique without significant problems for nearly a year, ever since Jonathan Neal and I used it in a clearfix experiment. The BEM framework also makes use of it for their icon components. The core idea was even proposed back in 2003 but the browser quirks of the day may have prevented wider use.
If you come across any problems with this technique, please report them at the HTML5 Boilerplate GitHub issue tracker and include a test case when appropriate.
Translations