proposal: @supports and :supports

One common problem of CSS that is likely to become
worse: When something new is introduced, there is no
easy way to give styling that uses it only to UAs that
support it, and use older methods for UAs that do not.

#header {
  text-indent: -1000px;
  background-image: url("header.png");
  width: 600px;
  height: 300px;
}

#header {
  font-family: "RareFont", url("rarefont.tff");
}

The first example uses image replacement and the
second uses webfonts. (I'm not sure about the syntax,
but it's just an example.)

Webfonts are of course a much better solution when
available, but for UAs that don't support them, it
would be nice to still be able to use image
replacement. Even if this particular example is
resolved, there are still many other such examples.

That's why I propose to either introduce @supports
at-properties, :supports psuedo classes, or both.

#header {
  @supports "webfonts" {
    font-family: "RareFont", url("rarefont.tff");
  }
  @not-supports "webfonts" {
    text-indent: -1000px;
    background-image: url("header.png");
    width: 600px;
    height: 300px;
  }
}

-OR-

#header:supports("webfonts") {
  font-family: "RareFont" url("rarefont.tff");
}

#header:not(:supports("webfonts")) {
  text-indent: -1000px;
  background-image: url("header.png");
  width: 600px;
  height: 300px;
}

The CSS spec should specify a list of strings that can
be used. Also, @supports-property, @supports-value,
and @supports-selector could be useful.

@suppoorts/:supports would also be useful for taking
advantage of UA proprietary properties when available.
For example, if you wanted rounded outlines, but were
willing to settle for rounded borders:

@supports-property("-moz-outline-radius") {
  #content p {
    outline: .5ex solid navy;
    -moz-outline-radius: 3em;
  }
  #menu li {
    outline: .2ex dotted yellow;
    -moz-outline-radius: 1em;
  }
}

@not-supports-property("-moz-outline-radius") {
  #content p {
    border: .5ex solid navy;
    border-radius: 3em;
  }
  #menu li {
    border: .2ex dotted yellow;
    border-radius: 1em;
  }
}

If you have any similar ideas or would prefer
different syntax or something, please discuss.

- HeroreV


__________________________________________________
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com

Received on Monday, 22 May 2006 17:38:44 UTC