Первый взгляд на условные операторы When и Else в CSS

В CSS мы делаем выбор различных устройств с помощью медиа-запросов. Медиа-запросы дают нам простой способ выбрать устройство на основе множества условий, таких как размер экрана, плотность пикселей или даже формат: например, печать или экран.

Со временем это усложнялось, и теперь мы часто уравновешиваем многие условия, которые иногда противоречат друг другу.

Новая Спецификация условных правил CSS 5 пытается решить эту проблему, вводя два новых способа выполнения медиа-запросов — @когда и @иначе. Это, наконец, позволит нам создавать условные операторы непосредственно в ванильном CSS. Давайте посмотрим, как это работает!

Поддержка @when/@else

В настоящее время ни один браузер не поддерживает @when/@else, однако это, вероятно, скоро изменится. Полная поддержка @when/@else показана ниже.

![Поддержка @when и @else в CSS].

Использование @when/@else в CSS

Предположим, у нас есть один набор правил, который мы хотим применить к экранам шириной менее 780 пикселей, поддерживающих display: flex, и другой, который должен применяться ко всему, кроме этого. Раньше нам приходилось использовать запросы @media, чтобы выбирать обе эти вещи по отдельности. Это стало немного запутанным при выборе нескольких разных вещей. С @when и @else это выглядит так:

``CSS

@когда экран и (максимальная ширина: 780 пикселей) и поддерживает (отображение: flex) {

.мой элемент {

красный цвет;

дисплей: гибкий;

@еще {

.мой элемент {

дисплей: блок;

Мы также можем связать несколько условий. Например, предположим, что у нас есть три сценария: экраны с максимальной шириной 780 пикселей, которые поддерживают display: flex, экраны большего размера, которые поддерживают display: flex, и все остальное. В этом случае у нас может быть несколько условий:

``CSS

@когда экран и (максимальная ширина: 780 пикселей) и поддерживает (отображение: flex) {

.мой элемент {

красный цвет;

дисплей: гибкий;

Экран @else и поддерживает (display: flex) {

.мой элемент {

дисплей: гибкий;

@еще {

.мой элемент {

дисплей: блок;

Как и следовало ожидать, у нас может быть еще больше операторов @else, но приведенное выше дает вам представление о том, насколько полезными станут как @when, так и @else при реализации в CSS.

Вывод

Условные операторы никогда не были в ванильном CSS, так что здорово, что они скоро появятся. Это также значительно упростит создание медиа-запросов. У нас уже есть логика в CSS, если мы используем сторонние пакеты, такие как SASS, но когда дело доходит до CSS, мы можем избежать необходимости использовать препроцессор или сборку с этим дополнением.

Также опубликовано здесь