Re: WHATWG Attribute puzzle

Lachlan Hunt wrote:
> Matthew Raymond wrote:
> 
>>   Say you're using one of those new WHATWG values for the |type| 
>>attribute of <input>:
>>
>>| <input type="date" name="date1">
>>
>>   How do you style the above markup so that user agents that support 
>>the "date" type will user one presentation, but legacy user agents will 
>>use another presentation?
> 
> This is simply not possible to do with any useful method, simply because 
> there is no way to select an element based on the way the user agent 
> processes it, only based on its markup.

    That has been my observation. Things are styled on the markup 
version of the attributes (at best) rather than the associated DOM property.

>>In other words, how would I put a green border around the date control I'd
>>see in a Web Forms 2.0 compliant browser, but show a red border around the
>>text box created in browsers that don't support it?
>>
>>   I'm pretty sure the following does *not* work:
>>
>>| input { border-width: 2px; border-color: blue; }
>>| input[type=text] { border-color: red; }
>>| input[type=date] { border-color: green; }
> 
> No, it won't work, because UAs are still going to have type="datetime" 
> within the DOM, even though they are treating it as type="text".

    I think you mean that the DOM property would be "text" while the 
markup would have "date"...

> As a work around, you could possibly make use of a selector that is 
> commonly supported by Web Forms 2 UAs, but not by non-Web Forms 2 UAs. 
> Basically, you'll have to make use of a CSS filter of some kind. 

    Something like this?:

| input { /* Default styling. */ }
| input:dom(type, "date") { /* Date styling. */ }

> However, this would fail for any UA that implements the selector used, 
> but not web forms or vice versa.

    If they implement the selector, but not the control, the selector 
would be ignored due to the fact that the value of the DOM property 
would not be "date". Also, you could specifically handle certain 
situations where there is no support:

| input[type=date]:dom(type, "text") { /* Styling. */ }

> The only other possible solution could involve a script of some kind 
> that tests for WF2 support, but I don't believe there can ever be good 
> CSS only solution.

    I think script solutions should be avoided. Problems like this will 
exist as long as HTML does, and it's likely to appear in XML languages 
as well.

Received on Tuesday, 5 April 2005 13:41:37 UTC