Uusi CSS-mediakyselyalueen syntaksi

Luotamme siihen CSS-mediakyselyt elementtien valitsemiseen ja muotoiluun kohdistetun tilan perusteella. Tämä ehto voi olla kaikenlaista, mutta tyypillisesti se jakautuu kahteen leiriin: (1) käytettävän median tyyppi ja (2) selaimen, laitteen tai jopa käyttäjän ympäristön tietty ominaisuus.

Oletetaan siis, että haluamme käyttää tiettyä CSS-tyyliä painetussa asiakirjassa:

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

Se, että voimme käyttää tyylejä tietyllä näkymän leveydellä, on tehnyt CSS-mediakyselyistä responsiivisen web-suunnittelun keskeisen osan Ethan Marcotten jälkeen. loi termi. Jos selaimen näkymän leveys on tietyn kokoinen, käytä tyylisääntöjä, joiden avulla voimme suunnitella elementtejä, jotka vastaavat selaimen kokoa.

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

Ilmoitus and siellä? Se on operaattori, jonka avulla voimme yhdistää lauseita. Tässä esimerkissä yhdistimme ehdon, että mediatyyppi on a screen ja että se on min-width ominaisuus on asetettu 30em (tai yläpuolella). Voimme tehdä saman kohdistaaksemme eri kokoisia kuvaportteja:

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

Nyt nämä tyylit koskevat nimenomaista näkymän leveysaluetta yhden leveyden sijaan!

Media Queries Level 4 -spesifikaatiossa on kuitenkin otettu käyttöön uusi syntaksi, jonka avulla voidaan kohdistaa erilaisia ​​näkymän leveyksiä käyttämällä yleisiä matemaattisia vertailuoperaattoreita, kuten esim. <, >ja = - jotka ovat syntaktisesti järkevämpiä, kun kirjoitat vähemmän koodia.

Pohditaan kuinka se toimii.

Uudet vertailuoperaattorit

Tämä viimeinen esimerkki on hyvä esimerkki siitä, kuinka olemme tavallaan "väärennelleet" alueita yhdistämällä ehtoja käyttämällä and operaattori. Suuri muutos Media Queries Level 4 -määrittelyssä on, että meillä on uusia operaattoreita, jotka vertailevat arvoja yhdistämisen sijaan:

• < arvioi, onko arvo vähemmän kuin toinen arvo
• > arvioi, onko arvo suurempi kuin toinen arvo
• = arvioi, onko arvo yhtäläinen toiseen arvoon
• <= arvioi, onko arvo pienempi tai yhtä suuri kuin to toinen arvo
• >= arvioi, onko arvo suurempi tai yhtä suuri kuin to toinen arvo

Näin olemme saaneet kirjoittaa mediakyselyn, joka käyttää tyylejä, jos selain on 600px leveä tai suurempi:

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

Tältä näyttää saman asian kirjoittaminen vertailuoperaattorilla:

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

Kohdistus useisiin näkymien leveyksiin

Kun kirjoitamme CSS-mediakyselyjä, luomme usein niin sanottuja a breakpoint — tila, jossa malli "murtuu" ja sen korjaamiseksi käytetään joukko tyylejä. Suunnittelussa voi olla joukko keskeytyskohtia! Ja ne perustuvat yleensä siihen, että näkymä on kahden leveyden välillä: missä keskeytyskohta alkaa ja missä keskeytyskohta päättyy.

Näin olemme tehneet sen käyttämällä and operaattori yhdistää kaksi keskeytyspistearvoa:

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

Alat saada hyvän käsityksen siitä, kuinka paljon lyhyempää ja helpompaa on kirjoittaa mediakysely, kun hylkäämme Boolen and operaattori, joka kannattaa uutta aluevertailusyntaksia:

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

Paljon helpompaa, eikö? Ja on selvää, mitä tämä mediakysely tekee.

Selaimen tuki

Tämä parannettu mediakyselysyntaksi on vielä alkuaikoinaan tätä kirjoitettaessa, eikä sitä tueta tällä hetkellä niin laajasti kuin lähestymistapa, joka yhdistää min-width ja max-width. Lähellä ollaan kuitenkin! Safari on tällä hetkellä ainoa merkittävä este, mutta siihen on avoin lippu jota voit seurata.

Katsotaanpa esimerkkiä

Tässä on asettelu, joka sopii hienosti suuremmille näytöille, kuten työpöydälle:

Tässä asettelussa on perustyylejä, jotka ovat yhteisiä kaikille keskeytyspisteille. Mutta kun näyttö kapenee, alamme soveltaa tyylejä, joita sovelletaan ehdollisesti erilaisiin pienempiin keskeytyskohtiin ja jotka sopivat ihanteellisesti tableteille aina matkapuhelimiin:

