Хак с каскадными слоями для именованных медиа-запросов

Не так давно я рассказывал о Custom Media Queries, которые добавляют в CSS возможность создавать именованные медиа-запросы. Вместо того, чтобы каждый раз указывать значение, можно объявить его один раз и присвоить понятное имя.

В Firefox 146 эту функциональность добавили за флагом, а в других браузерах её нет и пока не известно, когда появится. Но мне попалось видео Кевина Пауэлла, в котором он делится находкой одного из подписчиков как можно реализовать именованные медиа-запросы.

Всё строится на каскадных слоях. Директива @layer позволяет перечислить слои в порядке приоритета применения стилей. Первый слой в списке — менее приоритетный, последний слой в списке — более приоритетный.

Директиву @layer с порядком слоёв можно вкладывать внутрь @media. В зависимости от значения медиа-запроса можно менять порядок слоёв. Это позволяет добиться желаемого эффекта и получить «именованные медиа-запросы»:

@media (width >= 1280px) {
  @layer mobile, tablet, desktop;
}

@media (640px <= width < 1280px) {
  @layer desktop, mobile, tablet;
}

@media (width < 640px) {
  @layer desktop, tablet, mobile;
}

.grid {
  grid-template-columns: repeat(
    var(--columns), 
    minmax(0, 1fr)
  );

  @layer desktop {
    --columns: 4;
  }

  @layer tablet {
    --columns: 2;
  }

  @layer mobile {
    --columns: 1;
  }
}

На экранах шире 1280px слой desktop самый приоритетный, поэтому применится свойство --columns: 3;. На экранах от 640px до 1280px самым приоритетным становится слой tablet, поэтому применится --columns: 2; На экранах ниже 640px применится --columns: 1;

Если какой-то из слоёв не указан, то применится меньший по приоритету. Стили, которые не меняются от размеров окна можно писать вне слоёв. Но важно помнить, что стили вне слоёв всегда более приоритетные, чем стили в слоях.

.grid {
  /* 
    Приоритетнее слоёв, поэтому
    колонок всегда будет 2
  */
  --columns: 2;
  grid-template-columns: repeat(
    var(--columns), 
    minmax(0, 1fr)
  );
 
  @layer desktop {
    /* Стили слоёв игнорируются */ 
    --columns: 4;
  }

  @layer tablet {
    /* Стили слоёв игнорируются */ 
    --columns: 2;
  }
 
  @layer mobile {
    /* Стили слоёв игнорируются */ 
    --columns: 1;
  }
}

Конечно, это — хак, на боевых проектах использовать не стоит. Но хак интересный и креативный. Выглядит вполне нормально, а каскадные слои Baseline Widely Available с марта 2022 года и на момент написания поддерживаются в 95.21% браузеров.

Если ну очень не хватает именованных медиа-запросов, чтобы отказаться от препроцессоров, то можно попробовать затащить. Хотя лучше дождаться внедрения официального решения Custom Media Queries из спецификации.

#css