{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Deceive 欺骗 的问题《Can you style XHTML elements in another namespace》','https://www.manongdao.com/q-222874.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
You have no doctype, character encoding, etc. Here you go:
Change to this exactly:
You don't have to use
#id/.classselectors. Instead you can use: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:
Frankie,
porneL's answer is right -- in XHTML mode you have to use different CSS rules, because there is nothing 'special' about
@idan@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:
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:
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: