Re: [css3-conditional] feature queries

On 15/06/2011 2:50 AM, Tab Atkins Jr. wrote:
> On Tue, Jun 14, 2011 at 12:46 AM, Alan Gresley<alan@css-class.com>  wrote:
>> On 14/06/2011 12:25 PM, L. David Baron wrote:
>>> I actually think this requirement is good; I think testing for a
>>> property-value pair rather than just a property is likely to be the
>>> right level of feature detection.  I could be wrong, though.
>>
>>
>> After seeing many comments from authors here and in other mailing list over
>> many years, the overwhelming consensuses is to query the support of just the
>> property.
>
> That would make it impossible to test if a property was changed to
> accept a new kind of value.


Can you give examples of current and possible future properties and/or 
values but keeping in mind that support for @supports is currently not 
present and such support may come after certain properties and values 
are un-prefixed and interoperable?


> That seems extremely unfortunate.


Remember I did state this from an authors perspective and after years of 
following both the discussions on www-style and css-discuss. Many of 
these issues about support was for cutting edge CSS3 (from a 2008 
perspective), display: inline-block for Gecko, display: table (and 
properties) for IE or simply issues about support for alpha transparency 
in both background-color or something like PNGs.

Currently there is a crisis among many authors about if they should 
support IE6, just IE7+, just IE8 or explore this wonderful CSS3 that IE9 
and better yet IE10 has supports. Also consider that the use of 
gradients and SVGs (from kilobytes to bytes) along with the background 
properties is causing a revolution in approaches to CSS design.


> It
> also increases the probability of lying - experience has shown that
> the less specific the query is, the more likely it will be degraded by
> lies.
>
> ~TJ


I agree with this point but why should browsers continue to lie? From my 
authoring perspective, my main issue has been support of background-size 
(either the background-property or in background shorthand). Below is 
how I would solve it. With the current trend towards CSS3 that has many 
properties and values and to add, very long of syntax, just imagine part 
of the below in a @supports {...} query?


element {
   background: blue;
   background: url(better-than-nothing.gif) center /* for IE6- */
   background: url(hope-for-the-best.png) center /* for IE7 */
   background: url(image3.png) 0% 0% no-repeat, url(image2.png) 0% 0% 
no-repeat, url(image4.png) right 20px no-repeat, rgba(50, 50, 255, 0.3);
   background-size: 40% auto, 40% auto, 70% 250px; /* for browsers that 
don't support background-size in background-shorthand */
   background: url(image3.png) 0% 0% / 40% auto no-repeat, 
-ms-linear-gradient(0deg, rgba(255,255,255,0.5), rgba(0,0,255,0.3)), 
url(image2.png) 0% 0% / 40% auto no-repeat, url(image4.png) right 20px / 
70% 250px no-repeat, rgba(50, 50, 255, 0.3); /* for 1E10 */
   background: url(image3.png) 0% 0% / 40% auto no-repeat, 
url(image2.png) 0% 0% / 40% auto no-repeat, url(images/image4.png) right 
20px / 70% 250px no-repeat, rgba(50, 50, 255, 0.3); /* for 1E9 */
   background: url(image3.png) 0% 0% / 40% auto no-repeat, 
-ms-linear-gradient(0deg, rgba(255,255,255,0.5), rgba(0,0,255,0.3)), 
url(image2.png) 0% 0% / 40% auto no-repeat, url(image4.png) right 20px / 
70% 250px no-repeat, rgba(50, 50, 255, 0.3); /* for 1E10 */
   background: url(image3.png) 0% 0% / 40% auto no-repeat, 
linear-gradient(0deg, rgba(255,255,255,0.5), rgba(0,0,255,0.3)), 
url(image2.png) 0% 0% / 40% auto no-repeat, url(image4.png) right 20px / 
70% 250px no-repeat, rgba(50, 50, 255, 0.3);
}



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 15 June 2011 04:36:55 UTC