Новый синтаксис диапазона мультимедийных запросов CSS

Мы полагаемся на Медиа-запросы CSS для выбора и стилизации элементов на основе целевого состояния. Это может быть что угодно, но обычно они делятся на два лагеря: (1) тип используемого носителя и (2) конкретная функция браузера, устройства или даже среды пользователя.

Итак, скажем, мы хотим применить определенные стили CSS к печатному документу:

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

Тот факт, что мы можем применять стили при определенной ширине области просмотра, сделал CSS Media Queries ключевым компонентом адаптивного веб-дизайна со времен Итана Маркотта. ввел термин. Если ширина области просмотра браузера имеет определенный размер, тогда применяется набор правил стиля, который позволяет нам создавать элементы, соответствующие размеру браузера.

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

Обратите внимание, что and там? Это оператор, который позволяет нам комбинировать операторы. В этом примере мы объединили условие, что тип носителя является 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! */
  }
}

Теперь эти стили применяются к явному диапазону ширины области просмотра, а не к одной ширине!

Но спецификация Media Queries Level 4 ввела новый синтаксис для нацеливания на диапазон ширины области просмотра с использованием общих математических операторов сравнения — таких вещей, как <, >качества = — которые имеют больше синтаксического смысла при написании меньшего количества кода.

Давайте разбираться, как это работает.

Новые операторы сравнения

Последний пример является хорошей иллюстрацией того, как мы «подделываем» диапазоны, комбинируя условия с помощью and оператор. Большое изменение в спецификации Media Queries Level 4 заключается в том, что у нас есть новые операторы, которые сравнивают значения, а не объединяют их:

• < оценивает, является ли значение меньше, чем другое значение
• > оценивает, является ли значение больше другое значение
• = оценивает, является ли значение равный к другому значению
• <= оценивает, является ли значение меньше или равно tо другое значение
• >= оценивает, является ли значение больше или равно tо другое значение

Вот как мы могли бы написать медиа-запрос, который применяет стили, если браузер 600px широкий или больше:

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

Вот как это выглядит, если написать то же самое с помощью оператора сравнения:

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

Ориентация на диапазон ширины области просмотра

Часто, когда мы пишем медиазапросы CSS, мы создаем то, что называется точка остановки — состояние, при котором дизайн «ломается» и для его исправления применяется набор стилей. В дизайне может быть куча точек останова! И они обычно основаны на том, что окно просмотра находится между двумя значениями ширины: где начинается точка останова и где точка останова заканчивается.

Вот как мы это сделали, используя 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;
  }
}

Мы объединили несколько концепций, которые мы рассмотрели! Мы ориентируемся на устройства с 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, наряду с куча запросов, которые мы можем сделать на основе пользовательских предпочтений. Это не заканчивается! Проверьте Полное руководство по медиазапросам CSS для беглого взгляда что может быть включено в Media Queries Level 5.