Reset The Element CSS
Few days ago ajaxian posted a YUI solution to reset CSS in a page.
This is a really interesting way to solve inherit CSS problems when You need to create a personal widget or when a library would do it.
Dean Edwards did a WHATWG proposal for a <reset> element because
He's quite right for many reasons and that's mine proposal, a reset css that just use simply a class name.
The element with reset class name and every "resetted" elements seems to work fine and You could see an example using this page changing the href of the style element and changing, for example, the body element in this way
This is just an example because You could use reset with every element to obtain the same result for each nested table, form and elements.
This isn't probably the best solution but should be one solution and You could use multiple class name to define Your style too
There's only some adjustment to do with headers and probably something else that You could set using a dedicated css
It's just an example but it should work with every CSS based browser.
What do You think about this solution ?
This is a really interesting way to solve inherit CSS problems when You need to create a personal widget or when a library would do it.
Dean Edwards did a WHATWG proposal for a <reset> element because
He *really* wants to turn off CSS inheritance.
He's quite right for many reasons and that's mine proposal, a reset css that just use simply a class name.
.reset,.reset div,.reset dl,.reset dt,.reset dd,.reset ul,.reset ol,.reset li,.reset h1,.reset h2,.reset h3,.reset h4,.reset h5,.reset h6,.reset pre,.reset form,.reset fieldset,.reset input,.reset textarea,.reset p,.reset blockquote,.reset th,.reset td
{margin:0;padding:0;}
.reset table
{border-collapse:collapse;border-spacing:0;}
.reset fieldset,.reset img
{border:0;}
.reset address,.reset caption,.reset cite,.reset code,.reset dfn,.reset em,.reset strong,.reset th,.reset var
{font-style:normal;font-weight:normal;}
.reset ol,.reset ul
{list-style:none;}
.reset caption,.reset th
{text-align:left;}
.reset h1,.reset h2,.reset h3,.reset h4,.reset h5,.reset h6
{font-size:100%;font-weight:normal;}
.reset q:before,.reset q:after
{content:'';}
.reset abbr,.reset acronym
{border:0;}
The element with reset class name and every "resetted" elements seems to work fine and You could see an example using this page changing the href of the style element and changing, for example, the body element in this way
...
<link rel="stylesheet" type="text/css" href="reset.css">
</head>
<body class="reset">
...
This is just an example because You could use reset with every element to obtain the same result for each nested table, form and elements.
This isn't probably the best solution but should be one solution and You could use multiple class name to define Your style too
...
<element class="reset mywidgetstyle">
...
There's only some adjustment to do with headers and probably something else that You could set using a dedicated css
.reset h1 {
font-weigth: bold;
font-size: 1.2em;
}
It's just an example but it should work with every CSS based browser.
What do You think about this solution ?
Comments
Post a Comment