Home/ Questions/Q 608265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:26:40+00:00

I’m developing an application that uses ubiquity-xforms. Previously I had been serving the pages

  • 0

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:

  1. specifying the “id” attributes as ID in an inline doctype’s ATTLIST
  2. trying every doctype I could, or no doctype at all
  3. 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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.
    • 0