Собственные переменные CSS не работают в запросах мультимедиа

Я пытаюсь использовать переменные CSS в медиа-запросе, и это не работает.

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}
51
css css-variables media-queries

4 ответов

С spec,

на var() функция может использоваться вместо любой части значения в любое свойство элемента. The var() функция не может использоваться как имена свойств, селекторы или что-либо еще, кроме значений свойств. (При этом обычно создается недопустимый синтаксис или значение, которое значение не имеет связи с переменной.)

так что нет, вы не можете использовать его в медиа-запросе.

и что делает чувство. Потому что вы можете установить --mobile-breakpoint, например,:root, то есть <html> element, и оттуда наследуются другим элементам. Но медиа-запрос не является элементом, он не наследуется от <html>, так что это не может работать.

это не то, что переменные CSS пытаются выполнить. Вместо этого можно использовать препроцессор CSS.

46

As Ориоль ответил в настоящее время CSS переменные 1-го уровня var() не может использоваться в запросах мультимедиа. Однако в последнее время произошли изменения, которые позволят решить эту проблему. через несколько лет, после того как CSS переменные среды модуль Уровень 1 стандартизирован и реализован, мы сможем использовать env() переменные в медиа-запросов.

если вы читали спецификация и беспокойство, или если вы хотите озвучить свою поддержку варианта использования медиа-запроса, вы все равно можете сделать это в GitHub w3c / csswg-черновики#1693 или любая проблема CSS GitHub с префиксом " [css-env-1]".

оригинальный ответ 2017-11-09: В последнее время рабочая группа CSS решила это переменные CSS Уровень 2 будет поддерживать пользовательские переменные среды с помощью env(), и они попытаются сделать их действительными в медиа-запросы. Группа решила это после того, как Apple впервые предложила стандартные свойства пользовательского агента, незадолго до официального анонса iPhone X в сентябре 2017 года (см. также WebKit:" Разработка веб-сайтов для iPhone X " Тимоти Хортона). Затем другие представители браузера согласились с тем, что они будут в целом полезны для многих устройств, таких как телевизионные дисплеи и чернильная печать с кровоточащими краями. (env() называли constant(), но это уже сейчас устарел. Вы все еще можете видеть статьи, которые ссылаются на старое имя, например эта статья Петра-Павла Коха.) Прошло несколько недель,Кэмерон Маккормак из Mozilla понял что эти переменные среды будут использоваться в запросах мультимедиа и Tab Аткинс-младший из Google тогда понял что пользовательские переменные среды будут особенно полезны в качестве глобальных, не переопределяемых корневых переменных, используемых в запросах мультимедиа. Теперь,Дина "Дино" Джексон из Apple присоединится к Atkins на уровне редактирования 2.

вы можете подписаться на обновления по данному вопросу в w3c/csswg-drafts выпуск GitHub #1693. (Для особенно важных исторических сведений разверните журналы собраний, встроенные в резолюции CSSWG встреча бота и поиск "MQ", что означает"медиа-запросы".)

я планирую обновить этот вопрос в будущем, когда произойдет больше событий. Будущее это интересно.

обновление 2018-02-08: Предварительный Просмотр Технологии Safari 49 добавлена поддержка парсинга calc() в медиа-запросов, которые могут быть прелюдией к поддержке env() в них также.

обновление 2018-04-27: Команда Chromium в Google решила начать работу над env(). В ответ, Аткинс начал указывать env() в отдельном неофициальном проекте стандарта: CSS переменные среды модуль Уровень 1. (См.его комментарий GitHub в w3c / csswg-черновики#1693 и его комментарий в w3c / csswg-черновики#1817.) Проект вызывает переменные в медиа-запросах как явный вариант использования:

поскольку переменные среды не зависят от значения чего-либо, взятого из определенного элемента, их можно использовать в местах, где нет очевидного элемента для рисования, например в @media правила, где var() функция не будет действительной.

если Вы читаете спецификацию и имеете беспокойство, или если вы хотите озвучить свою поддержку варианта использования медиа-запроса, вы все равно можете сделать это в GitHub w3c / csswg-черновики#1693 или любая проблема CSS GitHub с префиксом " [css-env-1]".

24

один из способов достичь желаемого-использовать пакет npm postcss-media-variables.

Если вы в порядке с использованием пакетов npm, то вы можете посмотреть documentatoin для того же здесь

пример

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}
4

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

умный способ использовать его-изменить ваши переменные в медиа-запросе, чтобы повлиять на весь ваш стиль. Я рекомендую в этой статье.

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}
2