[drupal-devel] CSS checking

[Steven Wittens]

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