Re: Feature queries

On Dec 8, 2009, at 11:48 PM, fantasai wrote:

> bz asked me to post a proposal on feature queries: syntax for allowing
> authors to apply CSS rules based on whether a particular CSS feature
> is supported.
> 
> The key here is to check against a property+value pair, not a general
> feature class. The UA already makes a support claim for property+value
> pairs when it chooses to parse and cascade them.
> 
> My proposal is two syntaxes. The first is an at-rule, which is handy if
> part of the style sheet depends on a major CSS feature such as Tempate
> Layout.
> 
>  @supports ( declaration-block ) {
>     ruleset
>  }
> 
> e.g.
> 
>  @supports ( display: "bc"; ) {
>    body { ... }
>    .sidebar { ... }
>    .main { ... }
>  }
> 
> This could potentially support media-query like operators like 'and'
> and 'not'.

In WebKit, we've been using media queries for this, not strictly on a property
basis, but rather describing more general features of the rendering engine
that we think are significant enough to cause designers to want to conditionalize
big blocks of style. So, we have media queries for 2d- and 3d-transforms:

@media all and (transform-2d: 0)
  div { left: 10px; }
}

@media all and (transform-2d)
  div { transform: rotate(10deg); }
}

We also implemented the Media API:
<http://www.w3.org/TR/cssom-view/#the-media-interface>
because we think it's important that you can also do such queries from JavaScript.

I don't really like media queries for this, because the syntax is confusing
(why do I need the "all and"?), and you can't have 'else' clauses. So I'd welcome
some other way to do this, but it needs a corresponding JavaScript API like the
Media interface.

> The second is a !important-like syntax: all declarations with !supported
> must be supported for the style rule to take effect. This could be useful
> for more localized constructs, like changing text color depending on
> text-shadow support.
> 
>  tag {
>    background: white;
>    color: gray;
>  }
> 
>  tag {
>    color: white;
>    text-shadow: black 0 0 4px !support;
>  }

This is confusing to me, and I think would be hard to implement. I much prefer
using @-rules for this.

There's a broader issue that we need to be aware of when trying to spec something
like this on a property-by-property basis. Just because a browser implements parsing
of a property doesn't mean that it fully implements the full behavior of the property.
For example, a browser could support transform: with 2d values, but not with 3d (as
Firefox does now). Also, Google Chrome parses 3d-transform-related properties like
-webkit-perspective and store them in the style system, but does not actually implement
rendering of 3D transforms. This causes Modernizr to report that Chrome implements 3D
transforms, when it does not.

So I'd suggest caution when specifying some kind of media-query-like syntax for
querying support based on property name.

Simon

Received on Wednesday, 9 December 2009 18:52:01 UTC