Previous Message
Next Message

Re: [css-d] tip on using mixed classes

Sent by Eric A. Meyer on 2 April 2002 11:11


At 21:02 -0500 4/1/02, Elaine Nelson wrote:

>I'm sure I'm not the only person who'd look at this and say "sweeeet...."
>
>http://catcode.com/csstips/classes.html
>
>but a question of curiosity - anybody know any immediate pitfalls?

    I know of one: I found when I tested this a year ago that IE5.x 
will only address one value at a time, and that other browsers have 
their problems as well.  Consider this markup:

    <div class="urgent warning test">yee ha</div>

In IE5.x you could safely write styles like so and have them match properly:

    div.urgent {font-weight: bold;}
    div.warning {color: red;}
    div.test {background: cyan;}

You could not, however, properly do things like:

    div.urgent.warning {font-style: italic;}

The problem was that Explorer was too "loose" about what class 
selectors matched what class values.  The above should only match 
elements whose 'class' value contains both 'urgent' and 'warning' in 
a space-separated list.  Explorer instead matched elements whose 
'class' value contained either value.
    I don't know if IE6 fixed this or not, so I'd be interested to 
hear.  You can try out 
<http://www.meyerweb.com/eric/css/tests/multiclass.html> to see what 
browsers do.  I'll put a reference screenshot in a bit, but in the 
interim, please note: there should be NO red text on the page.  If 
there is, the browser you're testing has bugs in its support.

--
Eric A. Meyer (http://www.meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
   -- Martina Kosloff (http://www.mako4css.com/)
Previous Message
Next Message

Message thread: