Scopri come questa nuova sintassi può semplificare le query supporti.
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.