It has been proposed that CSS3 should include a systematic way to let authors detect features and capabilities of the browsers on which their code is interpreted, thus avoiding unfortunate partial rendering of their pages.

In a simple proposed syntax, a single rule set is disabled if any of its contained rules fails and is marked with !supported:

div {
  xn: xv !supported;
  yn: yv;
}

This is probably good enough for a lot of cases, but we might want to disable one rule set because of a failure in another one. One way to do that is to enclose them both in a @supported at-rule:

@supported {
  div.a {
    xn: xv !supported;
  }

  div.b {
    yn: yv;
  }
}

That is also like a media query, so why not use the same syntax?:

@media (supports) {
  div.a {
    xn: xv !supported;
  }

  div.b {
    yn: yv;
  }
}

That has the advantage that an unrecognized media query will fail if not itself supported.

Some have suggested to express what the author requires in the query itself:

@media (supports(xn: xv)) {
  div.b {
    yn: yv;
  }
}

div.a {
  xn: xv;
}

That's more flexible, as the tested feature does not have to be inside the at-rule, but it's also more verbose. The required feature could go outside using the previous syntax if it were named and then referenced by that name:

@media (supports(stuff)) {
  div.b {
    yn: yv;
  }
}

div.a {
  xn: xv !supported(stuff);
}

Can we find use cases for these more sophisticated forms?

• 2010-07#0333 — if conditions again by Sebastian Hennebrueder
• 2010-07#0081 — Selecting for features by Adrian Price
• 2010-03#0422 — Feature queries (was Proposal: writing-mode media feature) by MURAKAMI Shinyu
• 2009-12#0130 — Feature queries by fantasai
• 2009-10-19 — We Can Have Hack Free CSS With the @unsupported Directive by Chris Eppstein
• 2010-04-29 — Extensions to CSS 3 Media Queries by Dean Jackson
• 2005-04#0020 — Re: Targeting CSS3 only (evil?), either with pseudoclass or an extra syntax for properties. by Allan Sandfeld Jensen
• 2004-12#0084 — Marking style properties as "required" + groups of styles by Ben Ward

These should show a need for certain levels of complexity in the syntax.

h1 {
  text-shadow: white -3px -3px 3px black 3px 3px 3px;
  background-color: maroon;
  color: maroon;
}

@media (supports) {
  h1 {
    text-shadow: white -3px -3px 3px black 3px 3px 3px !supported;
    background-color: maroon;
    color: maroon;
  }
}