HTML and CSS Reference
In-Depth Information
The proposed syntax for @supports resembles media queries in the following respects:
Conditions must be wrapped in parentheses.
and .
Multiple conditions can be specified using the keyword
not at the beginning.
However, alternative conditions are separated by the keyword or rather than commas.
For example, you can test whether a browser supports flex layout like this:
A negative set of conditions is created by placing the keyword
@supports (display: flex) or (display: -webkit-flex) {
/* Flex layout rules go here */
A browser capable of handling the final flex layout syntax that also understands @supports rules applies the
styles inside the curly braces. Other browsers ignore the rules. So, you could use the cascade to provide basic
rules to older browsers, and then override them by placing the @supports rule last.
When multiple conditions create ambiguity, you indicate precedence by wrapping an extra pair of
parentheses around conditions that need to be considered together. For example, the following is ambiguous:
@supports (transform: scale(2)) and (border-radius: 15px) or (linear-gradient(#FFF, #000)
Does it mean that scale() and border-radius need to be supported, and if not, linear-gradient() is the
alternative? Or does it mean that scale() and either border-radius or linear-gradient() must be supported?
If it's the first case, the rule needs to be rewritten like this:
@supports ( (transform: scale(2)) and (border-radius: 15px) ) or (linear-gradient(#FFF, #000)
In the second case, you need this:
@supports (transform: scale(2)) and ( (border-radius: 15px) or (linear-gradient(#FFF, #000) )
One of the most ingenious aspects of @supports is that it eliminates problems with partial support for CSS
features. The @supports rule tests not only the property, but also the value supplied. If the value fails, so does the
rule. For example, all browsers support the display property, but they don't all support flex as one of its values.
While waiting for @supports to be implemented by browsers, you can use a lightweight JavaScript library
called Modernizr ( ) to test browser support for CSS3 features. If a feature isn't supported, it
injects a class, such as no-boxshadow , into the web page's <html> tag. This allows you to create different style rules
for browsers that don't support particular features. You can learn how to use Modernizr from my tutorial at www. .
The draft CSS3 Text module ( ) proposes a new hyphens property, which
accepts the following values:
none This is the default. Words are not hyphenated.
manual Words are hyphenated only when they contain characters—such as the HTML
soft hyphen entity &shy; —that explicitly suggest hyphenation opportunities.
Search WWH ::

Custom Search