Az új CSS-média lekérdezési tartomány szintaxisa

támaszkodunk CSS médialekérdezések elemek kiválasztásához és formázásához egy megcélzott feltétel alapján. Ez a feltétel sokféle lehet, de jellemzően két táborba sorolható: (1) a használt média típusa, és (2) a böngésző, az eszköz vagy akár a felhasználó környezetének sajátossága.

Tegyük fel, hogy bizonyos CSS-stílusokat szeretnénk alkalmazni egy nyomtatott dokumentumra:

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

Az a tény, hogy egy bizonyos nézetablakszélességnél alkalmazhatunk stílusokat, Ethan Marcotte óta a CSS Media Queries-t a reszponzív webdizájn alapvető összetevőjévé tette. létrehozta a kifejezést. Ha a böngésző nézetablakának szélessége egy bizonyos méretű, akkor alkalmazzon stílusszabályokat, amelyek lehetővé teszik számunkra, hogy a böngésző méretéhez igazodó elemeket tervezzünk.

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

Figyeljük meg a and ott? Ez egy operátor, amely lehetővé teszi az állítások kombinálását. Ebben a példában olyan feltételt kombináltunk, hogy a médiatípus a screen és hogy az min-width funkció be van állítva 30em (vagy a fenti). Ugyanezt megtehetjük a nézetablak méreteinek megcélzásához:

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

Most ezek a stílusok a nézetablak szélességének egy explicit tartományára vonatkoznak, nem pedig egyetlen szélességre!

A Media Queries Level 4 specifikációja azonban egy új szintaxist vezetett be a nézetablak szélességének megcélzásához általános matematikai összehasonlító operátorok segítségével – pl. <, >és = - amelyek szintaktikailag értelmesebbek, miközben kevesebb kódot írnak.

Nézzük meg, hogyan működik ez.

Új összehasonlító operátorok

Ez az utolsó példa jól szemlélteti, hogyan „hamisítottunk” tartományokat azáltal, hogy a feltételeket a and operátor. A nagy változás a Media Queries Level 4 specifikációjában az, hogy új operátoraink vannak, amelyek összehasonlítják az értékeket, nem pedig kombinálják őket:

• < kiértékeli, hogy van-e érték kevesebb, mint másik érték
• > kiértékeli, hogy van-e érték nagyobb, mint másik érték
• = kiértékeli, hogy van-e érték egyenlő másik értékre
• <= kiértékeli, hogy van-e érték kisebb vagy egyenlő, mint to másik érték
• >= kiértékeli, hogy van-e érték nagyobb vagy egyenlő, mint to másik érték

Így írhattunk le egy médialekérdezést, amely stílusokat alkalmaz, ha a böngésző igen 600px széles vagy nagyobb:

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

Így néz ki, ha ugyanazt egy összehasonlító operátorral írjuk le:

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

A nézetablak szélességének megcélzása

Amikor CSS-médialekérdezéseket írunk, gyakran az úgynevezett a töréspont — olyan állapot, amikor a terv „eltörik”, és stíluskészletet alkalmaznak a javításhoz. Egy tervnek sok töréspontja lehet! És általában azon alapulnak, hogy a nézetablak két szélesség között van: hol kezdődik a töréspont és hol ér véget.

Íme, hogyan tettük ezt a and operátort a két töréspont érték kombinálásához:

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

Kezded jól érzékelni, hogy mennyivel rövidebb és egyszerűbb médialekérdezést írni, ha elhagyjuk a logikai értéket. and operátort az új tartomány-összehasonlítási szintaxis javára:

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

Sokkal könnyebb, igaz? És világos, hogy pontosan mit csinál ez a médialekérdezés.

Böngésző támogatás

Ez a továbbfejlesztett médialekérdezési szintaxis az írás idején még a kezdeti szakaszban van, és jelenleg nem támogatott olyan széles körben, mint a min-width és a max-width. De közeledünk! A Safari az egyetlen jelentős kihagyás jelenleg, de van rá nyitott jegy hogy követni tudja.

Nézzünk egy példát

Íme egy elrendezés, amely remekül illeszkedik a nagyobb képernyőkhöz, például egy asztali számítógéphez:

Ennek az elrendezésnek olyan alapstílusai vannak, amelyek minden töréspontnál közösek. De ahogy a képernyő szűkül, elkezdjük alkalmazni a különböző kisebb töréspontokon feltételesen alkalmazott stílusokat, amelyek ideálisak a táblagépekhez egészen a mobiltelefonokig:

