Uus CSS-i meediumipäringuvahemiku süntaks

Me toetume CSS-i meediumipäringud sihitud tingimuse põhjal elementide valimiseks ja kujundamiseks. See tingimus võib olla igasugune, kuid tavaliselt jaguneb see kahte leeri: (1) kasutatava meedia tüüp ja (2) brauseri, seadme või isegi kasutaja keskkonna spetsiifiline funktsioon.

Oletame, et tahame prinditud dokumendile rakendada teatud CSS-stiili:

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

Asjaolu, et saame rakendada stiile teatud vaateava laiusel, on muutnud CSS-i meediapäringud tundliku veebidisaini põhikomponendiks alates Ethan Marcotte'ist. lõi mõiste. Kui brauseri vaateava laius on teatud suurusega, siis rakendage stiilireeglid, mis võimaldavad meil kujundada elemente, mis vastavad brauseri suurusele.

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

Teade and seal? See on operaator, mis võimaldab meil avaldusi kombineerida. Selles näites ühendasime tingimuse, et meediumitüüp on a screen ja et see on min-width funktsioon on seatud 30em (või üleval). Saame teha sama, et sihtida erinevaid vaateava suurusi:

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

Nüüd kehtivad need stiilid konkreetse vaateava laiuste vahemiku, mitte ühe laiuse kohta!

Kuid Media Queries Level 4 spetsifikatsioon on kasutusele võtnud uue süntaksi erinevate vaateava laiuste sihtimiseks, kasutades tavalisi matemaatilisi võrdlusoperaatoreid – näiteks <, >ja = - mis on süntaktiliselt mõttekam, kui kirjutate vähem koodi.

Uurime, kuidas see toimib.

Uued võrdlusoperaatorid

See viimane näide illustreerib hästi, kuidas oleme omamoodi „võltsitud” vahemikke kombineerides tingimusi, kasutades and operaator. Suur muudatus Media Queries Level 4 spetsifikatsioonis on see, et meil on uued operaatorid, mis võrdlevad väärtusi, mitte ei kombineeri neid.

• < hindab, kas väärtus on vähem kui teine ​​väärtus
• > hindab, kas väärtus on suurem kui teine ​​väärtus
• = hindab, kas väärtus on võrdne teisele väärtusele
• <= hindab, kas väärtus on väiksem või võrdne to teine ​​väärtus
• >= hindab, kas väärtus on suurem või võrdne to teine ​​väärtus

Siit saate teada, kuidas oleksime võinud kirjutada meediumipäringu, mis rakendab stiile, kui brauser on 600px lai või suurem:

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

Võrdlusoperaatori abil sama asja kirjutamine näeb välja järgmine:

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

Vaateava laiuste vahemiku sihtimine

Sageli loome CSS-i meediumipäringuid kirjutades nn a murdepunkt — tingimus, kus kujundus "katkib" ja selle parandamiseks rakendatakse stiilide komplekti. Kujundusel võib olla hunnik katkestuspunkte! Ja need põhinevad tavaliselt sellel, et vaateava on kahe laiuse vahel: kust katkestuspunkt algab ja kus katkestuspunkt lõpeb.

Siin on, kuidas oleme seda teinud, kasutades and operaator, et ühendada kaks katkestuspunkti väärtust:

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

Sa hakkad hästi aru saama, kui palju lühem ja lihtsam on meediumipäringu kirjutamine, kui jätame Boole'i ​​kõrvale and operaator uue vahemiku võrdluse süntaksi kasuks:

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

Palju lihtsam, eks? Ja täpselt on selge, mida see meediapäring teeb.

Brauseri tugi

See täiustatud meediumipäringu süntaks on selle kirjutamise ajal alles algusjärgus ega ole praegu nii laialdaselt toetatud kui lähenemisviis, mis ühendab min-width ja max-width. Läheneme siiski! Safari on praegusel hetkel ainus suur takistus, kuid sellele on avatud pilet mida saate jälgida.

Vaatame näidet

Siin on paigutus, mis sobib suurepäraselt suuremate ekraanide jaoks, näiteks töölaua jaoks.

Sellel paigutusel on põhistiilid, mis on ühised kõikidele murdepunktidele. Kuid kui ekraan muutub kitsamaks, hakkame rakendama stiile, mida tinglikult rakendatakse erinevates väiksemates katkestuspunktides, mis sobivad ideaalselt tahvelarvutitele kuni mobiiltelefonideni välja:

