css

The CSS

The HTML5 Boilerplate uses CSS normalization combined with other useful default styles. It comes packaged with a handful of common helper classes and a base print style sheet. The HTML5 Boilerplate favours a "mobile first" approach to design and development; some placeholder Media Queries are included to help you on your way.

This starting CSS does not rely on the presence of conditional classnames, conditional style sheets, or Modernizr. Hence the use of "safe CSS hacks" to target IE6/7 where needed.

Read on for a detailed look at each part of the CSS.

HTML5 display definitions

• Set display: block for HTML5 block elements in browsers (without an HTML5 parser) that treat them as inline elements.

• Set display: inline-block for HTML5 inline-block elements in browsers that treat them as inline elements. Include the IE6/7 inline-block hack: *display: inline; *zoom: 1.

• audio:not([controls]) { display: none } : Ensures that audio elements without controls remain hidden in modern browsers that have native support for audio. Chrome and IE9 do not seem to need this re-hiding of control-less audio as they seem to always hide them, regardless of what you do in the CSS.

• [hidden] { display: none } : Adds support for the [hidden] attribute in legacy browsers (with attribute selector support) that do not include it in their UA stylesheet.

Base Styles

html {}

• font-size: 100% : Corrects an IE6/7 bug where text is resized to much greater sizes than normal when the body font-size is set using em units. More info

• -webkit-text-size-adjust: 100% : Prevents iOS text size adjust after orientation change, without disabling user zoom...unlike none. Source

N.B. The following style is no longer included by default due to problems that can arise in Firefox when combined with JS plugins (like modals or drag-and-drop UIs) that rely on viewport dimension calculations.

• [optional] overflow-y: scroll : Forces the display of a vertical scrollbar even on pages which are smaller than the viewport height. IE displays a vertical scrollbar regardless of viewport height and this ensures that it also appears in non-IE. Doing this prevents what appears to be a horizontal shift of page content when a scrollbar appears on longer pages.

html, button, input, select, textarea {}

• font-family: sans-serif : Setting the font-family on body and various form elements ensures font-family consistency between body copy, textarea, and other form elements. Using the sans-serif value will most likely mean Helvetica as the default font for Mac and Arial for Windows.

• color: #222 : Set the default text color to be slightly lighter than pure black to avoid excessive contrast.

body {}

• margin: 0 : Removes margin in all browsers.

• font-size: 1em; line-height: 1.4 : Set font-size and line-height to readable defaults. Use browser default font-size, equivalent to 16px.

::-moz-selection and ::selection

Highlighted text can look a mess if it also has text shadows of certain colours or sizes. Existing browsers don't let you reset just text-shadow in ::selection without reset the background highlight color. Therefore, to avoid the text-shadow-when-highlighted problem we set text-shadow: none but must also declare a background and color.

Consider changing the selection background color to fit with the color palette being used on your site.

Links

Declaring the default link and visited link colours ensures that they are applied in IE6/7.

a:focus {}

• outline: thin dotted : WebKit on OSX uses a focus halo of a fixed color (usually blue). Chrome on Windows uses an orange outline. Neither of these outlines change with link or background color and people frequently look to remove it with :focus {outline:0}. They are also different from the focus outline used by other browsers on Windows or OSX. To improve consistency and avoid either having: a fixed focus style that can clash quite badly or be nearly invisible in certain designs; or removing an important accessibility aide, the outline is normalized to thin and dotted with no fixed color.

a:hover, a:active {}

• outline: 0 : Improves readability in all browsers when a link gains keyboard focus and it is hovered over with the mouse. The outline is shown only if the link gains keyboard focus. Source

Typography

General

• abbr[title] { border-bottom: 1px dotted; } : Addresses styling not present in IE7/8/9, S5, Chrome. By not specifying a border color it defaults to the text color it inherits.

• b, strong { font-weight: bold; } : Addresses style set to 'bolder' in FF3/4, S4/5, Chrome.

• blockquote { margin: 1em 40px; } : Normalize blockquote margins, which differ between modern browsers and IE6/7.

• dfn { font-style: italic; } : Addresses styling not present in S5, Chrome.