Ha látni szeretné, mi történik, íme, hogyan reagál az elrendezés a két kisebb töréspont között. A rejtett navigációs lista is megjelenik title a main megnövekszik font-size.

Ez a változás akkor lép életbe, ha a nézetablak változásai az egyik média feltételeinek megfelelőről a másikra változnak:

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

Összevontunk néhányat az általunk tárgyalt fogalmak közül! Olyan eszközöket célozunk meg, amelyek a screen médiatípus, kiértékeli, hogy a nézetablak szélessége nagyobb vagy egyenlő-e egy adott értékkel az új médiafunkció-tartomány szintaxisával, és a két feltétel kombinálása a and operátor.

Rendben, ez nagyszerű az alábbi mobileszközökhöz 768px és más eszközök esetén egyenlő vagy nagyobb mint 768px. De mi a helyzet azzal az asztali elrendezéssel… hogyan juthatunk el oda?

Ami az elrendezést illeti:

• A main elemből 12 oszlopos rács lesz.
• A képen megjelenik egy gomb.
• A .title elem betűtípusa növeli és átfedi a képet.

Feltéve, hogy elvégeztük a házi feladatunkat, és pontosan meghatároztuk, hol kell végrehajtani ezeket a változtatásokat, akkor alkalmazhatjuk ezeket a stílusokat, amikor a nézet megegyezik a width feltétele annak a töréspontnak. Azt fogjuk mondani, hogy a töréspont itt van 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;
  }
}

Játssz vele:

Miért könnyebb megérteni az új szintaxist?

A lényeg: könnyebb megkülönböztetni az összehasonlító operátort (pl width >= 320px), mint különbséget tenni közöttük min-width és a max-width használatával and operátor. Közötti árnyalat eltávolításával min- és a max-, van egy egyetlen width paraméterrel kell dolgozni, a többit pedig az operátorok mondják el.

A szintaxisok vizuális különbségein túlmenően kissé eltérő dolgokat is csinálnak. Használata min- és a max- egyenértékű a matematikai összehasonlító operátorok használatával:

• max-width egyenértékű a <= operátor (pl (max-width: 320px) ugyanaz mint (width <= 320px)).
• min-width egyenértékű a >= operátor (pl (min-width: 320px) ugyanaz mint (width >= 320px)).

Figyeljük meg, hogy egyik sem egyenértékű a > or < szereplők számára.

Vegyünk egy példát egyenesen a Media Queries 4. szintű specifikációjából, ahol különböző stílusokat határozunk meg egy töréspont alapján 320px a nézetablak szélességében a használatával min-width és a max-width:

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

Mindkét médialekérdezés megfelel egy feltételnek, ha a nézetablak szélessége egyenlő 320px. Nem pontosan ezt akarjuk. Mi akarunk bármelyik e feltételek egyike, nem pedig mindkettő egyszerre. Az implicit változtatások elkerülése érdekében hozzáadhatunk egy pixelt a lekérdezéshez min-width:

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

Miközben ez biztosítja, hogy a két stíluskészlet ne érvényesüljön egyszerre, amikor a nézetablak szélessége az 320pxközé eső nézetablak szélessége 320px és a 321px egy szuper kis zónát fog eredményezni, ahol egyik lekérdezés egyik stílusa sem kerül alkalmazásra – ez egy furcsa „stílus nélküli tartalom felvillanása” helyzet.

Az egyik megoldás, hogy a második összehasonlító skála értékét (a tizedesvessző utáni számokat) értékre növeljük 320.01px:

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

De ez kezd buta és túl bonyolult. Ezért az új médiafunkció-tartomány szintaxisa megfelelőbb megközelítés:

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

Csomagolta

Huh, sokat foglalkoztunk a CSS Media Queries nézetablak-szélesség-tartományok célzásának új szintaxisával. Most, hogy a Media Queries 4. szintű specifikációja bevezette a szintaxist, és azt a Firefox és Chromium böngészőkben is átvették, közeledünk ahhoz, hogy az új összehasonlító operátorokat használhassuk és kombinálhassuk őket más médiafunkciókkal. width, mint height és a aspect-ratio

És ez csak egyike azoknak az újabb funkcióknak, amelyeket a 4. szintű specifikáció bevezetett a mellett a egy csomó lekérdezés, amelyet a felhasználói preferenciák alapján tehetünk meg. Ezzel még nincs vége! Nézze meg a Teljes útmutató a CSS-médialekérdezésekhez egy kis bepillantásra mit tartalmazhat a Media Queries 5. szintje.