Nuova sintassi per le query supporti per intervallo

Scopri come questa nuova sintassi può semplificare le query supporti.

Rachel Andrew

Le query supporti hanno attivato il adattabile, mentre le funzionalità di intervallo che consentono di testare le dimensioni minime e massime dell'area visibile vengono utilizzate da circa l'80% dei siti che utilizzano query supporti. La specifica Query supporti livello 4 include una sintassi migliorata per queste query di intervallo.

I seguenti esempi mostrano come semplificare le query.

Una tipica query supporti per la larghezza minima dell'area visibile potrebbe essere scritta come segue:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

La nuova sintassi consente di utilizzare un operatore di confronto:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Test della larghezza massima per:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

E la versione che utilizza la sintassi di livello 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Questa sintassi è in grado di semplificare le query, in particolare durante il test tra due larghezze. Nell'esempio seguente, la query supporti verifica un'area visibile con una larghezza minima di 400 px e una larghezza massima di 600 px.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Questo può essere riscritto nella nuova sintassi come:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

La funzionalità che stai testando, in questo caso width, va tra i due valori.

Oltre a ridurre il livello di dettaglio delle query supporti, la nuova sintassi offre il vantaggio di essere precisa. Le query min- e max- includono i valori specificati, ad esempio min-width: 400px esegue il test per una larghezza di 400 px o superiore. La nuova sintassi ti consente di spiegare in modo più esplicito cosa intendi ed evitare il potenziale di query contrastanti.

Per utilizzare la nuova sintassi dell'intervallo e tenere conto dei browser che non l'hanno ancora implementata, è disponibile un plug-in PostCSS che riscriverà la nuova sintassi alla vecchia sintassi nei tuoi fogli di stile.