Новий синтаксис діапазону медіа-запитів CSS

Ми покладаємось на Медіа-запити CSS для вибору та стилізації елементів на основі цільового стану. Ця умова може бути будь-якою, але зазвичай поділяється на два табори: (1) тип медіафайлу, який використовується, і (2) певна функція веб-переглядача, пристрою чи навіть середовища користувача.

Отже, скажімо, ми хочемо застосувати певний стиль CSS до друкованого документа:

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

Той факт, що ми можемо застосовувати стилі з певною шириною вікна перегляду, зробив медіа-запити CSS основним компонентом адаптивного веб-дизайну з часів Ітана Маркотта придумав термін. Якщо ширина вікна перегляду браузера має певний розмір, тоді застосовуйте набір правил стилю, що дозволяє нам створювати елементи, які відповідають розміру браузера.

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

Зверніть увагу на and там? Це оператор, який дозволяє нам комбінувати оператори. У цьому прикладі ми поєднали умову, що тип носія є a screen і що це min-width функція встановлена ​​на 30em (або вище). Ми можемо зробити те саме, щоб націлити діапазон розмірів вікна перегляду:

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

Тепер ці стилі застосовуються до явного діапазону ширин вікна перегляду, а не до однієї ширини!

Але специфікація медіа-запитів рівня 4 представила новий синтаксис для націлювання на діапазон ширини вікна перегляду за допомогою звичайних математичних операторів порівняння — таких як <, > та = — які мають більше синтаксичного сенсу при написанні менше коду.

Давайте розберемося, як це працює.

Нові оператори порівняння

Цей останній приклад є гарною ілюстрацією того, як ми ніби «підробили» діапазони, об’єднавши умови за допомогою and оператор. Велика зміна в специфікації Media Queries Level 4 полягає в тому, що ми маємо нові оператори, які порівнюють значення, а не комбінують їх:

• < оцінює, чи є значення менше інше значення
• > оцінює, чи є значення більше інше значення
• = оцінює, чи є значення рівним на інше значення
• <= оцінює, чи є значення менше або дорівнює to інше значення
• >= оцінює, чи є значення більше або дорівнює to інше значення

Ось як ми могли б написати медіа-запит, який застосовує стилі, якщо браузер є 600px широкий або більший:

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

Ось як виглядає запис того самого за допомогою оператора порівняння:

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

Націлювання на діапазон ширини вікна перегляду

Часто, коли ми пишемо медіа-запити CSS, ми створюємо те, що називається a точка зупинки — стан, коли дизайн «ламається» і для його виправлення застосовують набір стилів. Дизайн може мати купу точок зупину! Зазвичай вони базуються на тому, що вікно перегляду знаходиться між двома ширинами: там, де починається точка розриву, і де точка розриву закінчується.

Ось як ми це зробили за допомогою and оператор для поєднання двох значень точки зупину:

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

Ви починаєте добре розуміти, наскільки коротшим і легшим є написання медіа-запиту, коли ми відмовляємося від логічного and оператор на користь нового синтаксису порівняння діапазонів:

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

Набагато простіше, правда? І точно зрозуміло, що робить цей медіа-запит.

Підтримка браузерів

Цей покращений синтаксис медіа-запитів на момент написання цієї статті все ще перебуває в початковій стадії та не має такої широкої підтримки, як підхід, який поєднує min-width та max-width. Але ми наближаємось! На даний момент Safari є єдиним значним затримкою, але на нього є відкритий квиток за якими ви можете стежити.

Давайте розглянемо приклад

Ось макет, який чудово підходить для великих екранів, наприклад робочого столу:

Цей макет має базові стилі, спільні для всіх точок зупину. Але коли екран стає вужчим, ми починаємо застосовувати стилі, які умовно застосовуються в різних менших точках зупинки, які ідеально підходять для планшетів і аж до мобільних телефонів:

Щоб побачити, що відбувається, ось як макет реагує між двома меншими точками зупинки. Також відображається прихований навігаційний список title в main збільшується в font-size.

Ця зміна спрацьовує, коли вікно перегляду переходить від відповідності умов одного медіа до іншого:

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

Ми об’єднали кілька розглянутих концепцій! Ми орієнтуємося на пристрої з a screen тип медіа, оцінка того, чи ширина вікна перегляду більша або дорівнює певному значенню за допомогою нового синтаксису діапазону мультимедійних функцій, і поєднання двох умов із and оператор.

Добре, це чудово для мобільних пристроїв нижче 768px та для інших пристроїв, що дорівнює або перевищує 768px. Але як щодо компонування робочого столу… як ми туди потрапимо?

Що стосується макета:

• Команда main елемент стає сіткою з 12 стовпців.
• На зображенні відображається кнопка.
• Розмір .title Шрифт елемента збільшується та перекриває зображення.

Якщо припустити, що ми виконали домашнє завдання та визначили, де саме мають відбутися ці зміни, ми можемо застосувати ці стилі, коли вікно перегляду відповідає width умова для цієї точки зупину. Ми скажемо, що точка зупину знаходиться на 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;
  }
}

Пограйте з ним:

Чому новий синтаксис легше зрозуміти

Суть: легше розрізнити оператор порівняння (наприклад, width >= 320px), ніж відрізнити між ними min-width та max-width використання and оператор. Усунувши нюанс між min- та max-, у нас один єдиний width параметр для роботи, а оператори повідомлять нам решту.

Окрім візуальних відмінностей цих синтаксисів, вони також роблять дещо інші речі. Використання min- та max- еквівалентно використанню математичних операторів порівняння:

• max-width еквівалентно <= оператор (напр (max-width: 320px) те саме, що (width <= 320px)).
• min-width еквівалентно >= оператор (напр (min-width: 320px) те саме, що (width >= 320px)).

Зауважте, що жодне не є еквівалентом > or < операторів.

Давайте візьмемо приклад із специфікації Media Queries Level 4, де ми визначаємо різні стилі на основі точки зупину на 320px у ширині вікна перегляду за допомогою min-width та max-width:

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

Обидва медіа-запити відповідають умові, коли ширина вікна перегляду дорівнює 320px. Це не зовсім те, чого ми хочемо. Ми хочемо або одну з цих умов, а не обидві одночасно. Щоб уникнути цих неявних змін, ми можемо додати піксель до запиту на основі min-width:

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

Хоча це гарантує, що два набори стилів не застосовуються одночасно, коли ширина вікна перегляду є 320px, будь-яка ширина вікна перегляду між ними 320px та 321px призведе до надмаленької зони, де жоден із стилів у жодному запиті не застосовано — дивна ситуація «спалаху нестилізованого вмісту».

Одним із рішень є збільшення значення другої шкали порівняння (числа після коми) до 320.01px:

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

Але це стає безглуздим і надто складним. Ось чому новий синтаксис діапазону мультимедійних функцій є більш прийнятним підходом:

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

Підводячи підсумок

Фу, ми багато розглянули новий синтаксис для націлювання на діапазони ширини вікна перегляду в CSS Media Queries. Тепер, коли специфікація Media Queries Level 4 представила синтаксис і його було прийнято в браузерах Firefox і Chromium, ми наближаємося до того, щоб мати можливість використовувати нові оператори порівняння та поєднувати їх з іншими мультимедійними функціями діапазону, окрім width, Як height та aspect-ratio

І це лише одна з новітніх функцій, які представила специфікація рівня 4, поряд з a купа запитів, які ми можемо зробити на основі вподобань користувача. На цьому все не закінчується! Перевірте Повний посібник із медіа-запитів CSS для короткого огляду що може бути включено в медіа-запити рівня 5.