Мы полагаемся на CSS Media Queries для выбора и стилизации элементов на основе состояния. Это может быть что угодно, но обычно они делятся на два типа: (1) тип используемого носителя и (2) конкретная функция браузера, устройства или даже среды пользователя.
Итак, скажем, мы хотим применить определенные стили CSS к печатному документу:
Тот факт, что мы можем применять стили при определенной ширине области просмотра, сделал CSS Media Queries ключевым компонентом адаптивного веб-дизайна с тех пор, как Итан Маркотт ввел этот термин. Если ширина области просмотра браузера имеет определенный размер, тогда применяется набор правил стиля, который позволяет нам создавать элементы, соответствующие размеру браузера.
Обратили внимание на and ? Это оператор, который позволяет нам комбинировать операторы. В этом примере мы объединили условие, что тип носителя — это экран (screen), и что для его ширины min-width установлено значение 30em (или выше). Мы можем сделать то же самое для таргетинга диапазонов размеров области просмотра:
Теперь эти стили применяются к явному диапазону ширины области просмотра, а не к одной ширине!
Но спецификация Media Queries Level 4 представила новый синтаксис для определения диапазонов ширины области просмотра с использованием общих математических операторов сравнения — таких как <, > и = — которые имеют больше смысла синтаксически при меньшем количестве кода.
Давайте разберемся, как это работает.
Новые операторы сравнения
Этот последний пример является хорошей иллюстрацией того, как мы своего рода «фальсифицируем» диапазоны, комбинируя условия с помощью оператора and. Большое изменение в спецификации Media Queries Level 4 заключается в том, что у нас есть новые операторы, которые сравнивают значения, а не объединяют их:
- < оценивает, меньше ли значение, чем другое значение
- > оценивает, больше ли значение, чем другое значение
- = оценивает, равно ли значение другому значению
- <= оценивает, если значение меньше или равно другому значению
- >= оценивает, больше или равно значение другому значению
Вот как мы могли бы написать медиа-запрос, который применяет стили, если ширина браузера составляет 600px или более:
Вот как это выглядит, если написать то же самое с помощью оператора сравнения:
Ориентация на диапазон ширины области просмотра
Часто, когда мы пишем CSS Media Queries, мы создаем так называемую точку останова (breakpoint) — условие, при котором дизайн «ломается», и для его исправления применяется набор стилей. В дизайне может быть куча брейкпоинтов! И они обычно основаны на том, что область просмотра находится между двумя значениями ширины: где начинается точка останова и где точка останова заканчивается.
Вот как мы это сделали, используя оператор и для объединения двух значений точки останова:
Вы начинаете понимать, насколько короче и проще написать медиа-запрос, когда мы отказываемся от логического оператора and в пользу нового синтаксиса сравнения диапазонов:
Гораздо проще, правда? И совершенно ясно, что делает этот медиа-запрос.
Поддержка браузера
Этот улучшенный синтаксис медиа-запроса все еще находится в зачаточном состоянии на момент написания этой статьи и в настоящее время не так широко поддерживается, как подход, сочетающий минимальную ширину и максимальную ширину. Мы приближаемся, однако! Safari — единственное серьезное сопротивление на данный момент, но для него есть открытый билет, которому вы можете следовать.
Почему новый синтаксис легче понять?
Суть: проще отличить оператор сравнения (например, width >= 320px), чем определить разницу между min-width и max-width с помощью оператора and. Удалив нюанс между min- и max-, у нас есть один единственный параметр ширины для работы, а операторы сообщают нам все остальное.
Помимо визуальных различий этих синтаксисов, они также делают немного разные вещи. Использование min- и max- эквивалентно использованию математических операторов сравнения:
- max-width эквивалентен оператору = (например, (max-width: 320px) совпадает с (width = 320px)).
- min-width эквивалентен оператору = (например, (min-width: 320px) совпадает с (width = 320px)).
Обратите внимание, что ни один из них не эквивалентен операторам > и <.
Давайте возьмем пример прямо из спецификации Media Queries Level 4, где мы определяем различные стили на основе точки останова на 320 пикселей в ширине области просмотра, используя min-width и max-width:
Оба медиа-запроса соответствуют условию, когда ширина области просмотра равна 320px. Это не совсем то, что мы хотим. Нам нужно одно из этих условий, а не оба одновременно. Чтобы избежать этих неявных изменений, мы можем добавить пиксель к запросу min-width:
Хотя это гарантирует, что два набора стилей не будут применяться одновременно, когда ширина области просмотра составляет 320 пикселей, любая ширина области просмотра, которая находится между 320 и 321 пикселями, приведет к очень маленькой зоне, где ни один из стилей в любом запросе не применяется — странно. Ситуация «вспышка нестилизованного контента».
Одним из решений является увеличение второго значения шкалы сравнения (числа после запятой) до 320,01 пикселей:
Но это становится глупо и слишком сложно. Вот почему новый синтаксис диапазона медиа-функций является более подходящим подходом:
Подведение итогов
Уф, мы многое рассмотрели в новом синтаксисе для таргетинга диапазонов ширины области просмотра в CSS Media Queries. Теперь, когда спецификация Media Queries Level 4 представила синтаксис и он был принят в браузерах Firefox и Chromium, мы приближаемся к возможности использовать новые операторы сравнения и комбинировать их с другими медиа-функциями диапазона, помимо width, такими как height и aspect-ratio.
И это только одна из новых функций, представленных спецификацией уровня 4, наряду с набором запросов, которые мы можем делать на основе пользовательских предпочтений.
Перевод статьи The New CSS Media Query Range Syntax.