Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get back default properties after applying a global CSS reset

Some legacy code that I have to build upon, really makes me feel the cons of global CSS reset.

I have the old foo.css that starts with

* {margin:0; padding:0;}

and I used to copy it to a different file bar.css, tweak it too my needs (out with the CSS reset), and use it to replace foo.css only in the code I'm writing. I do this not to worry about backwards compatibility with the older sections of the site.

Now this is quite cumbersome: for global changes I have to remember to modify both files. So now my bar.css is extending foo.css, starting with:

@import url("style.css");

The problem is that now I also inherit the CSS reset.

Is there any way(†) to bring the margin & padding properties of some elements (headers, lists etc.) back to their default values -- the ones before the reset was applied?

(†) other than manually setting every property back to its initial value, as defined in the CSS specs.

like image 569
Marius Butuc Avatar asked Dec 20 '11 20:12

Marius Butuc


1 Answers

There’s the proposed value initial for setting a property to its initial value, without finding the explicit value. But it’s still very much draft-stage and hardly implemented in any browser.

Moreover, that’s probably even not what you’d like to achieve. If I understand you correctly, you would want to set e.g. the top and bottom margins of h2 elements to the browser default value. I don’t think there’s even any proposed way of doing that in CSS. The specifications do not define the browser defaults. The initial value of, say, the margin property is 0. The reason why headings have top and bottom margin by default is that the browser applies, at least conceptually, a browser style sheet. The CSS specs suggest a default browser style sheet but do not mandate one, and browser may (and actually do) deviate from the suggestions.

In practice, the best shot in the given situation would be to check Appendix D of the CSS 2.1 spec and use the values given there. For things like margins, this would mostly create the effect of using browser defaults.

like image 161
Jukka K. Korpela Avatar answered Sep 18 '22 17:09

Jukka K. Korpela