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 ?
I think I don't understand what is about: the "default" of browser's rendering a element, or the "cascading" of CSS specs?
ReplyDeleteIf it's the first one, there's a post in MeyerWeb about Tantek "undohtml.css" stylesheet... until 2004!
You can find here: http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/
It's about both things, the default and the cascading property.
ReplyDeleteYUI uses a CSS to remove from a page default browser rendering while many other developers would have an element that doesn't inherit CSS from previus declarated one.
My proposal is just a revisited YUI file based simply on a class name that could remove default CSS from a page, used as body class name, or inside an arbitrary element, used as a "clean temporary space" without inheritance, useful (I suppose) for a lot of libraries.
undohtml.css is interesting too but it's not completed as YUI version and it's about an entire page, as YUI version again :-)
Stopping cascading is a little more difficult and so trying to solve it this way really won't work when rule specificity comes into play...
ReplyDeleteFor example:
#content h1 { }
will always override your:
.reset h1 { }
And the real problems start when things are a little more deeply nested, with an id, multiple classes and multiple elements deep...
If you wanted to put a widget into a form (e.g. a date picker) and your widget has anchor's in it, but the form also has styled anchors such as:
#type-a #content fieldset a:hover { }
then your "widget" can't simply have:
.myWidget a:hover { }
because the former rule is more specific.
However, if you could stop cascading, you could simply do:
.myWidget { inherit: off; }
then the achor would not receive the more specific style. That would be a very nice feature to have indeed :)
I have started looking at CSS frameworks and reset style sheets lately, and I have come to a basic conclusion.
ReplyDeleteWhy reset? Set instead. Simply put, replace your reset style sheet with one that SETs all the basic styles to the defaults you would like to start from instead. You still get a good baseline across browsers by setting all your styles to a standard format. I just don't see the point of doing something to force me to specifically undo it later. I would much rather start with a style sheet that has a reasonable starting point that overrides the differences between browsers while at the same time making elements appear as I would expect them to everywhere.
So how about we see the death of the reset style sheet and the birth of frameworks with set style sheets. I think I will work on creating my own set.css in the near future.
This is great, its just what I've been looking for! Thanks :)
ReplyDelete