Search code examples
htmlcsscross-browsercss-reset

Starting a new site: which is most complete and reliable CSS override?

Different browsers act in quirky ways, and sometimes we make use of hacks to make CSS look the way we want it across all browsers. However, that's something you do after you have already starting putting together the HTML and CSS.

But the easiest way, I find, to make sure you are applying more or less the same standards accross all browsers is to reset their local CSS files.

So when starting a new HTML5 and CSS3 project — what reset out there covers all the bases?

For example, here are two things I like to do:

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

And for HTML5:

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

Here's something I've seen on WordPress sites:

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0;
}

I know there are ready-made CSS scripts that combine these sort of things, but which is — the most reliable, complete, cross-browser friendly, up-to-date and maintained?

Thank you!

Solution

  • Normalize is well a know foundation to any new website which, instead of resetting all CSS values, just makes them visibly consistent.

    Also, Modernizr is a brilliant JS library which can provide HTML5 schematic features to older browsers like IE6-8 (as well as lots of other things).

    As mentioned in the comments, HTML5 Boilerplate is the best place to start though (it has two CSS files, main.css and normalize.css).