Un’istruzione condizionale è un’espressione all’interno della quale un enunciato diventa valido o meno a seconda del verificarsi di una condizione specifica. Si tratta di un costrutto presente in quasi tutte le più note soluzioni per la programmazione lo sviluppo che prima dell’introduzione delle Feature Queries non era utilizzabile in CSS, si dovevano quindi definire regole di stile condizionate attraverso codice scritto in altri linguaggi.
Ora, la regola @supports consente di includere delle dichiarazioni CSS in un blocco condizionale che verrà applicato soltanto nel caso in cui si verifichi una determinata condizione (supports condition), piuttosto che l’user agent utilizzato dall’fruitore (in pratica il suo browser Web) supporti la dichiarazione delimitata. Tale dichiarazione è classicamente composta da una coppia proprietà/valore separata dal simbolo dei due punti.
Le informazioni basate su @supports possono essere annidate e quindi prevedere più casi ed esiti differenti sulla base della soddisfazione o della mancata soddisfazione della supports condition, per questo motivo la sintassi delle Feature Queries consente l’utilizzo di parentesi graffe come delimitatori:
@supports (display: grid) // regola di stile da applicare nel caso in cui l'user agent supporti CSS grid
Un’ulteriore vantaggio delle Feature Queries risiede nella possibilità di utilizzare degli operatori per definire delle ordini complesse. Tali operatori sono: AND, con il quale specificare ulteriori dichiarazioni proprietà/valore da sottoporre a una condizione che sarà soddisfatta soltanto se tutte le dichiarazioni sono supportate:
(display: table-cell) and (display: list-item) and (..)
OR, con cui specificare ulteriori dichiarazioni proprietà/valore da sottoporre a una condizione che sarà soddisfatta se almeno una delle dichiarazioni è supportata:
(transform-style: preserve) or (-moz-transform-style: preserve)
e NOT, che consente di introdurre delle regole alternative nel caso in cui quelle espresse dalle dichiarazioni non siano supportate:
@supports not(mix-blend-mode: overlay) .foo img opacity: .. filter: alpha(opacity=..);
Chiaramente è sconsigliabile utilizzare NOT per introdurre alternative da applicare nei browser più datati, perché proprio questi ultimi potrebbero non supportare le Feature Queries.