Main /

CSS Resetter

Wiki_System*

technolowiki.org

[-edit SideBar-]

CSS Resetter

CSS resetter

A CSS resetter is a code snippet to insert on top of a cascading style sheet so all browsers will render the page's CSS rules in the same (or very similar) fashion. Under the current browsers, Firefox, Chrome and Opera use much the same formatting rules. Internet Explorer, as almost always, behaves differently. Future browsers are also very likely to adapt to new trends, such as mobile surfing and thus change CSS default (base) values at some time. Not a very long time ago, for example, Firefox 4 changed the default for tables to no border and also hyperlinked images lost their borders.

Using a CSS resetter provides a well-defined base and is the best effort so that a freshly designed web site will look as identically as possible on past, present and future browsing environments.

CSS defaults

Defaults for headings

The following values are as seen in Internet Explorer 6, Firefox 12, Opera 11 and Chrome 5. The prefixed rule names, eg. "-o-margin" DO NOT WORK, but are just written to show that that value is meant for Opera ("-o-") or Firefox ("-moz-") only.
H1 { font-size:200%; margin:.67em 0; -ie-font-size:225%; -ie-margin:.6em 0; } H2 { font-size:150%; margin:.83em 0; -ie-font-size:167%; -ie-margin:.75em 0; -ff2-font-size:155%; } H3 { font-size:117%; margin:1em 0; -ie-font-size:125%; -ie-margin:1.08em 0; } H4 { font-size:100%; margin:1.33em 0; -ie-font-size:110%; -ie-margin:1.2em 0; -o-margin:1em 0; -ff2-margin:1.3em; } H5 { font-size:83%; margin:1.67em 0; -ie-font-size:90%; -ie-margin:1.5em 0; } H6 { font-size:67%; margin:2.33em 0; -ie-margin:2em 0; }

Non-CSS, HTML-only metrics

Metrics for form input elements

For input fields of type text, given a size attribute, Internet Explorer 6 and Firefox 12 will allocate 19+6*size pixels of inner width, Firefox 2 calculated 10+7*size, Opera 12+7*size px and for Chrome it's 31+6*size px. Default value for size in all browsers is 20.
All browsers seem to add 1px of vertical padding, but no horizontal padding, by default. Alone Opera pads by 1 pixel in all directions, so one might need to add 2 pixels in calculations, or explicitly specify INPUT[type=text] { padding:1px 0; } in the stylesheet resetter.

Recent Changes (All) | Edit SideBar Page last modified on August 16, 2012, at 07:07 PM Edit Page | Page History
Powered by TechnoloWiki