Need reset -- with NO HTML5 tags

I usually refer to Eric Meyer’s reset, but I don’t see one with NO tags for HTML5…

is there a reset anywhere anymore that only contains tags for XHMTL? and NO tags for HTML5?

thank you…

What does it matter if it has HTML5 tags in it? If it’s not being used, it’s ignored - there are no errors thrown in that scenario.

well, we’re concerned with loading speeds where I am… I figured that might make a difference…

plus I’m just a bit anal… why clutter css with ref. to tags that are not being used? :wink:

thank you…

If it’s loaded externally and not loaded inline, it’s cached and negligible. But if you don’t want it, just remove it from Eric’s version. Nothing says you have to use the full version…

Here is mine http://www.visibilityinherit.com/code/initial-css-settings.php

If you’re worried about loading speeds from a few kb of CSS, don’t use a reset at all.

why clutter css with ref. to tags that are not being used? :wink:

Ramen. Mine is a few lines at most. You honestly don’t need to set every element in the universe to some preset you’ll just override with natural CSS anyway.


outline:0; /* removes dotted border in FX */

!

Most of Eric Waton’s reset is pretty sensible though, if you still want a real reset. The form controls are a good set.

This is all I tend to use, if anything:

html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}

img {vertical-align: bottom; border: none;}

The rest I normally take care of when styling elements.

I don’t even set that many elements. For example the only table elements I’ve gotten unwanted padding on were th’s and td’s, and that was in Gecko browsers (1px).

Inline elements like span, em, strong… generally don’t have any default margins or padding, probably because they are inlines. Their spacing mostly comes from the inherited line-height.

If I remove default margins from headings, I find I must compensate by giving them a bigger line-height, because they keep their inherited font sizes (apparently the inherited line-height is small) and they get very close to other elements, sometimes overlapping or touching text around them.

Eric Watson’s got some good stuff for forms. In general, I set 2 things on form controls:
I give inputs, selects and text-areas a font-size of 1em (also in Eric’s reset). When I set 100% font size on the body, those elements seem to be leftover ones who don’t get hit by that, causing their sizing to be off compared to everyone else (their physical sizing rather than their actual text sizing, because I size things in em’s).
Then since only some browsers (someone somewhere didn’t do this but I can’t remember who) display form inputs like inline-blocks, I just force it on all of them: input, select, textarea {display: inline-block;}
though whether I put this near the top as part of some “reset”, depends on how many forms there are, as Ralph does.

For my work’s shopping cart setup, it made sense to just declare that junk in the base css, because someone else had set a bunch of font-sizes there already and there are tons of random form controls all over the site. On a site with one or two forms, I would just leave that for where the forms are styled.

We ought to make another thread somewhere for “what is your current reset/base css setup?” since everyone does it differently. I don’t like the idea of actual big chunks of resets, but I look at them now and then and usually find stuff where I’m like, wtf is that for? And if I can find the reason it’s usually interesting.

I added…

a:hover, a:focus, a:active {
text-decoration:none;
/* add-custom:outline-rule-here; */
}

And removed the IE6 stuff. :slight_smile: