La nuova sintassi dell'intervallo di query multimediali CSS

Ci affidiamo Query multimediali CSS per la selezione e lo styling degli elementi in base a una condizione mirata. Questa condizione può essere di tutti i tipi, ma in genere rientra in due campi: (1) il tipo di supporto utilizzato e (2) una caratteristica specifica del browser, del dispositivo o persino dell'ambiente dell'utente.

Quindi, supponiamo di voler applicare un determinato stile CSS a un documento stampato:

@media print {
  .element {
    /* Style away! */
  }
}

Il fatto che possiamo applicare stili a una certa larghezza del viewport ha reso CSS Media Query un ingrediente fondamentale del responsive web design dai tempi di Ethan Marcotte coniato il termine. Se la larghezza della finestra di visualizzazione del browser è di una certa dimensione, applica una serie di regole di stile che ci consentono di progettare elementi che rispondano alle dimensioni del browser.

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

Si noti la and lì dentro? Questo è un operatore che ci permette di combinare le affermazioni. In quell'esempio, abbiamo combinato una condizione che il tipo di supporto sia a screen e quello è min-width la funzione è impostata su 30em (o sopra). Possiamo fare la stessa cosa per scegliere come target una gamma di dimensioni del viewport:

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

Ora questi stili si applicano a un intervallo esplicito di larghezze della finestra anziché a una singola larghezza!

Ma la specifica Media Query Level 4 ha introdotto una nuova sintassi per prendere di mira una gamma di larghezze di viewport utilizzando comuni operatori di confronto matematico, cose come <, >e = — che hanno più senso sintatticamente mentre si scrive meno codice.

Analizziamo come funziona.

Nuovi operatori di confronto

Quest'ultimo esempio è una buona illustrazione di come abbiamo "falsificato" gli intervalli combinando le condizioni usando il and operatore. Il grande cambiamento nella specifica Media Query Livello 4 è che abbiamo nuovi operatori che confrontano i valori anziché combinarli:

• < valuta se un valore è meno di un altro valore
• > valuta se un valore è più grande di un altro valore
• = valuta se un valore è pari ad un altro valore
• <= valuta se un valore è minore o uguale a to un altro valore
• >= valuta se un valore è maggiore o uguale a to un altro valore

Ecco come potremmo aver scritto una query multimediale che applica gli stili se il browser lo è 600px largo o maggiore:

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

Ecco come appare scrivere la stessa cosa usando un operatore di confronto:

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

Targeting per un intervallo di larghezze di viewport

Spesso quando scriviamo CSS Media Query, creiamo ciò che viene chiamato a punto di interruzione — una condizione in cui il design "si interrompe" e una serie di stili vengono applicati per risolverlo. Un design può avere un sacco di punti di interruzione! E di solito si basano sul fatto che la finestra sia compresa tra due larghezze: dove inizia il punto di interruzione e dove finisce il punto di interruzione.

Ecco come l'abbiamo fatto usando il and operatore per combinare i due valori di breakpoint:

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

Inizi a farti un'idea di quanto sia più breve e facile scrivere una query multimediale quando abbandoniamo il booleano and operatore a favore della nuova sintassi di confronto di intervalli:

@media (400px <= width <= 1000px) {
  /* etc. */
}

Molto più facile, vero? Ed è chiaro esattamente cosa sta facendo questa media query.

Supporto browser

Questa sintassi delle query multimediali migliorata è ancora agli albori al momento in cui scrivo e non è così ampiamente supportata al momento come l'approccio che combina min-width ed max-width. Ci stiamo avvicinando, però! Safari è l'unico grande ostacolo a questo punto, ma c'è un biglietto aperto per questo che puoi seguire.

Diamo un'occhiata a un esempio

Ecco un layout adatto per schermi più grandi, come un desktop:

Questo layout ha stili di base comuni a tutti i punti di interruzione. Ma man mano che lo schermo si restringe, iniziamo ad applicare stili che vengono applicati condizionalmente a diversi punti di interruzione più piccoli che sono ideali per i tablet fino ai telefoni cellulari:

Per vedere cosa sta succedendo, ecco come risponde il layout tra i due punti di interruzione più piccoli. Viene visualizzato anche l'elenco di navigazione nascosto title nel main viene aumentato font-size.

Tale modifica viene attivata quando le modifiche del viewport passano dalla corrispondenza delle condizioni di un supporto all'altro:

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

Abbiamo combinato alcuni dei concetti che abbiamo trattato! Stiamo prendendo di mira dispositivi con a screen tipo di supporto, valutando se la larghezza della finestra è maggiore o uguale a un valore specifico utilizzando la nuova sintassi dell'intervallo di funzionalità multimediali e combinando le due condizioni con il and operatore.

OK, quindi è ottimo per i dispositivi mobili di seguito 768px e per altri dispositivi uguali o superiori a 768px. Ma che dire di quel layout desktop... come ci arriviamo?

Per quanto riguarda il layout:

• I main l'elemento diventa una griglia a 12 colonne.
• Un pulsante viene visualizzato sull'immagine.
• La dimensione del .title il carattere dell'elemento aumenta e si sovrappone all'immagine.

Supponendo di aver svolto i nostri compiti e determinato esattamente dove devono avvenire tali modifiche, possiamo applicare quegli stili quando la finestra corrisponde al width condizione per quel punto di interruzione. Diremo che il punto di interruzione è a 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

Giocaci con:

Perché la nuova sintassi è più facile da capire

In conclusione: è più facile distinguere un operatore di confronto (es width >= 320px) che per distinguere tra min-width ed max-width usando il and operatore. Rimuovendo la sfumatura tra min- ed max-, ne abbiamo uno width parametro con cui lavorare e gli operatori ci dicono il resto.

Al di là delle differenze visive di quelle sintassi, stanno anche facendo cose leggermente diverse. Usando min- ed max- equivale all'utilizzo di operatori di confronto matematico:

• max-width è equivalente a <= operatore (es (max-width: 320px) equivale a (width <= 320px)).
• min-width è equivalente a >= operatore (es (min-width: 320px) equivale a (width >= 320px)).

Si noti che nessuno dei due è l'equivalente di > or < gli operatori.

Facciamo un esempio direttamente dalla specifica Media Query Level 4 in cui definiamo stili diversi in base a un punto di interruzione a 320px nella larghezza della finestra utilizzando min-width ed max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

Entrambe le media query soddisfano una condizione in cui la larghezza del viewport è uguale a 320px. Non è esattamente quello che vogliamo. Vogliamo o una di queste condizioni piuttosto che entrambe contemporaneamente. Per evitare modifiche implicite, potremmo aggiungere un pixel alla query basata su min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

Mentre ciò garantisce che i due insiemi di stili non si applichino contemporaneamente quando la larghezza della finestra è 320px, qualsiasi larghezza della finestra compresa tra 320px ed 321px risulterà in una zona super piccola in cui nessuno degli stili in nessuna delle query viene applicato: una strana situazione di "flash di contenuto non stilizzato".

Una soluzione consiste nell'aumentare il secondo valore della scala di confronto (numeri dopo la virgola decimale). 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

Ma sta diventando sciocco ed eccessivamente complicato. Ecco perché la nuova sintassi dell'intervallo di funzionalità multimediali è un approccio più appropriato:

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

Concludendo

Accidenti, abbiamo trattato molto sulla nuova sintassi per il targeting degli intervalli di larghezza del viewport in CSS Media Query. Ora che la specifica Media Query Level 4 ha introdotto la sintassi ed è stata adottata nei browser Firefox e Chromium, ci stiamo avvicinando alla possibilità di utilizzare i nuovi operatori di confronto e di combinarli con altre funzionalità multimediali della gamma oltre a width, piace height ed aspect-ratio

E questa è solo una delle funzionalità più recenti introdotte dalla specifica di livello 4, insieme a a serie di query che possiamo fare in base alle preferenze dell'utente. Non finisce qui! Dai un'occhiata al Guida completa alle query sui media CSS per una sbirciatina cosa potrebbe essere incluso in Media Query di livello 5.