Nowa składnia zakresu zapytań o media CSS

Polegamy na Zapytania o media CSS do wyboru i stylizacji elementów w oparciu o docelowy stan. Warunek ten może być różny, ale zwykle dzieli się na dwa obozy: (1) rodzaj używanego nośnika oraz (2) konkretną cechę przeglądarki, urządzenia, a nawet środowiska użytkownika.

Powiedzmy, że chcemy zastosować określony styl CSS do drukowanego dokumentu:

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

Fakt, że możemy stosować style na określonej szerokości okna roboczego, sprawił, że CSS Media Queries stał się podstawowym składnikiem responsywnego projektowania stron internetowych od czasów Ethana Marcotte'a ukuł termin. Jeśli szerokość widocznego obszaru przeglądarki ma określony rozmiar, zastosuj zestaw reguł stylów, który pozwoli nam zaprojektować elementy odpowiadające rozmiarowi przeglądarki.

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

Wskazówka and tam? To operator, który pozwala nam łączyć wyrażenia. W tym przykładzie połączyliśmy warunek, że typ mediów to a screen i to jest min-width funkcja jest ustawiona na 30em (lub wyżej). Możemy zrobić to samo, aby kierować reklamy na różne rozmiary widocznego obszaru:

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

Teraz te style mają zastosowanie do określonego zakresu szerokości widocznego obszaru, a nie do pojedynczej szerokości!

Jednak specyfikacja Media Queries Level 4 wprowadziła nową składnię do kierowania na zakres szerokości widocznego obszaru przy użyciu typowych matematycznych operatorów porównania — na przykład <, >, = — które mają więcej sensu syntaktycznie, pisząc mniej kodu.

Zastanówmy się, jak to działa.

Nowe operatory porównania

Ten ostatni przykład jest dobrą ilustracją tego, w jaki sposób „sfałszowaliśmy” zakresy, łącząc warunki za pomocą and operator. Duża zmiana w specyfikacji Media Queries Level 4 polega na tym, że mamy nowe operatory, które porównują wartości, a nie łączą je:

• < ocenia, czy wartość to mniej niż inna wartość
• > ocenia, czy wartość to większa niż inna wartość
• = ocenia, czy wartość to równy do innej wartości
• <= ocenia, czy wartość to mniejsze lub równe to inna wartość
• >= ocenia, czy wartość to większe lub równe to inna wartość

Oto, jak moglibyśmy napisać zapytanie o media, które stosuje style, jeśli przeglądarka jest 600px szeroki lub większy:

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

Oto jak wygląda napisanie tego samego za pomocą operatora porównania:

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

Kierowanie na różne szerokości widocznego obszaru

Często, kiedy piszemy CSS Media Queries, tworzymy coś, co nazywa się a breakpoint — stan, w którym projekt „przerywa” i stosuje się zestaw stylów, aby go naprawić. Projekt może mieć kilka punktów przerwania! I zwykle opierają się na tym, że widoczny obszar znajduje się między dwiema szerokościami: gdzie zaczyna się punkt przerwania i gdzie kończy się punkt przerwania.

Oto jak to zrobiliśmy za pomocą and operator, aby połączyć dwie wartości punktów przerwania:

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

Zaczynasz mieć dobre wyczucie, o ile krótsze i łatwiejsze jest napisanie zapytania medialnego, gdy porzucimy Boolean and operator na korzyść nowej składni porównywania zakresów:

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

Dużo łatwiej, prawda? I jest dokładnie jasne, do czego służy ta kwerenda medialna.

Obsługiwane przeglądarki

Ta ulepszona składnia zapytań o media jest wciąż na początku w momencie pisania tego tekstu i nie jest tak szeroko obsługiwana w tej chwili, jak podejście, które łączy min-width i max-width. Ale jesteśmy już blisko! Safari jest jedynym głównym oporem w tym momencie, ale jest na to otwarty bilet które możesz śledzić.

Spójrzmy na przykład

Oto układ, który dobrze pasuje do większych ekranów, takich jak komputer stacjonarny:

Ten układ ma podstawowe style, które są wspólne dla wszystkich punktów przerwania. Ale gdy ekran staje się węższy, zaczynamy stosować style, które są warunkowo stosowane w różnych mniejszych punktach przerwania, które idealnie pasują do tabletów aż do telefonów komórkowych:

