» » » Медиавыражения в CSS — это не только max-width

 

Медиавыражения в CSS — это не только max-width

Автор: admin от 14-11-2019, 14:40, посмотрело: 71

Медиавыражения в CSS — это не только max-width


Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным чистым дизайном и множеством новых великолепных иллюстраций и анимаций.



После того, как наш дизайнер проделал потрясающую работу, продумав и нарисовав сайт, нам, разработчикам, было необходимо реализовать макет, сохранив его чистым и цельным для каждого устройства, от большого 2K экрана, на которых мы пишем код, до старого iPhone 4 с его 3.5-дюймовым дисплеем.



Несколько недель спустя веб-сайт был почти готов и я просматривал его, чтобы убедиться, что всё работает как нужно. Заметив, что макет главной страницы неправильно отображался на нашем iPad, я быстро изменил некоторые CSS-правила и исправил ошибку, но… это привело к проблемам отображения макета на всех всех ноутбуках с небольшим экраном

здесь



Предпочитаемая цветовая схема



Медиавыражения в CSS — это не только max-width
Это одна из моих любимых функций, и я надеюсь, что постепенно она станет популярной.



Функция позволяет разработчикам устанавливать различные варианты оформления для элементов, если изменяется цветовая схема. И Windows и macOS позволяет пользователям менять системную цветовую схему со светлой на тёмную и обратно. iOS 13 также представила эту функцию, а для пользователей Android эта возможность станет доступной с приходом 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;
  }
}


Медиавыражения в CSS — это не только max-width
Установка системной тёмной темы делает страницу также тёмной



Сокращение количества анимации



Медиавыражения в CSS — это не только max-width
Это также очень важно. Лично я люблю анимации и переходы, и я думаю, что правильная анимация может действительно улучшить удобство взаимодействия с сайтом. Но не всем нравятся анимации и, что более важно, у некоторых людей могут быть вестибулярные расстройства, из-за которых может возникать укачивание и головокружение. Я нашел полезную статью, которая очень хорошо объясняет подобные явления.



В общем, на наиболее важных десктопных и мобильных операционных системах существует опция доступности, позволяющая решить эти проблемы путём уменьшения подвижности элементов.



Эта функция может иметь два значения:


  • reduce: применяет стили, если пользователь не хочет видеть анимации и переходы. Это значение обычно используется для их отключения

  • no-preference: применяет обычные стили





Проверьте эту функцию в примере ниже:

.pulse {
  animation: pulse 2s infinite;
}
 
@media screen and (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
  }
}




Медиавыражения в CSS — это не только max-width
Анимация пульсации прекращается, когда пользователь выбирает снижения подвижности элементов



Браузерная совместимость для этой функции достаточно хорошая. В данный момент только Edge и IE не поддерживают её. Всегда актуальный список поддерживаемых браузеров можно найти здесь



Заключение



Для меня это был интересный эксперимент, я узнал о некоторых новых возможностях, которые я, вероятно, теперь буду использовать гораздо чаще.



Хотелось бы упомянуть еще о некоторые функциях, как например, light-level, которая может использоваться для проверки уровня окружающего освещения, но большинство недавно представленных функций медиавыражений всё еще не имеют поддержки ни одним из браузеров, так что… еще не пришло время.



Примеры кода

Вы можете ознакомиться с примерами кода здесь. Код находится в открытом доступе на Github.



Кто мы

Мы команда молодых разработчиков и дизайнеров, находящихся в Падуя, Италия. Мы разрабатываем мобильные приложения и веб-сайты и всегда готовы создавать что-то великое

Источник: Хабр / Интересные публикации

Категория: Веб-разработка, Game Development

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *