Noua sintaxă a intervalului de interogări media CSS

Ne bazăm pe Interogări media CSS pentru selectarea și stilizarea elementelor pe baza unei condiții vizate. Această condiție poate fi tot felul de lucruri, dar de obicei se încadrează în două tabere: (1) tipul de media care este utilizat și (2) o caracteristică specifică a browserului, dispozitivului sau chiar a mediului utilizatorului.

Deci, să presupunem că vrem să aplicăm un anumit stil CSS unui document tipărit:

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

Faptul că putem aplica stiluri la o anumită lățime a ferestrei de vizualizare a făcut din CSS Media Queries un ingredient de bază al designului web responsive de la Ethan Marcotte a inventat termenul. Dacă lățimea ferestrei de vizualizare a browserului este de o anumită dimensiune, atunci aplicați un set de reguli de stil, care ne permite să proiectăm elemente care să răspundă la dimensiunea browserului.

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

Observați and acolo? Acesta este un operator care ne permite să combinăm instrucțiuni. În acel exemplu, am combinat o condiție ca tipul media să fie a screen și că este min-width caracteristica este setată la 30em (sau deasupra). Putem face același lucru pentru a viza o gamă de dimensiuni de ferestre de vizualizare:

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

Acum, aceste stiluri se aplică unui interval explicit de lățimi ale ferestrelor de vizualizare, mai degrabă decât unei singure lățimi!

Dar specificația Media Queries Nivelul 4 a introdus o nouă sintaxă pentru vizarea unei game de lățimi de ferestre de vizualizare folosind operatori de comparație matematică obișnuiți - lucruri precum <, >, și = — care au mai mult sens sintactic în timp ce scriu mai puțin cod.

Să cercetăm cum funcționează.

Noi operatori de comparare

Acest ultim exemplu este o ilustrare bună a modului în care am „falsificat” intervale prin combinarea condițiilor folosind and operator. Marea schimbare în specificația Media Queries Level 4 este că avem noi operatori care compară valorile mai degrabă decât să le combine:

• < evaluează dacă o valoare este mai puțin de altă valoare
• > evaluează dacă o valoare este mai mare decât altă valoare
• = evaluează dacă o valoare este egal la o altă valoare
• <= evaluează dacă o valoare este mai mic sau egal cu to altă valoare
• >= evaluează dacă o valoare este mai mare sau egal cu to altă valoare

Iată cum am putea fi scris o interogare media care aplică stiluri dacă browserul este 600px lat sau mai mare:

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

Iată cum arată să scrieți același lucru folosind un operator de comparație:

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

Vizarea unei game de lățimi a ferestrei de vizualizare

Adesea, când scriem interogări media CSS, creăm ceea ce se numește a breakpoint — o condiție în care designul „se rupe” și se aplică un set de stiluri pentru a-l remedia. Un design poate avea o grămadă de puncte de întrerupere! Și, de obicei, se bazează pe vizualizarea care se află între două lățimi: unde începe punctul de întrerupere și unde se termină punctul de întrerupere.

Iată cum am făcut asta folosind and operator pentru a combina cele două valori ale punctului de întrerupere:

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

Începeți să înțelegeți cât de mai scurt și mai ușor este să scrieți o interogare media atunci când renunțăm la booleanul and operator în favoarea noii sintaxe de comparare a intervalului:

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

Mult mai ușor, nu? Și este clar exact ce face această interogare media.

Suport browser

Această sintaxă îmbunătățită a interogării media este încă la începuturile sale la momentul scrierii acestui articol și nu este la fel de susținută în prezent ca abordarea care combină min-width și max-width. Ne apropiem, totuși! Safari este singura reținere majoră în acest moment, dar există un bilet deschis pentru el pe care le poți urmări.

Să ne uităm la un exemplu

Iată un aspect pentru care este potrivit pentru ecrane mai mari, cum ar fi un desktop:

Acest aspect are stiluri de bază care sunt comune tuturor punctelor de întrerupere. Dar, pe măsură ce ecranul devine mai îngust, începem să aplicăm stiluri care sunt aplicate condiționat la diferite puncte de întrerupere mai mici, care sunt potrivite ideal pentru tablete până la telefoanele mobile:

