Nova sintaksa obsega medijskih poizvedb CSS

Zanašamo se na Medijske poizvedbe CSS za izbiro in oblikovanje elementov glede na ciljno stanje. Ta pogoj je lahko raznovrsten, vendar se običajno deli na dva tabora: (1) vrsta medija, ki se uporablja, in (2) posebna značilnost brskalnika, naprave ali celo uporabnikovega okolja.

Recimo, da želimo uporabiti določen stil CSS za natisnjen dokument:

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

Dejstvo, da lahko uporabimo sloge pri določeni širini vidnega polja, je od Ethana Marcotta dalje postalo ključna sestavina odzivnega spletnega oblikovanja CSS Media Queries. skoval izraz. Če je širina vidnega polja brskalnika določene velikosti, potem uporabite nabor slogovnih pravil, ki nam omogočajo oblikovanje elementov, ki se odzivajo na velikost brskalnika.

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

Obvestilo and tam? To je operator, ki nam omogoča združevanje stavkov. V tem primeru smo združili pogoj, da je vrsta medija a screen in da je min-width funkcija je nastavljena na 30em (ali zgoraj). Enako lahko storimo, če ciljamo na različne velikosti vidnih oken:

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

Zdaj se ti slogi nanašajo na izrecno razpon širin vidnih oken in ne na eno samo širino!

Toda specifikacija medijske poizvedbe Level 4 je uvedla novo sintakso za ciljanje različnih širin vidnega polja z uporabo običajnih matematičnih primerjalnih operatorjev – stvari, kot so <, >in = — ki so sintaktično bolj smiselni, medtem ko pišejo manj kode.

Poglejmo, kako to deluje.

Novi primerjalni operatorji

Ta zadnji primer je dobra ilustracija, kako smo nekako »ponaredili« obsege s kombiniranjem pogojev z uporabo and operater. Velika sprememba v specifikaciji medijske poizvedbe ravni 4 je, da imamo nove operaterje, ki primerjajo vrednosti, namesto da jih združujejo:

• < oceni, ali je vrednost manj kot drugo vrednost
• > oceni, ali je vrednost več kot drugo vrednost
• = oceni, ali je vrednost enako na drugo vrednost
• <= oceni, ali je vrednost manjše ali enako to druga vrednost
• >= oceni, ali je vrednost večja ali enaka to druga vrednost

Tukaj je opisano, kako bi lahko napisali medijsko poizvedbo, ki uporablja sloge, če je brskalnik 600px širok ali večji:

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

Takole izgleda pisanje iste stvari s primerjalnim operatorjem:

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

Ciljanje na različne širine vidnega polja

Ko pišemo predstavnostne poizvedbe CSS, pogosto ustvarjamo tako imenovano a Ustavljanje — stanje, ko se dizajn "pokvari" in se za njegovo popravilo uporabi nabor slogov. Dizajn ima lahko kup prelomnih točk! Običajno temeljijo na tem, da je vidno polje med dvema širinama: kjer se prelomna točka začne in kjer se prelomna točka konča.

Evo, kako smo to storili z uporabo and operator za združevanje dveh vrednosti prelomne točke:

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

Začneš dobivati ​​dober občutek, koliko krajše in lažje je napisati medijsko poizvedbo, ko opustimo logično and operator za novo sintakso primerjave obsega:

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

Veliko lažje, kajne? In jasno je, kaj počne ta medijska poizvedba.

Podpora brskalniku

Ta izboljšana sintaksa medijske poizvedbe je v času tega pisanja še vedno na začetku in trenutno ni tako široko podprta kot pristop, ki združuje min-width in max-width. Vendar se bližamo! Safari je edini večji zadržek na tej točki, vendar za to je odprta karta ki mu lahko sledite.

Poglejmo si primer

Tukaj je postavitev, ki je zelo primerna za večje zaslone, kot je namizje:

Ta postavitev ima osnovne sloge, ki so skupni vsem prelomnim točkam. Ko pa se zaslon oži, začnemo uporabljati sloge, ki se pogojno uporabljajo na različnih manjših prelomnih točkah, ki so idealne za tablične računalnike vse do mobilnih telefonov:

