Nuova sintassi per le query supporti per intervallo

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

Rachel Andrew

Le query supporti hanno abilitato il responsive design e 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 le query supporti. La specifica Media Queries 4 include una sintassi migliorata per queste query sull'intervallo.

Gli esempi riportati di seguito mostrano come può semplificare le query.

Una query sui media che verifica la larghezza minima dell'area visibile è scritta come segue:

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

La nuova sintassi consente l'utilizzo di 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 ha il potenziale di semplificare le query, in particolare quando si eseguono test tra due larghezze. Nel seguente esempio, la query sui media verifica la presenza di un viewport 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, si trova 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 testa per una larghezza di almeno 400 pixel. 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 tenendo conto dei browser che non l'hanno ancora implementata, esiste un plug-in PostCSS che riscriverà la nuova sintassi in quella precedente nei tuoi stili.