Pentru a vedea ce se întâmplă, iată cum răspunde aspectul între cele două puncte de întrerupere mai mici. Lista de navigare ascunsă este afișată la fel de bine title în main crește în font-size.

Această modificare este declanșată atunci când modificările ferestrei de vizualizare trec de la potrivirea condițiilor unui media la alta:

/* 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;
  }
}

Am combinat câteva dintre conceptele pe care le-am acoperit! Vizăm dispozitive cu a screen tip media, evaluând dacă lățimea ferestrei de vizualizare este mai mare sau egală cu o anumită valoare utilizând noua sintaxă a intervalului de caracteristici media și combinând cele două condiții cu and operator.

OK, deci este grozav pentru dispozitivele mobile de mai jos 768px și pentru alte dispozitive egale sau mai mari decât 768px. Dar cum rămâne cu aspectul de pe desktop... cum ajungem acolo?

În ceea ce privește aspectul:

• main elementul devine o grilă cu 12 coloane.
• Pe imagine este afișat un buton.
• Dimensiunea .title fontul elementului crește și se suprapune pe imagine.

Presupunând că ne-am făcut temele și am stabilit exact unde ar trebui să aibă loc acele modificări, putem aplica acele stiluri atunci când fereastra se potrivește cu width condiția pentru acel punct de întrerupere. Vom spune că punctul de întrerupere este la 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;
  }
}

Joacă-te cu el:

De ce noua sintaxă este mai ușor de înțeles

Concluzia: este mai ușor să distingeți un operator de comparație (de ex width >= 320px) decât a face diferența dintre min-width și max-width folosind and operator. Prin eliminarea nuanței dintre min- și max-, avem un singur width parametrul cu care să lucrăm și operatorii ne spun restul.

Dincolo de diferențele vizuale ale acelor sintaxe, ei fac și lucruri ușor diferite. Folosind min- și max- este echivalent cu utilizarea operatorilor matematici de comparare:

• max-width este echivalent cu <= operator (ex (max-width: 320px) este la fel ca (width <= 320px)).
• min-width este echivalent cu >= operator (ex (min-width: 320px) este la fel ca (width >= 320px)).

Observați că niciunul nu este echivalentul lui > or < operatori.

Să tragem un exemplu direct din specificația Media Queries Level 4 unde definim diferite stiluri pe baza unui punct de întrerupere la 320px în lățimea ferestrei de vizualizare folosind min-width și max-width:

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

Ambele interogări media corespund unei condiții când lățimea ferestrei de vizualizare este egală cu 320px. Nu este tocmai ceea ce ne dorim. Noi vrem oricare una dintre aceste condiții mai degrabă decât ambele în același timp. Pentru a evita aceste modificări implicite, am putea adăuga un pixel la interogare bazată pe min-width:

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

În timp ce acest lucru asigură că cele două seturi de stiluri nu se aplică simultan atunci când lățimea ferestrei de vizualizare este 320px, orice lățime a ferestrei de vizualizare care se află între 320px și 321px va avea ca rezultat o zonă foarte mică în care niciunul dintre stilurile din nicio interogare nu este aplicat - o situație ciudată de „flash de conținut fără stil”.

O soluție este creșterea celei de-a doua valori a scalei de comparație (numerele după virgulă zecimală) la 320.01px:

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

Dar asta devine prostesc și prea complicat. De aceea, noua sintaxă a gamei de caracteristici media este o abordare mai adecvată:

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

La finalul

Uf, am acoperit mult teren cu privire la noua sintaxă pentru direcționarea intervalelor de lățime a ferestrei de vizualizare în CSS Media Queries. Acum că specificația Media Queries Level 4 a introdus sintaxa și a fost adoptată în browserele Firefox și Chromium, ne apropiem de a putea folosi noii operatori de comparare și de a le combina cu alte caracteristici media din gama, în afară de width, cum ar fi height și aspect-ratio

Și aceasta este doar una dintre caracteristicile mai noi pe care le-a introdus specificația Level 4, alături de un o mulțime de interogări pe care le putem face pe baza preferințelor utilizatorului. Nu se termină aici! Verificați Ghid complet pentru interogări media CSS pentru o scurtă privire de ce ar putea fi inclus în Interogări media Nivelul 5.