Menu
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:
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>
501
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:
167
You don't have to use #id/.class selectors. Instead you can use:
[id=test] {}
[class|=testing] {}
which are equivalent.
AFAIK class is HTML-specific thing, and because XML namespaces are completely insane, XHTML attributes aren't in the XHTML namespace! You're probably out of luck with this one.
For ID you might try xml:id, but I haven't checked if anything actually supports it.
In case you wanted to match namespaced elements, that's possible with CSS Namespaces:
@namespace xf "http://www.w3.org/2002/xforms";
xf|group {}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
