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 (
http://modernizr.com/
)
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.
Tip
Hyphenation
The draft CSS3 Text module (
http://dev.w3.org/csswg/css3-text/
)
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
­
—that explicitly suggest hyphenation opportunities.
