RE: [css3] "Selectors that People Actually Use"

Boris Zbarsky wrote:

> > Anyway div:not([id]) and div:not([id*=""]) are treated different in particular circumstances when using universal selectors and chained selectors.
> 
> Like what?  I know Gecko treats them differently: :not([foo*=""]) always matches 
> in Gecko right now.  Are there other UAs where those two selectors behave 
> differently?


Not that I have found any and really I shouldn't. This I did get incorrect, I think your offline challenges to me and Gecko treatment of one selector got crossed in my brain. :-)


> > You could also have a string of selectors.
> > 
> > div.x, dix.y {} /* legacy style */
> > div[id="x"] {} /* x special style */
> > div[id="y"] {} /* y special style */
> > div[id*=""], div:not([id*=""]) {} /* progressive enhancement general style */
> 
> None of that requires *=, though.  And progressive enhancement for what, 
> exactly?  Trying to lock out browsers that just don't support *= at all?
> 
> -Boris


Maybe I am. Take this use case for authors implementing 'background-size'.

http://css-class.com/test/css/backgrounds/background-compare1.htm

Only 3 UA I know support this property and they are Safari 3, Opera 9.5 and KTHML. The first div has a small image which is a png with 'background-size' applied. The later div has a very wide image which is a jpg. I must served up two different image for various UA. How do I do this?

If I wish to correctly use selectors, then I must wait until most UA support 'background-size' before I can use this progressive enhancement. In the development community there are some authors that would not give a hoot if they are using these advanced selectors incorrectly, so they will go for this progressive enhancement now (the side effect hopefully is that they realize these selectors' power). So what I have done in the above test case and likewise with my test template page is use this.


div.x {background: url(galaxy.jpg) center}
div.x[class*=""]:not(:first-child) {background: url(galaxy.png);background-size: 100% 100%;}


It would much better if I could just use.

div.x {background: url(galaxy.jpg) center}
div.x {background: url(galaxy.png) 0 0 0 0}


But no I have to lock out browsers to use 'background-size'.


Take my test case with text shadow. This time the the demo is shown without my hack to target Opera 9.5 with alternative style rules.

http://css-class.com/test/css/text-shadows/text-shadow-over-elements3.htm


.test {color: blue}
.shadow {color: #d9efaf; text-shadow: 10px 10px 0 hsla(50, 15%, 15%, 0.5)}

<h1 class="test">Up<span class="shadow">Size</span></h1>


Would should happen is that any UA that does support any property in a declaration should drop the whole declaration all together. Most UA do this since most don't support text shadow or hsla transparency color. 

Gecko 1.9 will only drop the declaration since it does not support text shadow. Safari 3 does it correctly. Opera 9.5 does otherwise, it uses the whole declaration but since it does not understand hsla transparency color it uses the color of the span. The rendering is not pretty since the text shadow color is the same color of the text that is casting the shadow.

So my question is how is the web authoring community at large going to make this grand jump into CSS3? Brad Kemper recently proposed on this list about targeting UA. Well here are some use cases from opposite perspectives that would support his proposal. He doesn't want to resort to h*cks but do it by best practices. I recently proposed background-position' which would cause some confusion with authors but would allow for this progressive enhancement (maybe a strong use case for reconsideration of my proposal).


BTW, nice to see that Safari 3 nightly builds fully support my selector test (though one test is not treated  correctly).


Alan

http://css-class.com/

Received on Thursday, 21 February 2008 01:27:00 UTC