[prev in list] [next in list] [prev in thread] [next in thread] 

List:       mozilla-layout
Subject:    Re: Mozilla CSS class handling for XML doesn't WORK!
From:       Ian Hickson <ian () hixie ! ch>
Date:       2001-04-12 21:28:39
[Download RAW message or body]

On Thu, 12 Apr 2001, BB Duck wrote:
>
> The following simple CSS+XML example [1] works just fine under Opera
> and IE 5, any reason why Mozilla can't even handle it properly?

Actually, it turns out that Opera, IE and Mozilla all treat this
example incorrectly, with Mozilla doing it the best.

First of all, I am assuming that you intended for the XML stylesheet
processing instruction to point to the <style> element, and only the
style element:

   <?xml-stylesheet type="text/css" href="#css"?>

This is the correct syntax. However, it turns out that none of the
three browsers actually support this, as can be proved by changing
"#css" to "#somethingElse", and seeing that it works just as well.

In fact, all that is happening is that IE and Opera (and Mozilla, but
see below) are interpreting your "href" attribute value as meaning
"use the document as the stylesheet".

You can prove this by adding a couple of lines of CSS near the bottom
of the document, for example:

   <note class="right">This is a note with the class "right".</note>
   note { display: block; } document { color: red; }
   <note class="left">This is a note with the class "left".</note>

If you try this, you'll see that the document turns red!!!

I note that you included "{}" in your stylesheet. Maybe you wondered
why it was needed?

It's actually because without it, the stylesheet processors in all
three browsers were treating the whole document as a stylesheet, as I
mentioned above, and thus they were treating the first selector as

   <?xml-stylesheet type="text/css" href="#css"?> <!-- sidebars.xml
   --> <document> <style type="text/css"> style

...which of course is invalid, and thus was being ignored. Adding a {}
block makes the first selector get dropped, and "resets" the CSS
parser (in a manner of speaking).

So, why are Opera and IE applying your styles but not Mozilla? Well,
if you look carefully you'll notice Mozilla is actually applying one
of your styles -- the

   style {display:none;}

...line. Mozilla is not applying the two lines with 'class' selectors:

   note.right {font-weight:bold;}
   note.left {font-weight:italic;}

...because the '.' notation is specifically defined as being only for
HTML documents:

# For style sheets used with HTML, authors may use the dot (.)
# notation as an alternative to the "~=" notation when matching on the
# "class" attribute. Thus, for HTML, "DIV.value" and
# "DIV[class~=value]" have the same meaning. The attribute value must
# immediately follow the ".".
 -- http://www.w3.org/TR/REC-CSS2/selector.html#class-html

We actually also support it for XUL, and CSS3 will say that namespaces
may choose to allow the "." selector for one of their attributes, but
by default it should only be applied to HTML.

(As an aside, note that none of the browsers were applying the
'italic' style -- that's because font-weight doesn't take the value
'italic', you probably wanted 'font-style' instead.)

If you want to embed <style> blocks in arbitary XML documents, then
you can use the XHTML <style> block -- although that is a bit of a
hack in my opinion -- like this:

   <!-- sidebars.xml -->
   <document>
    <style type="text/css" xmlns="http://www.w3.org/1999/xhtml">
     style { display: none; }
     note[class~=right] { font-weight: bold; }
     note[class~=left] { font-style: italic; }
    </style>
    <note class="right">This is a note with the class "right".</note>
    <note class="left">This is a note with the class "left".</note>
   </document>

This will work in recent Mozilla builds.


-- Endnotes --

[1] Here is the example document we are referring to:

<?xml-stylesheet type="text/css" href="#css"?>
<!-- sidebars.xml -->
<document>
 <style type="text/css">
  {}
  style {display:none;}
  note.right {font-weight:bold;}
  note.left {font-weight:italic;}
 </style>
 <note class="right">This is a note with the class "right".</note>
 <note class="left">This is a note with the class "left".</note>
</document>

-- 
Ian Hickson                                     )\     _. - ._.)       fL
Netscape, Standards Compliance QA              /. `- '  (  `--'
+1 650 937 6593                                `- , ) -  > ) \
irc.mozilla.org:Hixie _________________________  (.' \) (.' -' __________

[prev in list] [next in list] [prev in thread] [next in thread]