You can use conjunctions (and
), disjunctions (or
), and/or negations (not
) to combine two or more property/value pairs in a @supports
condition. However, when using conjunctions, disjunctions and/or negations together, you must observe the following rules:
- When using both
and
andor
, you must use parentheses to define the order in which they apply. If you don't, the condition is considered invalid and the whole rule is ignored; - When combining
not
withand
and/oror
operators, you must wrap the wholenot
expression with parentheses (unless thenot
exists on its own at the top level). Otherwise, the whole rule is ignored.
To give you some ideas on how you could make use of conjunctions, disjunctions and/or negations together, consider the following examples:
@supports (-ms-ime-align: auto) and (overflow-wrap: break-word) { /* ... */ }
@supports (height: 100vh) and ((transform-style: preserve) or (-moz-transform-style: preserve)) { /* ... */ }
@supports (-ms-ime-align: auto) and (not (overflow-wrap: break-word)) { /* ... */ }
In the following examples, since not
exists on its own at the top level, you do not need to wrap it in parentheses:
@supports not ((transform-style: preserve) or (-moz-transform-style: preserve)) { /* ... */ }
@supports not ((transform-style: preserve) and (-moz-transform-style: preserve)) { /* ... */ }
Hope you found this post useful. It was published . Please show your love and support by sharing this post.