От автора: недавно мы запустили новый веб-сайт нашей компании Mabiloft, с полностью переработанным чистым макетом и множеством новых великолепных иллюстраций и анимации. В то время как наш дизайнер проделал потрясающую работу, придумав и нарисовав сайт, сложной задачей для нас, разработчиков, было сделать так, чтобы макет оставался чистым и функциональным для каждого устройства, от большого 2К-экрана, до старого iPhone 4 с его 3,5-дюймовым экраном.
Несколько недель назад веб-сайт был почти готов, и я просматривал разные страницы, чтобы убедиться, что все было так, как задумано. Я заметил, что макет на главной странице ломается на iPad. Я быстро изменил некоторые CSS-правила и исправил их, но… после этого макет сломался на ноутбуке с маленьким дисплеем.
В поисках решения я обнаружил, что могу сделать оба макета идеальными, используя только медиа-запросы CSS, не касаясь кода JavaScript. Фактически, до этого я в основном использовал медиа-запросы CSS для создания адаптивного макета, но только с max-width и min-width.
Теперь я обнаружил, что медиа-запросы CSS — это не только max-width, их множество. И некоторые из них могут быть действительно полезны в повседневной работе.
Итак, что это за полезные медиа-запросы, о которых я говорю? Возможно, вы слышали о некоторых из них. Я также выбрал несколько новинок, которые могут пригодиться, если вы хотите, чтобы на вашем сайте были маленькие детали, которые имеют значение.
Медиа-запросы размеров окна просмотра
Да, я говорю о width, height, min-width, min-height, max-width и max-height. Нужно ли их вам представлять? Попробую сделать это вкратце. Эти функции используются для установки разных стилей для разных размеров экрана. Они очень полезны для построения адаптивной системы.
Поскольку функции width и height могут устанавливать стили только для точного размера области просмотра, более вероятно, что вы будете использовать префиксы max и min. Например, этот код будет применять стили, если высота области просмотра превышает 320 пикселей.
body { background-color: #FFD23F; /* Yellow */
} @media screen and (min-height: 320px) { body { background-color: #EE4266; /* Red */ }
}Красный фон будет применяться только в том случае, если высота области просмотра превышает 320 пикселей.
Но вы также можете смешать эти функции для обработки диапазона размеров.
body { background-color: #FFD23F; /* Yellow */
} @media screen and (min-width: 320px) and (max-width: 600px) { body { background-color: #EE4266; /* Red */ }
}Красный фон будет применяться, если ширина области просмотра составляет от 320 до 600 пикселей.
В следующем примере показано, как можно использовать функцию min-width для изменения цвета фона в зависимости от ширины области просмотра.
body { background-color: #0EAD69;
} @media screen and (max-width: 1600px) { body { background-color: #3BCEAC; }
} @media screen and (max-width: 1280px) { body { background-color: #FFD23F; }
} @media screen and (max-width: 960px) { body { background-color: #EE4266; }
} @media screen and (max-width: 600px) { body { background-color: #540D6E; }
}
Ориентация
Orientation — это полезная медиа-функция, которая позволяет вносить изменения в зависимости от ориентации экрана. Может иметь два значения: portrait и landscape.
Но что браузер считает portrait и что landscape? Значение portrait будет вызывать изменения каждый раз, когда высота области просмотра больше ширины. Аналогично, если ширина больше, чем высота, область просмотра будет landscape. Например, этот код дает следующий результат:
body { background-color: #FFD23F; /* Yellow */
} @media screen and (orientation: landscape) { body { background-color: #EE4266; /* Red */ }
}Красный фон будет применяться, если ориентация области просмотра является альбомной.
Соотношение сторон
Это похоже на функцию ориентации, но более точно. Вы можете установить правила для точного соотношения сторон, которое вам нужно. Например, вы можете установить различные правила соотношения сторон для телефонов 16/9 и новых телефонов 18/9. Эта функция может также иметь префикс max- и min- для обработки ряда форматов изображения.
hover и pointer
Хорошо, я постараюсь объяснить эти медиа-функции как можно проще, так как они полезны. И hover, и pointer относятся к первичным механизмам входа сайта. Мышь, например. Или палец, если вы используете смартфон для навигации по сайту. Чтобы указать все механизмы ввода, вы можете использовать функции any-hover и any-pointer.
Теперь, что они практически делают? Функции hover (и any-hover) позволяют браузеру узнать, может ли основной механизм ввода наводиться на элементы. Вы можете использовать это следующим образом:
hover: hover, если основной механизм ввода может наводиться;
hover: none, если первичный механизм ввода не может наводиться на элементы или первичный механизм ввода с наведением отсутствует.
Когда я должен использовать это? Например, если вы хотите обрабатывать анимацию наведения на мобильных устройствах, где механизм ввода (палец) не может наводиться на элементы.
Функции pointer (и any-pointer) позволяют браузеру узнать, имеет ли основной механизм ввода указательное устройство (например, мышь), и насколько он точен. Вы можете использовать это следующим образом:
pointer: coarse, если основной механизм ввода содержит указательное устройство ограниченной точности;
pointer: fine, если основной механизм ввода содержит точное указательное устройство;
pointer: none, если основной механизм ввода не содержит указательного устройства.
Это полезно, например, для расширения области клика на устройствах с неточным указательным устройством.
Эй, это все скучные вещи, где новая классная функция, о которой ты говорил?
Она здесь! Обратите внимание, что ниже приведены экспериментальные функции, и их поддержка в настоящий момент очень ограничена.
inverted-colors
Функция inverted-colors полезна, если вам нужно применить некоторые стили, когда системные цвета инвертированы.
Для чего мне инвертировать системные цвета? Обычно это очень полезно, если вам нужно улучшить читаемость.
Также имейте в виду, что при инвертировании цветов рекомендуется увеличивать размер шрифта и уменьшать толщину шрифта. Это отличная вещь, которую вы можете сделать с помощью этой медиа-функции!
У нее есть только пара значений:
inverted: применять стили, если цвета инвертированы;
none: применять стили по умолчанию.
Вот пример! Когда цвета инвертированы, размер текста будет увеличиваться.
.text { font-size: 24px;
} @media screen and (inverted-colors: inverted) { .text { font-size: 36px; }
}
Обратите внимание, что в данный момент эта функция поддерживается только в Safari (как на MacOS, так и на iOS). Постоянно обновляемый список поддерживаемых браузеров можно найти здесь.
prefers-color-scheme
Это одна из моих любимых функций, и я надеюсь, что она постепенно станет популярной. Она позволяет разработчикам устанавливать различные стили для элементов в случае изменения цветовой схемы. И Windows, и MacOS позволяют пользователям менять системную тему со светлой на темную и наоборот, iOS 13 также представила эту функцию, а Android Q сделает это вскоре.
Поддержка браузерами также приличная. На данный момент последние версии Google Chrome, Mozilla Firefox и Safari поддерживают эту функцию. На мобильных устройствах ее поддерживают также все основные браузеры, кроме Opera. Постоянно обновляемый список поддерживающих браузеров можно найти здесь.
Значения этой функции довольно интуитивны:
light: применять стили, если пользователь предпочитает светлую тему;
dark: применять стили, если пользователь предпочитает темную тему;
no-preference: применять стили по умолчанию.
Посмотрите, как круто эта функция работает в примере ниже!
.appbar { background-color: #EE4266;
} .fab { background-color: #424242;
} @media screen and (prefers-color-scheme: dark) { body { background-color: #424242; } .appbar { background-color: #212121; } h2 { color: #fff; } .fab { background-color: #EE4266; } }
Установка темной темы системы делает страницу также темной!
prefers-reduced-motion
Это тоже очень важная функция. Мне лично нравятся анимация и переходы, и я думаю, что правильная анимация действительно может изменить пользовательский опыт. Но анимации нравится не всем, и, самое главное, некоторые люди могут страдать вестибулярными расстройствами, которые вызывают укачивание и головокружение. Я нашел полезную статью, которая очень хорошо это объясняет.
Таким образом, в основных настольных и мобильных ОС есть опция доступности, чтобы справиться с этим беспорядком, уменьшая движение системы. prefers-reduced-motion обрабатывает эту опцию.
Данная функция может принимать два значения:
reduce: применить стили, если пользователь не хочет видеть анимацию и переходы. Обычно используется для их отключения;
no-preference: чтобы применить стандартные стили.
Посмотрите пример ниже:
.pulse { animation: pulse 2s infinite;
} @media screen and (prefers-reduced-motion: reduce) { .pulse { animation: none; }
}
Анимация пульсации останавливается, в зависимости от настроек пользователя.
Совместимость браузеров достаточно хороша. На данный момент только Edge и IE не имеют поддержки. С постоянно обновляемой таблицей совместимости можно ознакомиться здесь.
Заключение
Для меня это был забавный эксперимент, я изучил некоторые новые функции, которые, вероятно, буду использовать гораздо чаще.
Я хотел бы рассмотреть еще несколько примеров, таких как функция light-level, которую можно использовать для проверки уровня внешней освещенности, но большинство недавно представленных медиа-функций по-прежнему не имеют поддержки браузеров, так что… еще не время. Кстати, полный список функций можно найти здесь.
Примеры кода
Вы можете увидеть онлайн-примеры здесь. Источник с открытым исходным кодом на Github, так что вы можете посмотреть его!
Автор: Francesco Baldan
Источник: https://medium.com
Редакция: Команда webformyself.