0

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!

Baumr
  • 6,124
  • 14
  • 37
  • 63
  • Thanks, that's definitely a popular one. I also came across this: http://www.cssreset.com — but which to chose? How can people determine which will be the most useful for their implementation? – Baumr Nov 01 '12 at 19:43
  • 1
    One is a CSS reset... the other isn't. See normalize.css – BoltClock Nov 01 '12 at 19:46
  • Thanks, but html5-boilerplate includes normalize.css — so would you say it's the best one? – Baumr Nov 01 '12 at 19:50
  • 1
    normalize.css seems to be a favourite among many of the big names such as the aforementioned html5 boilerplate and twitter bootstrap. Instead of adding hacks to your css using conditional tags to add appropriate classes to the html tag is a much cleaner way to target older versions of IE. – Jared Nov 01 '12 at 19:59
  • Thanks. Yeah, I agree. Then there's also this: http://www.initializr.com (which also features Bootstrap and html5-boilerplate) — choices... choices... – Baumr Nov 01 '12 at 20:03

1 Answers1

1

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).

Edd Turtle
  • 1,511
  • 1
  • 13
  • 24
  • Thanks! And it seems that with http://www.initializr.com it's possible to get the Modernizr aspects as well? I was basically convinced by the first answer here: http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa – Baumr Nov 01 '12 at 21:24