• mark { background: #ff0; color: #000; } : Addresses styling not present in IE6/7/8/9.

• q { quotes: none; } : Remove quotes because they are not supported in IE6/7.

• q:before, q:after { content: ""; content: none; } : Quotes require resetting twice as Safari does not support the "quotes" property.

pre, code, kbd, samp {}

• font-family: monospace, serif : Allows proper font-size control. Source

• _font-family: 'courier new', monospace : Improves poor text-rendering of monospace in IE6.

• font-size: 1em : Set font-size to be equal to ancestor's font-size.

pre {}

• white-space: pre : This value makes the element behave as a pre: all line breaks, tabs and other oddities of the source code are literally followed.

• white-space: pre-wrap : This value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box. But it is not supported by IE6/7, so...

• word-wrap: break-word : ...this property allows long words to be broken and wrap onto the next line in IE6/7

sub, sup {}

Prevents sub and sup affecting line-height in all browsers Source

• font-size: 75% : Specified in % so that the sup/sup is the right size relative to the surrounding text.

• line-height: 0 : Zero out the line-height so that it doesn't interfere with the positioning that follows.

• position: relative : Makes all browsers position the sup/sup relative to the surrounding text.

• vertical-align: baseline : Set the vertical alignment from the baseline.

• sup { top: -0.5em; } : Move the superscripted text up.

• sub { bottom: -0.25em; } : Move the subscripted text down, but only half as far down as the superscript moved up.

Lists

• Set consistent cross-browser defaults, in line with modern standards, for ul, ol, and dd.

• nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } : zero out padding and margin, and remove bullets from any lists used in nav elements. We need to include list-style-image for IE6/7 in case a list image is set on the default ul, because those browsers won't remove it otherwise.

Embedded content

• img { border: 0; vertical-align: middle; } : Removing the border prevents a border from appearing around images wrapped in links in IE. The vertical-align removes the gap between images and borders on image containers. More info

• img { -ms-interpolation-mode: bicubic; } improves image resizing in IE. It is on by default in IE8 and is not implemented in IE6, so we only need it on IE7. Firefox has a similar style image-rendering:optimizeQuality; but it is a default, so we don't need to include it in the styles. More info

• svg:not(:root) { overflow: hidden; } : Corrects overflow not being hidden in IE9. 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.

Forms

We zero out the border, margin, and padding on form and fieldset.

label { cursor: pointer; } : indicate that 'label' will shift focus to the associated form element.

legend {}

• border: 0 : Corrects color not being inherited in IE6/7/8/9. Without this, legend text will always be blue in IE.

• *margin-left: -7px : Corrects alignment displayed oddly in IE6/7.

• padding: 0 : Since we've removed the fieldset border, margin, and padding, we remove the default padding on legend to avoid unwanted horizontal whitespace.

• white-space: normal : Allow text to wrap in Firefox 3.6

button, input, select, textarea {}

• font-size: 100% : Corrects font size not being inherited in all browsers.

• margin: 0 : Addresses margins set differently in IE6/7, F3/4, S5, Chrome.

• vertical-align: baseline : Produces best looking alignment in modern browsers.

• *vertical-align: middle : Improves appearance in IE6/7 to more closely match baseline value position in other browsers.

button, input {}

• line-height: normal : Addresses FF3/4 setting line-height using !important in the UA stylesheet.

button, input[type="button"], input[type="reset"], input[type="submit"] {}

• cursor: pointer : Improves usability by indicating that an action will be performed. Type image already has pointer cursor, so this also improves consistency between related input types.

• -webkit-appearance: button : Corrects inability to style clickable 'input' types in iOS.

• *overflow: visible : Corrects inner spacing displayed oddly in IE7. Doesn't effect IE6; there doesn't seem to be a way to apply it to IE6 (without using a class) and avoid triggering a serious bug in text input's. This style, when applied to text inputs in IE6/7, causes them to expand as more content is written into them. This happens even if there is a fixed width applied. If you need to fix the excess inner-spacing bug on button and clickable inputs in IE6, then apply this style using a class that is used specifically to style those types of elements.

button[disabled], input[disabled] {}

• cursor: default : Re-set default cursor for disabled elements.

input[type="checkbox"], input[type="radio"] {}

• box-sizing: border-box : Normalizes the box sizing, which is set to content-box in IE8/9 but border-box in all other browsers.

• padding: 0 : Corrects excess space around these inputs in IE8/9 and matches Firefox's UA style sheet setting of padding: 0 !important. However, this does not effect the excess space in IE6/7.

• *width: 13px; *height: 13px; : Corrects excess space around these inputs in IE7.

input[type="search"] {}

• -webkit-appearance: textfield : Addresses appearance set to searchfield in Safari 5 and Chrome, without removing the benefits of search inputs (e.g. showing past searches).

  If the -webkit-appearance property value is not changed from searchfield:

  ...in WebKit on OSX/iOS you can't control font, padding, border, and background.

  ...in WebKit 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.

• -webkit-box-sizing: content-box : Normalizes the box sizing, which is set to border-box in Safari 5 and Chrome but content-box in all other browsers.

• -moz-box-sizing: content-box : Future-proofing.

• box-sizing: content-box : Future-proofing.

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {}

• -webkit-appearance: none : Remove excess inner padding that appears in Safari 5 and Chrome on OSX once the search input appearance has been changed to textfield. Remove the cancel button.

button::-moz-focus-inner, input::-moz-focus-inner {}