Aby zobaczyć, co się dzieje, oto jak układ reaguje między dwoma mniejszymi punktami przerwania. Wyświetlana jest ukryta lista nawigacyjna, a także title main wzrasta w font-size.

Ta zmiana jest wywoływana, gdy zmiany w widocznym obszarze przechodzą z dopasowania warunków jednego nośnika do drugiego:

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

Połączyliśmy kilka koncepcji, które omówiliśmy! Kierujemy reklamy na urządzenia z screen typ mediów, oceniając, czy szerokość widocznego obszaru jest większa lub równa określonej wartości przy użyciu nowej składni zakresu funkcji mediów, i łącząc te dwa warunki z parametrem and operator.

OK, więc świetnie nadaje się na poniższe urządzenia mobilne 768px oraz dla innych urządzeń równych lub większych niż 768px. Ale co z układem pulpitu… jak się tam dostaniemy?

Jeśli chodzi o układ:

• Połączenia main element staje się siatką 12 kolumn.
• Na obrazie wyświetlany jest przycisk.
• Rozmiar .title czcionka elementu zwiększa się i nakłada na obraz.

Zakładając, że odrobiliśmy pracę domową i określiliśmy dokładnie, gdzie te zmiany powinny nastąpić, możemy zastosować te style, gdy rzutnia pasuje do width warunek dla tego punktu przerwania. Powiemy, że punkt przerwania jest na 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;
  }
}

Pobaw się z tym:

Dlaczego nowa składnia jest łatwiejsza do zrozumienia

Najważniejsze: łatwiej odróżnić operator porównania (np. width >= 320px) niż odróżnić min-width i max-width używając and operator. Usuwając niuans pomiędzy min- i max-, mamy jednego singla width parametr do pracy, a operatorzy mówią nam o reszcie.

Poza wizualnymi różnicami tych składni robią też nieco inne rzeczy. Za pomocą min- i max- jest równoznaczne z użyciem matematycznych operatorów porównania:

• max-width jest równoważne z <= operator (np. (max-width: 320px) jest taki sam jak (width <= 320px)).
• min-width jest równoważne z >= operator (np. (min-width: 320px) jest taki sam jak (width >= 320px)).

Zauważ, że żaden z nich nie jest odpowiednikiem > or < operatorów.

Weźmy przykład prosto ze specyfikacji Media Queries Level 4, gdzie definiujemy różne style w oparciu o punkt przerwania w 320px w szerokości rzutni za pomocą min-width i max-width:

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

Oba zapytania o media spełniają warunek, gdy szerokość widocznego obszaru jest równa 320px. To nie jest dokładnie to, czego chcemy. Chcemy bądź jeden z tych warunków, a nie oba jednocześnie. Aby uniknąć ukrytych zmian, możemy dodać piksel do zapytania na podstawie min-width:

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

Zapewnia to, że dwa zestawy stylów nie są stosowane jednocześnie, gdy szerokość widocznego obszaru wynosi 320px, dowolna szerokość widocznego obszaru mieszcząca się między 320px i 321px spowoduje powstanie bardzo małej strefy, w której nie zostanie zastosowany żaden styl w żadnym z zapytań — dziwna sytuacja „błysk treści bez stylu”.

Jednym z rozwiązań jest zwiększenie drugiej wartości skali porównawczej (liczby po przecinku) do 320.01px:

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

Ale to robi się głupie i zbyt skomplikowane. Dlatego nowa składnia zakresu funkcji multimediów jest bardziej odpowiednim podejściem:

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

Zamykając

Uff, dużo omówiliśmy w nowej składni kierowania na zakresy szerokości widocznego obszaru w zapytaniach o media CSS. Teraz, gdy specyfikacja Media Queries Level 4 wprowadziła składnię i została zaadaptowana w przeglądarkach Firefox i Chromium, zbliżamy się do możliwości korzystania z nowych operatorów porównania i łączenia ich z innymi funkcjami multimediów zakresu. width, lubić height i aspect-ratio

A to tylko jedna z nowszych funkcji, które wprowadzono w specyfikacji Level 4, obok a kilka zapytań, które możemy wykonać w oparciu o preferencje użytkownika. Na tym się nie kończy! Sprawdź Kompletny przewodnik po zapytaniach o media CSS na zajawkę co może być zawarte w Zapytaniach o media na poziomie 5.