Re: New elements vs. Trident

Hi Dean, Maciej, and Dão,

On Sep 16, 2007, at 8:30 PM, Dean Edwards wrote:

>
> Dão Gottwald wrote:
>> Dean Edwards wrote:
>>> html\:newelement {
>>>  /* some style */
>>> }
>> IE doesn't handle XHTML, so I suppose you mean good old HTML with  
>> pseudo-namespaces?
>
> Yes.

Many keep referring to this as a hack or using the phrase pseudo- 
namespaces. However, if we include this in HTML and it happens to  
degrade gracefully in current and past versions of IE that is not  
really a hack or anything pseudo about it (though its not necessarily  
the same as namespaces in XML, it could be made to match it as much  
as is practical) [1].


• Does IE respect the self-closing tag in namespaced elements ("<... / 
 >")?
• Does IE require an xmlns attribute namesapce declaration?
     • How does it treat colon prefixed elements when no namespace  
exists?
• Does this work in head elements too?

If IE's treatment of namespaces is fairly close to the namespaces in  
XML recommendation, why not simply adopt an analogous recommendation  
for legacy HTML serializations.

If this is the case an excellent way to degrade gracefully for new  
HTML5 documents would be to include the following namespace bindings  
on a backwards compatible HTML5 document:

  1. xmlns:htm5='http://www.w3.org/1999/xhtml'
  2. xmlns='http://www.w3.org/1999/xhtml'

Then all html5 prefixed elements and attributes and all elements and  
attributes with no prefix would be in the html namespace. For  
namespace aware UAs that is how those bindings would be interpreted.  
For non namespace aware UAs, perhaps the prefixed elements and  
attributes would simply be interpreted as unknown elements and  
attributes with a colon in the name (we would need to test this).

We should add some tests of major browsers to see how they react to  
prefixed names (or names with colons within them since they're  
generally namespace unaware), especially for unknown element names.  
So for non namespace aware browsers (for text/html) we should see how  
they handle ([3] and [4]).

• elements with a colon in their name
• xml style namespaces (do any other browsers support this IE stuff  
at all)

> It will work cross-browser if it is marked up as above.
> To style the new element you have to use namespace aware CSS.  
> Annoyingly, IE requires the namespace delimiter to be escaped:
> html\:newelement {
>  /* some style */
> }

So this means that IE is not namespace aware when it comes to CSS? Is  
that also the case if the xmlns namdspace bindings are included ( I  
thought IE behaved differently in that respect). The escaped colon  
works in Safari too.

>>> Cross-browser styling looks like this:
>>>
>>> html\:newelement, newelement {
>>>  /* some style */
>>> }
>> The first selector should match in any browser in HTML mode, the  
>> second selector should match in any browser in XML mode if html is  
>> the default namespace in that CSS file ... so what are we talking  
>> about?

When you say XML mode are you referring to the namespace mode in IE?  
If that's what you're saying are you calling XML mode because IE  
expects those to be in XML then (i.e., self-closing tags are  
respected)? What about IE and error handling in these namespaced  
regions in text/html mode?

It would be good to add this info to the wiki [5].


Take care,
Rob

[1]: <http://www.w3.org/TR/REC-xml-names/>
[2]: <http://esw.w3.org/topic/HTML/ 
ThoughtExperimentInGracefulDegradation>

[3]: <http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C! 
DOCTYPE%20html%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20XHTML%201.0% 
20Strict%2F%2FEN%22%0A%20%20%20%20%20%20%20%20%22http%3A%2F% 
2Fwww.w3.org%2FTR%2Fxhtml1%2FDTD%2Fxhtml1-strict.dtd%22%3E%0A%3Chtml% 
20lang%3D%22en%22%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'% 
20xmlns%3Ahtml5%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml'%3E%0A% 
3Chead%3E%0A%09%3Cmeta%20http-equiv%3D%22content-type%22%20content%3D% 
22text%2Fhtml%3B%20charset%3Dutf-8%22%20%2F%3E%0A%09%3Cstyle%20type% 
3D'text%2Fcss'%3E%0A%2F*%09p%20%7Bcolor%3A%20red%3B%7D*%2F%0A%09html5% 
5C%3Aunknownblock%20%7B%0A%09%09color%3A%20blue%3B%0A%09%7D%0A%09%0A% 
09html5%3Aunknownblock%20%7B%0A%09%09color%3A%20green%3B%0A%09%7D%0A% 
09html5%7Cunknownblock%20%7B%0A%09%09color%3A%20red%3B%0A%09%7D%0A%0A% 
0A %20 %20%3C%2Fstyle%3E%0A%0A%09%3Ctitle%3ETest%20Unknown%20Elements% 
3C%2Ftitle%3E%0A%09%3Chtml5%3Aunknownhead%20withattribute2% 
3D'andvalue2'%3Esome%20text%3C%2Fhtml5%3Aunknownhead%3E%0A%09%3Chtml5% 
3Aunknownvoid%20withattribute%3D'ThisIsAVoidHeadElement'%20%2F%3E%0A% 
3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cp%3ETo%20understand%20these%20results% 
2C%20the%20DOM%20viewer%20shows%20how%20your%20browser%20adds% 
20unknown%20elements%20to%20the%20DOM%20tree.%20Elements%20that%20are% 
20successfully%20added%20show%20up%20as%20indented%20child%20nodes% 
20of%20the%20parent%20node.%20Elements%20that%20are%20not% 
20successfully%20added%20will%20show%20up%20with%20only%20a%20portion% 
20of%20the%20element%20added%20as%20a%20child.%20Other%20portions%20of 
%20the%20element%20will%20be%20added%20as%20additional%20sibling% 
20nodes%20instead%20of%20child%20nodes%20of%20the%20unknown%20element. 
%3C%2Fp%3E%0A%09%3Chtml5%3Aunknownblock%20withattribute3% 
3D'andvalue3'%3E%0A%09%3Ch1%3Ewith%20a%20heading%20inside%20the% 
20unknown%20element%3C%2Fh1%3E%0A%09%3Cp%3Eand%20a%20paragraph% 
20contained%20in%20the%20unknown%20block%20element%3C%2Fp%3E%20and% 
20some%20characters%3C%2Fhtml5%3Aunknownblock%3E%0A%09%3Cdiv%3E%3Cp% 
3EAnd%20also%20a%20div%20after%20the%20unknown%20block%3C%2Fp%3E%3C% 
2Fdiv%3E%0A%09%3Chtml5%3Aunknownvoid%20withattribute4% 
3D'ThisIsAVoidBodyElement'%2F%3E%0A%09%3Cp%3EA%20paragraph%20with%20% 
3Chtml5%3Aunknownphrase%3Ea%20phrase%3C%2Fhtml5%3Aunknownphrase%3E% 
20to%20make%20sure%20it%20doesn't%20impliitly%20close%20the%20p% 
20element.%3C%2Fp%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E>


[4]:  without the namespace bindings:
<http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE% 
20html%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20XHTML%201.0%20Strict%2F% 
2FEN%22%0A%20%20%20%20%20%20%20%20%22http%3A%2F%2Fwww.w3.org%2FTR% 
2Fxhtml1%2FDTD%2Fxhtml1-strict.dtd%22%3E%0A%3Chtml%20lang%3D%22en%22% 
20%3E%0A%3Chead%3E%0A%09%3Cmeta%20http-equiv%3D%22content-type%22% 
20content%3D%22text%2Fhtml%3B%20charset%3Dutf-8%22%20%2F%3E%0A%09% 
3Cstyle%20type%3D'text%2Fcss'%3E%0A%2F*%09p%20%7Bcolor%3A%20red%3B%7D* 
%2F%0A%09html5%5C%3Aunknownblock%20%7B%0A%09%09color%3A%20blue%3B%0A% 
09%7D%0A%09%0A%09html5%3Aunknownblock%20%7B%0A%09%09color%3A%20green% 
3B%0A%09%7D%0A%09html5%7Cunknownblock%20%7B%0A%09%09color%3A%20red%3B% 
0A%09%7D%0A%0A%0A %20 %20%3C%2Fstyle%3E%0A%0A%09%3Ctitle%3ETest% 
20Unknown%20Elements%3C%2Ftitle%3E%0A%09%3Chtml5%3Aunknownhead% 
20withattribute2%3D'andvalue2'%3Esome%20text%3C%2Fhtml5%3Aunknownhead% 
3E%0A%09%3Chtml5%3Aunknownvoid%20withattribute% 
3D'ThisIsAVoidHeadElement'%20%2F%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A% 
3Cp%3ETo%20understand%20these%20results%2C%20the%20DOM%20viewer% 
20shows%20how%20your%20browser%20adds%20unknown%20elements%20to%20the% 
20DOM%20tree.%20Elements%20that%20are%20successfully%20added%20show% 
20up%20as%20indented%20child%20nodes%20of%20the%20parent%20node.% 
20Elements%20that%20are%20not%20successfully%20added%20will%20show% 
20up%20with%20only%20a%20portion%20of%20the%20element%20added%20as%20a 
%20child.%20Other%20portions%20of%20the%20element%20will%20be%20added% 
20as%20additional%20sibling%20nodes%20instead%20of%20child%20nodes% 
20of%20the%20unknown%20element.%3C%2Fp%3E%0A%09%3Chtml5%3Aunknownblock 
%20withattribute3%3D'andvalue3'%3E%0A%09%3Ch1%3Ewith%20a%20heading% 
20inside%20the%20unknown%20element%3C%2Fh1%3E%0A%09%3Cp%3Eand%20a% 
20paragraph%20contained%20in%20the%20unknown%20block%20element%3C%2Fp% 
3E%20and%20some%20characters%3C%2Fhtml5%3Aunknownblock%3E%0A%09%3Cdiv% 
3E%3Cp%3EAnd%20also%20a%20div%20after%20the%20unknown%20block%3C%2Fp% 
3E%3C%2Fdiv%3E%0A%09%3Chtml5%3Aunknownvoid%20withattribute4% 
3D'ThisIsAVoidBodyElement'%2F%3E%0A%09%3Cp%3EA%20paragraph%20with%20% 
3Chtml5%3Aunknownphrase%3Ea%20phrase%3C%2Fhtml5%3Aunknownphrase%3E% 
20to%20make%20sure%20it%20doesn't%20impliitly%20close%20the%20p% 
20element.%3C%2Fp%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E>

[5]: <http://esw.w3.org/topic/HTML/ 
ThoughtExperimentInGracefulDegradation>