• border: 0; padding: 0 : Removes inner padding and border from FF3/4.

textarea {}

• overflow: auto : Removes default vertical scrollbar on empty textarea in IE6/7/8/9.

• vertical-align: top : Improves readability and alignment in all browsers when accompanied by label text.

• resize: vertical : Allow only vertical resizing to prevent instances when trying to resize a textarea accidentally results in it being resized horizontally over adjacent content.

Tables

• Remove spacing and tweak vertical alignment

Non-semantic helper classes

.ir {}

Add the .ir class to any element you are applying image-replacement to. Be sure to include background-image: url(pathtoimage.png); for that specific element so that image replacement can occur.

• border: 0 : Remove the default border from elements like button
• font: 0/0 a : Crush the text down to take up no space
• text-shadow: none : Remove any text shadows
• color: transparent : Hide any residual text in Safari 4 and any mobile devices that may need it
• background-color: transparent : Hide the default background color on elements like button

.hidden {}

Add the .hidden class to any elements that you want to hide from all presentations, including screen readers. It could be an element that will be populated later with JavaScript or an element you will hide with JavaScript. Do not use this for SEO keyword stuffing. That is just not cool.

• display: none !important : Ensure that elements remain hidden even when their display property is set in selectors with a specificity greater than or equal to the .hidden selector.

• visibility: hidden : Only included to avoid possible edge-cases in Window-Eyes screenreader where text is read out even when display: none is used. Source

.visuallyhidden {}

Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. You can use this to hide text that is specific to screen readers but that other users should not see. About invisible content, Hiding content for accessibility, HTML5 Boilerplate issue/research

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; /* Prevent any content overflow */
	padding: 0; 
	position: absolute; /* Remove from the flow of the document */
	width: 1px;
}

.invisible {}

Add the .invisible class to any element you want to hide without affecting layout. When you use display: none the element would effectively be removed from the layout (width = 0, height = 0), in some cases, you want the element to simply remain invisible while occupying the width and height that it has.

Examples would be, having a form element that is hidden until another choice is selected (or having select dropdowns disappear in IE if over flash), Containers for tabbed navigation to occupy space, even when invisible, making advertisements invisible while a video is played in a modal window and the screen behind is darkened.

If you need the layout to not shift when you show/hide an element, this would be a class you would add/remove.

clearfix {}

Adding .clearfix to an element will ensure that it always fully contains its floated children. There have been many variants of the clearfix hack over the years, and there are other hacks that can also help you to contain floated children, but the HTML5 Boilerplate currently provides this micro clearfix helper class.

• .clearfix:before, .clearfix:after { content: ""; display: table; } : This rule is understood by all browsers except for IE6/7. It generates a pseudo-element before and after the content of the element that contains floats. Setting display: table creates an anonymous table-cell and a new block formatting context. This acts to prevent top-margin collapse and improve the consistency between modern browsers and IE6/7.
• .clearfix:after { clear: both; } : Makes the :after pseudo-element clear the floated children of this element, thereby making the element expand to contain the floats.
• .clearfix { zoom: 1; } : Create new block formatting context in IE6/7 by triggering hasLayout

Print Styles

• Print styles are inlined to reduce the number of page requests.
• We strip all background colors and change the font color to dark gray and remove text-shadow. This saves your printer's ass.
• Anchors do not need colors to indicate they are linked. They are underlined to indicate so.
• Anchors and Abbreviations are expanded to indicate where users reading the printed page can refer to.
• But we do not want to show link text for image replaced elements (given that they are primarily images).

Paged Media Styles

• Paged media is supported only in a few browsers.
• Paged media support means browsers would know how to interpret instructions on breaking content into pages and on orphans/widows.
• We use page-break-inside: avoid; to prevent an image and table row from being split into two different pages, so use the same page-break-inside: avoid; for that as well.
• Headings should always appear with the text they are titles for. So, we ensure headings never appear in a different page than the text they describe by using page-break-after: avoid;.
• We also apply a default margin for the page specified in cm.
• We do not want orphans and widows to appear on pages you print. So, by defining orphans: 3 and widows: 3 you define the minimal number of words that every line should contain.

Media Queries

• The boilerplate makes it easy to get started with a "Mobile First" and Responsive Web Design approach to development. But it's worth remembering that there are no silver bullets.
• We include a placeholder Media Query to build up your mobile styles for wider viewports. It is recommended that you adapt these Media Queries based on the content of your site rather than mirroring the fixed dimensions of specific devices.
• If you do not want to take a "Mobile First" approach, you can simply edit or remove these placeholder Media Queries. One possibility would be to work from wide viewports down and use max-width MQs instead, e.g., @media only screen and (max-width: 480px).
• Take a look into the Mobile Boilerplate for additional features that are useful when developing mobile websites.