Is this CSS Reset okay? - html

Question

I was intending to use Eric Meyer's CSS reset but I stumbled in some cross-browser differences (like input margins). Based on it, i came up with a more agressive aproach:
(This is outdated. Don't forget to check the current revised version at the end of this question and criticize it as you wish)
/* CSS Reset by Hugo Leonardo. Based on Eric Meyer's CSS Reset (just google it). */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
text-decoration: none;
/* in case "font: inherit" fails (IE7) */
font-family: "times new roman";
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* remove this block if you DON'T want to support lame browsers */
}
:before, :after {
content: '';
}
:link, :visited, :hover, :active {
color: inherit;
color: #000; /* for IE7 'inherit' problem (again) */
text-decoration: none;
}
:focus {
outline: 0;
}
ol li, ul li {
list-style: none;
}
table {
/* "collapse" here is because of IE7 (maybe others?). don't remove it as it affects other browsers as well */
border-collapse: collapse;
border-spacing: 0;
}
/* this entire block was copied from Eric Meyer's CSS reset */
/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
It worked smoothly in all tested browsers:
IE7
IE8
Chrome (newest)
Firefox (newest)
Opera (newest)
The question is: Does anyone see any trouble here? I consider myself not so good in CSS so I don't know if this will get me in any trouble in the future.
Obs.: this reset is for cross-browser issues only. It should (or must!) be followed by generic rules for elements like input, a, code, and so on (ex: input of type "text" would be invisible without borders!). I will be adding things like generic a styles and stuff later. For now I'm resetting things, getting rid of (almost) everything that isn't the same across the major browsers.
PROBLEMS SPOTTED SO FAR
The * selector could cause performance issues.
The * selector with some of the rules override some default styles of elements in a way they can't be recovered. ex: the default style of an input of the type "submit".
Surprisingly the :before, :after { content: ''; } was breaking select elements in Firefox.
In the revised version I tried to set margin: 0 to all input elements. Most browsers ignored it for inputs type checkbox and radio.
REVISED VERSION
/* CSS Reset by Hugo Leonardo Leão Mota
Based on Eric Meyer's CSS Reset: http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
Helped by fellows in stackoverflow: http://stackoverflow.com/questions/6892982/is-this-css-reset-okay */
/* resetting style for every visible element except 'ruby' family and form controls
browsers deal with controls (and ruby style) in their own way */
a, abbr, acronym, address, b, big, blockquote, body,
br, caption, cite, code, col, colgroup, dd, del, dfn, div,
dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i,
img, ins, kbd, label, legend, li, noscript, object, ol, p, pre, q, samp,
small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
text-decoration: none;
/* in case "font: inherit" fails (IE7) */
font-family: "times new roman";
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* remove this block if you DON'T want to support lame browsers */
}
/* browsers are free to handle controls but
we can't let them mess up with the other elements */
button, select, textarea,
input[type=text], input[type=password], input[type=submit],
input[type=image], input[type=reset], input[type=button], input[type=file] {
margin: 0;
}
:link, :visited, :hover, :active {
color: inherit;
color: #000; /* for IE7 'inherit' problem (again) */
text-decoration: none;
}
:focus {
outline: 0;
}
ol li, ul li {
list-style: none;
}
table {
/* "border-collapse" here is because of IE7 different behaviour (maybe others?).
don't remove it as it affects other browsers as well */
border-collapse: collapse;
border-spacing: 0;
}
/* the next two blocks were copied from Eric Meyer's CSS reset */
blockquote:before, blockquote:after, q:before, q:after {
content: '';
}
/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
END
Well, the more i tried to improve my reset, the more it looked like meyer's css reset, so i gave mine up and adopted it. works just fine :p

Answer 1

I generally think that wide-ranging CSS resets are not the best. I agree with Russ Weakley, who "zeroed" in on three big concerns:
Every element that's reset must be redefined. CSS file size & maintenance can increase.
You could forget to restyle something you reset.
Some resets are harmful to users who rely on keyboards for navigation.
See his whole presentation here: http://www.maxdesign.com.au/articles/css-reset/
Specifically, I think the following should not be reset, as it is in your stylesheet
:before, :after {
content: '';
}
:link, :visited, :hover, :active {
color: inherit;
color: #000; /* for IE7 'inherit' problem (again) */
text-decoration: none;
}
:focus {
outline: 0;
}
ol li, ul li {
list-style: none;
}
focus is an accessibility issue.
ol and ul should have their default styles. You are likely to need them. (Although you may need to overwrite them for a nav.)
:link, :visited, :hover, :active I would reset these only as needed.
As mentioned and acknowledged by you *{ // } could cause performance issues and may cause unforeseen issues.
Also, I would consider adding something to reset the big top and bottom margins on headers
h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:0;}

Answer 2

This is using * which will affect everything. You can't get borders for input, select etc. back in with a "later" stylesheet.
Also, * is considered bad for performance. Using explicit tags is preferred.
Try html5boilerplate's reset if you're having issues with Eric's (not sure if it will solve them, but worth a shot)

Answer 3

My only concern is the performance issue caused by using the * selector

Answer 4

I dont see any trouble with it, if you've tested it and it works then it should be fine.