html - Can you style XHTML elements in another namespace using id and class name css selectors?

Question

Welcome To Ask or Share your Answers For Others

html - Can you style XHTML elements in another namespace using id and class name css selectors?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Can you style XHTML elements in another namespace using id and class name css selectors?

I'm developing an application that uses ubiquity-xforms. Previously I had been serving the pages up as text/html with the XHTML 1.0 doctype.

If I switched the mime-type to application/xhtml+xml, I would see a pretty big performance improvement, because the javascript could use the get____NS() functions, instead of what it's doing now (slowly iterating through the entire DOM tree every time it needs to select an element).

But when I tried this, a bunch of my CSS stopped working. I noticed that when I inspected the elements, either in Firebug or in the WebKit Nightly Web Inspector, the point of failure were '.classname' and '#id' css selectors on elements in the XFORMS namespace. I also noticed that in the listed DOM properties for those elements they were lacking both 'id' and 'className' attributes.

My question is, is there a way that I can get the UA to recognize these as classes and ids?

Things I've tried, to no avail:

specifying the "id" attributes as ID in an inline doctype's ATTLIST
trying every doctype I could, or no doctype at all
qualifying the id and class name attributes in the xhtml namespace (ie. xhtml:id)

Here's some sample xhtml. Doesn't work in either Firefox 3.5 or Safari 4 / WebKit Nightly

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xhtml="http://www.w3.org/1999/xhtml"
  xmlns:xf="http://www.w3.org/2002/xforms">
<head>
    <style type="text/css">
    /* <![CDATA[ */
    #test {
        background-color: red;
    }
    .testing {
        color: blue;
    }
    /* ]]> */
    </style>
</head>
<body>
    <xf:group id="test" class="testing">Test</xf:group>
</body>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:30:51+0000

Frankie,

porneL's answer is right -- in XHTML mode you have to use different CSS rules, because there is nothing 'special' about @id an @class.

Even armed with this knowledge, your problems aren't over though. :)

The temptation might be to just put HTML and XHTML CSS selectors together, and apply them to the same rule:

@namespace xf url(http://www.w3.org/2002/xforms);

xf:input.surname, xf|input[class~="surname"] {
  color: green;
}

However, a further problem is that IE will ignore the entire rule, because it doesn't like the XHTML syntax. So littered through Ubiquity XForms you'll see things like this:

@namespace xf url(http://www.w3.org/2002/xforms);

xforms:hint.active, xf:hint.active {
  display: inline;
}

xf|hint[class~="active"] {
  display: inline;
}

As you can see we've had to repeat the styling with different selectors. (This is something we're hoping to address with a function that will abstract out the style-setting task. Then you'll only have to write one rule.)

Note a couple of extra things:

that the HTML rules are using ':' as a literal character (hence the '' to escape), and know nothing of namespaces;
the XHTML CSS rules use the '~=' operator, which means that the attribute must contain the value specified, rather than be exactly equal to it.

Categories

html - Can you style XHTML elements in another namespace using id and class name css selectors?

html - Can you style XHTML elements in another namespace using id and class name css selectors?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags