Feature queries

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'.

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 second bit is mostly keyed off my earlier proposal for !required,
which would also take into account the results of cascading, and tie
the effect of the no !required rules into the cascading success of the
!required rules.)

~fantasai

Received on Wednesday, 9 December 2009 17:24:39 UTC