Nähdäksesi mitä tapahtuu, tässä on, kuinka asettelu reagoi kahden pienemmän keskeytyskohdan välillä. Piilotettu navigointiluettelo tulee näkyviin myös title vuonna main kasvaa sisään font-size.

Tämä muutos käynnistyy, kun näkymän muutokset siirtyvät yhden median ehtoja vastaavasta toiseen:

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

Olemme yhdistäneet muutamia käsittämiämme käsitteitä! Kohdistamme laitteisiin, joissa on a screen mediatyyppi, arvioimalla, onko näkymän leveys suurempi tai yhtä suuri kuin tietty arvo käyttämällä uutta mediaominaisuusalueen syntaksia, ja yhdistämällä nämä kaksi ehtoa and operaattori.

OK, joten se sopii erinomaisesti alla oleville mobiililaitteille 768px ja muille laitteille, jotka ovat yhtä suuria tai suurempia kuin 768px. Mutta entä se työpöydän asettelu… miten pääsemme sinne?

Mitä tulee ulkoasuun:

• - main elementistä tulee 12 sarakkeen ruudukko.
• Kuvassa näkyy painike.
• Koko .title elementin kirjasin suurentaa ja menee päällekkäin kuvan kanssa.

Olettaen, että olemme tehneet kotitehtävämme ja määrittäneet tarkalleen, missä näiden muutosten tulisi tapahtua, voimme käyttää näitä tyylejä, kun näkymä vastaa width ehto tälle katkaisupisteelle. Sanomme, että keskeytyspiste on 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;
  }
}

Leiki sen kanssa:

Miksi uusi syntaksi on helpompi ymmärtää

Lopputulos: vertailuoperaattori on helpompi erottaa (esim width >= 320px) kuin erottaa toisistaan min-width ja max-width käyttäen and operaattori. Poistamalla väliset vivahteet min- ja max-, meillä on yksi single width parametrin kanssa, ja operaattorit kertovat meille loput.

Näiden syntaksien visuaalisten erojen lisäksi he tekevät myös hieman erilaisia ​​asioita. Käyttämällä min- ja max- vastaa matemaattisten vertailuoperaattoreiden käyttöä:

• max-width on sama kuin <= operaattori (esim (max-width: 320px) on sama kuin (width <= 320px)).
• min-width on sama kuin >= operaattori (esim (min-width: 320px) on sama kuin (width >= 320px)).

Huomaa, että kumpikaan ei ole vastineeksi > or < toimijoille.

Otetaan esimerkki suoraan Media Queries Level 4 -määrityksestä, jossa määritämme erilaisia ​​tyylejä keskeytyskohdan perusteella 320px näkymän leveydellä käyttämällä min-width ja max-width:

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

Molemmat mediakyselyt vastaavat ehtoa, kun näkymän leveys on yhtä suuri 320px. Se ei ole juuri sitä, mitä haluamme. Me haluamme myöskään yksi näistä ehdoista mieluummin kuin molemmat samanaikaisesti. Välttääksemme implisiittiset muutokset saatamme lisätä kyselyyn pikselin, joka perustuu min-width:

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

Vaikka tämä varmistaa, että kaksi tyylijoukkoa eivät sovellu samanaikaisesti, kun näkymän leveys on 320px, mikä tahansa näkymän väliin jäävä leveys 320px ja 321px tuloksena on erittäin pieni vyöhyke, jossa mitään kummankaan kyselyn tyyleistä ei käytetä – outo "tyylettömän sisällön välähdys" -tilanne.

Yksi ratkaisu on suurentaa toisen vertailuasteikon arvoa (luvut desimaalipilkun jälkeen) arvoon 320.01px:

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

Mutta siitä tulee typerää ja liian monimutkaista. Siksi uusi mediaominaisuusalueen syntaksi on sopivampi lähestymistapa:

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

Käärimistä

Huh, käsittelimme paljon uutta syntaksia kohdistaessamme CSS Media Queriesin katseluporttien leveysalueita. Nyt kun Media Queries Level 4 -spesifikaatio on ottanut käyttöön syntaksin ja se on otettu käyttöön Firefox- ja Chromium-selaimissa, olemme lähellä sitä, että voimme käyttää uusia vertailuoperaattoreita ja yhdistää niitä muihin mediaominaisuuksiin. width, Kuten height ja aspect-ratio

Ja tämä on vain yksi uudimmista ominaisuuksista, jotka Level 4 -spesifikaatio esitteli a. rinnalla joukko kyselyitä, joita voimme tehdä käyttäjien mieltymysten perusteella. Se ei lopu tähän! Tutustu Täydellinen opas CSS-mediakyselyihin vilkaistaksesi mitä mediakyselytasolle 5 voi sisältyä.