Če želite videti, kaj se dogaja, si oglejte, kako se postavitev odziva med dvema manjšima prelomnima točkama. Prikazan je tudi skriti nav seznam title v main se poveča v font-size.

Ta sprememba se sproži, ko spremembe vidnega polja preidejo iz ujemanja pogojev enega medija v drugega:

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

Združili smo nekaj konceptov, ki smo jih obravnavali! Ciljamo na naprave z a screen vrsta medija, ocenjevanje, ali je širina vidnega polja večja ali enaka določeni vrednosti z uporabo sintakse obsega novih medijskih funkcij, in združevanje obeh pogojev z and operater.

OK, to je super za spodnje mobilne naprave 768px in za druge naprave enake ali večje od 768px. Kaj pa ta postavitev namizja ... kako pridemo tja?

Kar zadeva postavitev:

• O main element postane mreža z 12 stolpci.
• Na sliki je prikazan gumb.
• Velikost .title pisava elementa se poveča in prekriva sliko.

Ob predpostavki, da smo opravili domačo nalogo in natančno določili, kje naj se zgodijo te spremembe, lahko te sloge uporabimo, ko se vidno polje ujema z width pogoj za to prelomno točko. Rekli bomo, da je prelomna točka pri 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;
  }
}

Poigrajte se z njim:

Zakaj je nova sintaksa lažje razumljiva

Bistvo: lažje je razlikovati primerjalni operator (npr width >= 320px), kot je razlikovati med min-width in max-width uporabi and operater. Z odstranitvijo nianse med min- in max-, imamo eno samo width parameter za delo, ostalo pa nam povedo operaterji.

Poleg vizualnih razlik teh sintaks delajo tudi nekoliko drugačne stvari. Uporaba min- in max- je enakovredna uporabi matematičnih primerjalnih operatorjev:

• max-width je enakovredno <= operater (npr (max-width: 320px) je isto kot (width <= 320px)).
• min-width je enakovredno >= operater (npr (min-width: 320px) je isto kot (width >= 320px)).

Upoštevajte, da nobeno ni enakovredno > or < izvajalci.

Vzemimo primer naravnost iz specifikacije medijske poizvedbe ravni 4, kjer definiramo različne sloge na podlagi prekinitvene točke pri 320px v širini vidnega polja z uporabo min-width in max-width:

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

Obe medijski poizvedbi se ujemata s pogojem, ko je širina vidnega polja enaka 320px. To ni ravno tisto, kar si želimo. Želimo bodisi enega od teh pogojev in ne obeh hkrati. Da bi se izognili tem implicitnim spremembam, lahko poizvedbi dodamo slikovno piko na podlagi min-width:

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

Čeprav to zagotavlja, da se dva niza slogov ne uporabljata hkrati, ko je širina vidnega polja 320px, katera koli širina vidnega polja, ki je med njimi 320px in 321px bo povzročilo zelo majhno območje, kjer ni uporabljen noben od slogov v nobeni poizvedbi - čudna situacija "utripa vsebine brez sloga".

Ena od rešitev je povečati vrednost druge primerjalne lestvice (številke za decimalno vejico) na 320.01px:

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

Toda to postaja neumno in preveč zapleteno. Zato je sintaksa obsega novih medijskih funkcij primernejši pristop:

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

Zavijanje

Fuj, veliko smo preučili o novi sintaksi za ciljanje obsegov širine vidnega polja v medijskih poizvedbah CSS. Zdaj, ko je specifikacija medijske poizvedbe ravni 4 uvedla sintakso in je bila sprejeta v brskalnikih Firefox in Chromium, se približujemo temu, da bomo lahko uporabljali nove primerjalne operatorje in jih kombinirali z drugimi medijskimi funkcijami. widthkot height in aspect-ratio

In to je le ena od novejših funkcij, ki jih je predstavila specifikacija Level 4, poleg a veliko poizvedb, ki jih lahko naredimo na podlagi uporabniških preferenc. Tu se ne konča! Oglejte si Popoln vodnik za medijske poizvedbe CSS za kratek vpogled kaj bi lahko bilo vključeno v 5. raven medijskih poizvedb.