This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
ideas:feature-testing [2010/05/07 15:58] – tabatkins | ideas:feature-testing [2021/10/01 15:23] (current) – removed fantasai | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Feature Testing: ====== | ||
- | |||
- | As we produce more advanced CSS properties, the possibility of creating something that is unusable in the absence of that property increases. | ||
- | * the new layout modes (template, flexbox) may significantly screw up a page in a UA that supports CSS but not that specific layout mode | ||
- | * text-shadow may be used to render a run of text visible over a similar-color background | ||
- | |||
- | While you can in some cases design your page to fail gracefully, doing so becomes more difficult as time goes on, and restricting yourself to situations where you can do graceful fallback means missing out on a lot of useful and interesting types of displays. | ||
- | |||
- | It's time to bite the bullet and add feature-testing into CSS, so we can link together a suite of properties contingent on some of them being supported. | ||
- | |||
- | This is not going to be bulletproof. | ||
- | |||
- | ===== Suggestion: ===== | ||
- | |||
- | use the !required syntax, to allow the " | ||
- | |||
- | When used in a normal declaration block, if the property that !required is used on is not supported, the entire declaration block will be ignored. | ||
- | |||
- | As well, a new @supports{} @-rule is introduced. | ||
- | |||
- | ===== Examples: ===== | ||
- | |||
- | |||
- | h2 { | ||
- | background: white; | ||
- | color: black; | ||
- | } | ||
- | h2 { | ||
- | background: white; | ||
- | color: white; | ||
- | text-shadow: | ||
- | } | ||
- | |||
- | If text-shadow is supported, color is set to white and the text-shadow keeps it legible. | ||
- | |||
- | |||
- | body { position: relative; width: 800px; } | ||
- | #header { position: absolute; left: 0; right: 0; top: 0; height: 150px;} | ||
- | #sidebar { position: absolute; left: 0; top: 150px; width: 200px;} | ||
- | #content { position: absolute; left: 200px; right: 0;top: 150px; } | ||
- | @supports { | ||
- | body { | ||
- | display: " | ||
- | " | ||
- | 200px auto !required; | ||
- | } | ||
- | #header { position: a; height: auto;} | ||
- | #sidebar { position: b; width: auto;} | ||
- | #content { position: c; } | ||
- | } | ||
- | |||
- | In this example, if a browser supports Template Layout, the later `position` values override the previous values of " | ||
- | |||
- | ===== Consequences: | ||
- | |||
- | |||
- | This sort of feature testing is as close to ideal as I think we can get something in this space. | ||
- | |||
- | The user can, of course, trivially UA-detect by tying !required to a prefixed property. |