How to Use Multiple Conditions in CSS @supports?

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 and or, 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 with and and/or or operators, you must wrap the whole not expression with parentheses (unless the not 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)) {
    /* ... */
}