Any suggestions about my reset?

[ichsie]

I'm trying to come up with a building starting point for my future CSS projects. The reset.css is actually a custom combined version of various popular reset.css from Eric Meyer and so forth.

Really want to listen to you about how can I make it better, more versatile and scalable. Just talk about what you'd do with your own.

global.css

@charset "utf-8";
@import "reset.css";
[B]*[/B] {font-size:100.01%;overflow:hidden}
[B]html[/B] {font:normal 62.5%/1.6 Arial, Verdana, Geneva, sans-serif}
[B]body[/B] {font-size:1em;line-height:1.6}

reset.css

@charset "utf-8";
/* reset.css by yang yang v1.0 ¦ 20080415 */
[B]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, font, 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[/B] {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
[B]address,caption,cite,code,dfn,em,strong,th,var[/B] {
font-style:normal;
font-weight:normal;
}
[B]h1,h2,h3,h4,h5,h6[/B] {
font-size:100%;
font-weight:normal;
}
[B]sup[/B] {
vertical-align:text-top;
}
[B]sub[/B] {
vertical-align:text-bottom;
}
[B]body[/B] {
line-height: 1;
}
[B]ol, ul[/B] {
list-style: none;
}
[B]blockquote, q[/B] {
quotes: none;
}
[B]blockquote:before, blockquote:after,
q:before, q:after[/B] {
content: '';
content: none;
}
[B]:focus[/B] {
outline: 0;
}
[B]ins[/B] {
text-decoration: none;
}
[B]del[/B] {
text-decoration: line-through;
}
[B]table[/B] {
border-collapse: collapse;
border-spacing: 0;
}
[B]input,textarea,select[/B] {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
[B]input,textarea,select[/B] {
*font-size:100%;
}

[swa66]

I'd prefer not using hacks and instead use conditional comments.
It's the best way to force MSFT to make IE8 standards compliant.
(hence 100% font sizes etc: move them out.)

@import: why not add it in the global.css ? It'll take you one hit less.

[Xapti]

font-size:100% is not so much of a hack by many definitions though, since it would not cause any undesireable behaviour to any other browser. I consider it a redundant fix, and is perhaps one of the only things I don't see the point in bothering to put in a conditional comment (granted if a CC is made, I guess it could be moved there).

I've recently tried coding without using a form of "reset", since I have adopted recently a "zen" view on things where "pixel perfectionism" isn't really important. I am over exaggerating when I say pixel perfect, since most people are probably against that already, but I mean it in perhaps a broader sense.

One thing you may desire to change is resetting list margins/padding (left padding/margin), as I've noticed various browsers have varying default bullet spacing, and even setting that spacing to something like "1em" causes problems for positioning the bullet for some browsers at different (typically a bit extreme) font sizes (I'm thinking mostly IE6, but I'm not sure about others)

I personally don't like font size/line size: 62.5%/1.6

and what's that body{line-height:1} for?

I guess I'm against most of this stuff, since it results in lots more CSS if you want to display a basic page properly (for instance lists), not to mention uses more CSS in the first place. Not minimalist in any way, but one could easily debate if large CSS size is an issue anymore, with everyone getting highspeed, and sites including lots of rich media, or lots of images.

[SuzyUK]

ichsie, hi and thanks for posting your thoughts..

..although I too am not enamoured with resets either, they're just not my choice of tool.

Even this one includes some "old school" 'hacks', well perhaps hacks is not the right word but preferences ;) 100.01% is an Opera tweak which I'm not even still needs tweaking for? - 62.5% is most but not all browsers' equivalent to 10px, which is now widely agreed to be too small, even if you like to be working from a 10px "base" remember that it is based on the browsers default and while that is mostly 16px. it's not guaranteed.

both the font-size: 100%; and the line height: 1; already mentioned, are out of place.

firstly with the font-size: 100% hack (this is an IE hack as it has the * before the property name), you have already, at the very start of the sheet set all properties, by way of the universal selector, to have font-size 100.01% so the IE extra declaration/hack is unnecessary.

also as pointed out the line-height; 1 on the body is a duplicate you have it set to 1.6 on the first declaration, then 1 later on.. I presume the idea is to set it to 1 on the first instance of the body?

ref the quotes and before/after rules, on the q and blockquote elements, I'm not sure the before after rules need that double declaration anymore, and blockquote doesn't insert quotes anymore by default, either.. although it probably doesn't hurt to keep the rules in place.

If you're resetting the <em> and <strong> properties to normal font weight and style, you should probably include the <b> and <i> elements in that rule too

nice work!