Nuova sintassi per le query supporti per intervallo

Scopri come questa nuova sintassi può semplificare le query sui contenuti multimediali.

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 per una larghezza massima:

@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. Nell'esempio seguente, 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 rendere le query sui contenuti multimediali meno verbose, la nuova sintassi ha il vantaggio della precisione. Le query min- e max- includono i valori specificati, ad esempio i test min-width: 400px per una larghezza di almeno 400 pixel. La nuova sintassi ti consente di essere più esplicito su ciò che intendi ed evitare potenziali conflitti di query.

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.