[drupal-devel] CSS checking

[Andre Molnar]

And just to be complete - there is a 4th part of a specificity 
calculation.  i.e. inline styles

Given the following CSS:

#sometable tr.odd td.foo a {/*declarations*/}

AND HTML fagments:

<tr class="odd"><td class="foo"><a href="#" style="color:blue">

The specificity calculation would be:
1-1-2-3 (inline-ids-classes/pseudoclasses-tags)

This shouldn't apply to your themes because you shouldn't be using 
in-line styles - but you may sometimes want to add some in-line styles 
to content you are entering in a node.

andre

Steven Wittens wrote:
> I added the removed style to Bluemarine's style.css as Bluemarine did 
> not have a paragraph style of its own. A good rule is to check the core 
> themes' CSS files for rules which override the removed rule. CSS 
> overriding can get tricky (*), but for simple rules this should be easy.
> 
> Except for CSS magic like overflow, float/clear or stuff like that, a 
> good rule of thumb is that if it works on either Firefox, Opera or 
> Safari, it will most likely work on the other two. The big problem again 
> is IE, feel free to ask me to do a quick IE spot-check if you want.
> 
> (*) To explain CSS rule overriding, it works like this. When multiple 
> conflicting styles apply to an element, the specificity of each style is 
> calculated, and only the style with the highest specificity applies. So 
> a rule "td a:hover" does not mean that "a:hover" will be ignored 
> completely: it simply means that /if/ both rules match on an element and 
> apply conflicting styles (e.g. color: blue, color: red), the "td 
> a:hover" styles will override "a:hover" styles for that element.
> 
> The specificity of a rule is calculated like this. Count the amount of 
> id's, classes and tags that appear in it. Pseudo-classes like ":hover" 
> are counted as classes. Put them together in that order and treat them 
> like a number. Higher numbers override lower numbers.
> 
> For example "tr td.foo" has 0-1-2 (ids-classes-tags), "tr.bar td.foo" 
> has 0-2-2. Thus the latter overrides the former.
> So e.g. 2-1-2 > 2-1-0 > 1-2-0 > 0-1-0 > 0-0-1.
> 
> It does not matter which order the individual classes/ids/tags appear in 
> the selector ("td#foo a:hover" has the same specificity as "#foo 
> td:hover a", namely 1-1-2). For rules with equal specificity, rules that 
> appear later in the CSS override rules that appear earlier.
> 
> Multiple selectors (a.foo, a.bar { ... } ) are equivalent to putting 
> each selector as a separate style and each can be overridden separately. 
> For example for the rule "#foo td a:hover, a:hover { ... }", it very 
> likely that "a:hover" will be overridden (0-1-1), while "#foo td 
> a:hover" will probably not (1-1-2).
> 
> That concludes the CSS lesson for today ;)
> Steven
> 
>