Question

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>

Answer 1

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.

Answer 2

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 {}

Answer 3

You have no doctype, character encoding, etc. Here you go:

Change to this exactly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--Always include character encoding and content-type-->
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
</head>

友情链接