Eric Meyers CSS Reset

Hey y'all,

Long time no see. Are people using eric's CSS Reset these days for HTML5 and CSS3? I want to know if it is still applicable.

http://meyerweb.com/eric/tools/css/reset/

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Thanks in advance

 

Meyer's global reset is still stupid. See my apologia, Global resets considered harmful. (Pre css3, but still applicable.)

That's not to say you shouldn't use your own boilerplate resets when you prefer to override browser defaults. To reset to zero and then to whichever value you really want is silly. For example, the big four graphic browsers default to body {margin: 8px;}, I prefer to remove the margin. I used to reset the padding to zero because IE and Opera used it instead of margin. They have switched to the more logical margin after IE fixed its buggy margin collapse.

For another example, I commonly change the blockquote's side margins from the default 40px to 2.5em to make the margins proportional to the font size.

Pick your own boilerplate, but make it yours, not pile of smelly stuff that you still need to set to your preferred values.

cheers,

gary

addendum:

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

Code (markup):

You understand, don't you, that any non html5, non xml enabled browsers will ignore those tags? E.g. IE. ~g

 

It has ever been a valid approach so the question of applicability is moot. The passage of time does not make stupid any less stupid and time does not alter the logic based assessment of the stupidity unless the universe gets re-ordered to describe normal behavior as a problem so that an illogical approach becomes the solution.

I use a reset incorporated into the base stylesheet for a site for those things I need changed from the defaults; Otherwise I let the browser defaults do the job they are intended to do.

 

Meyer's reset is what gives resets a bad name. It is fat bloated crap wasting time setting things that have jack shit to do with why you should use a reset; setting up values that are not consistent between different values. Done properly it's nothing more than variable initialization that will SAVE you code; Meyer's "reset" or worse, "reset reloaded" at 1k or more code is just halfwit garbage bordering on being a "framework" unto itself.

... and at this point you folks should have a pretty good idea of my opinion of "frameworks" and yes, I'm making air quotes Dr. Evil style again..."Laser"

Resets that actually RESET things makes a good deal of sense -- browsers do NOT start out with consistent values for their HTML elements; that's a fact. Constantly stating over and over the same "padding:0; margin:0" every time you style an element is MORE stupid than saying it and then MAYBE changing it later. More importantly it covers that you might miss an element -- the laugh being I often see people throwing hacks or "IE Conditional Comments" at their code trying to figure out why an element is behaving different in one browser, when a reset could have just as easily fixed a small detail they missed. (usually margins).

The smallest reset, the so called "universal" one of * {margin:0; padding:0} is just as bad, as it can cause major headaches in styling form elements thanks to IE and FF being utter and complete jackasses about how INPUT, SELECT and TEXTAREA receive styling. (and don't even get me STARTED about LEGEND).

The reset I use is just that -- a RESET. It only changes values that do not start out consistent across browsers, and that's ALL it does. It's only a quarter of a K, and really if that's "too much code for a baseline" you're doing something wrong. The laugh being many of the people who badmouth resets then use frameworks like booprint or bootcrap!

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

Code (markup):

That's IT. You need more than that, you're doing something wrong. ALL those extra elements being targeted and values being passed are NOT inconsistent cross-browser unless you're still writing code for Nyetscape 4! 251 bytes, that's all you need.

Dicking around with a font size value that IS the default? Overriding the font to inheritance mode on PRE, CODE and VAR? Vertical align property that doesn't even WORK properly cross-browser (at least with IE8/earlier still in the mix)

As always makes me wonder just what the devil Meyer smokes -- but I swear between the Eric Meyer wieners, Kevin Yankholes, and Paul Irish whiskey, it's hardly a shock 80%+ of the web is poorly written ineptly developed rubbish. Just how any of them became "names" in the industry escapes me given what utter and complete bull their claims, methods and ideas are.

See Paul Irish's equally stupid crutch for the inept that offsets ANY advantages the less verbose HTML 5 header offers, yet is the cornerstone of most sites built by the nitwits who actually think HTML 5 offers anything of value as a markup specification.

<!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->

Code (markup):

Herpafreakingderp, or as our friends in Brooklyn would say, "Whaddaya freekin retahded?" I have to fight the overwhelming urge to pimp slap someone every time I see that. Though to be fair, I say the same thing about wrapping stylesheet links in IE CC's. You have to do that, you don't know enough HTML or CSS to be building websites.