Feature Queries: istruzioni condizionali in CSS

Benché le Feature Queries siano una delle più interessanti funzionalità di CSS3, il loro supporto da parte di quasi tutti i browser Web più diffusi è divenuto disponibile soltanto di recente; all'appello mancano tutte le versioni di Internet Explorer ancora in uso, compresa la 11, ma per il resto la compatibilità cross-browser è ampiamente garantita. Nello specifico, le Feature Queries ci consentono di utilizzare le istruzioni condizionali all'interno delle regole di stile.

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), cioè che l'user agent utilizzato dall'utente (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 istruzioni 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 istruzioni 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.