Et näha, mis toimub, vaadake, kuidas paigutus kahe väiksema katkestuspunkti vahel reageerib. Peidetud navigeerimisloend kuvatakse samuti title aasta main suureneb sisse font-size.

See muudatus käivitub, kui vaateava muudatused lähevad ühe meedia tingimuste sobitamiselt teise:

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

Oleme ühendanud mõned kontseptsioonid, mida oleme käsitlenud! Me sihime seadmeid, millel on a screen meediumitüüp, hinnates, kas vaateava laius on suurem või võrdne konkreetse väärtusega, kasutades uut meediumifunktsioonide vahemiku süntaksit, ja kombineerides need kaks tingimust and operaator.

OK, see sobib suurepäraselt allpool toodud mobiilseadmete jaoks 768px ja muude seadmete puhul, mis on võrdsed või suuremad 768px. Aga kuidas on lood selle töölaua paigutusega… kuidas me sinna jõuame?

Mis puudutab paigutust:

• . main element muutub 12-veeruliseks ruudustikuks.
• Pildil kuvatakse nupp.
• Suurus .title elemendi font suurendab ja kattub pildiga.

Eeldades, et oleme oma kodutöö teinud ja täpselt kindlaks määranud, kus need muudatused peaksid toimuma, saame neid stiile rakendada, kui vaateava ühtib width selle murdepunkti tingimus. Me ütleme, et murdepunkt on käes 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;
  }
}

Mängige sellega:

Miks on uut süntaksit lihtsam mõista?

Lõpptulemus: võrdlusoperaatorit on lihtsam eristada (nt width >= 320px) kui vahetegemiseks min-width ja max-width kasutades and operaator. Vahepealse nüansi eemaldamisega min- ja max-, meil on üks üksik width parameeter, millega töötada, ja operaatorid ütlevad meile ülejäänu.

Lisaks nende süntaksite visuaalsetele erinevustele teevad nad ka veidi erinevaid asju. Kasutades min- ja max- võrdub matemaatiliste võrdlusoperaatorite kasutamisega:

• max-width on samaväärne <= operaator (nt (max-width: 320px) on sama nagu (width <= 320px)).
• min-width on samaväärne >= operaator (nt (min-width: 320px) on sama nagu (width >= 320px)).

Pange tähele, et kumbki ei ole samaväärne > or < operaatorid.

Toome näite otse meediumipäringute taseme 4 spetsifikatsioonist, kus me määratleme erinevad stiilid katkestuspunkti alusel 320px vaateava laiuses kasutades min-width ja max-width:

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

Mõlemad meediumipäringud vastavad tingimusele, kui vaateava laius on võrdne 320px. See pole täpselt see, mida me tahame. Me tahame kumbki üks neist tingimustest, mitte mõlemad korraga. Nende kaudsete muudatuste vältimiseks võime päringule lisada piksli, mis põhineb min-width:

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

Kuigi see tagab, et kaks stiilide komplekti ei rakendu samaaegselt, kui vaateava laius on 320px, mis tahes vaateava laius, mis jääb vahele 320px ja 321px tulemuseks on üliväike tsoon, kus kumbagi päringu stiili ei rakendata – see on imelik "stiilita sisu välk".

Üks lahendus on suurendada teise võrdlusskaala väärtust (arvud pärast koma) kuni 320.01px:

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

Aga see läheb rumalaks ja liiga keeruliseks. Seetõttu on uue meediumifunktsioonide vahemiku süntaks sobivam lähenemine.

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

Pakke kuni

Oeh, käsitlesime CSS-i meediumipäringute vaateava laiuse vahemike sihtimise uut süntaksit palju. Nüüd, kui Media Queries Level 4 spetsifikatsioon on kasutusele võtnud süntaksi ja see on kasutusele võetud Firefoxi ja Chromiumi brauserites, oleme lähenemas uute võrdlusoperaatorite kasutamise võimalusele ja nende kombineerimisele muude meediafunktsioonidega. widthNagu height ja aspect-ratio

Ja see on vaid üks uuematest funktsioonidest, mille 4. taseme spetsifikatsioon lisaks a hulk päringuid, mida saame kasutaja eelistuste põhjal teha. See ei lõpe sellega! Tutvuge CSS-i meediumipäringute täielik juhend pilguheitmiseks mida võiks hõlmata meediapäringute tase 5.