Собственные переменные CSS, не работающие в медиа-запросах

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

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

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

}

Ответ 1

Из spec,

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

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

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

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

Ответ 2

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

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

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

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

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

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

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

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

Обновление 2019-07-06: работа над спецификациями продолжается. GitHub выпуск № 2627 посвящен пользовательским переменным среды.

Ответ 3

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

Если вы хорошо используете пакеты npm, посмотрите документацию здесь

postcss-медиа-переменные

пример

/* 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

Тем не менее, вы МОЖЕТЕ сделать @media запросить свой оператор root!

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}

Полностью работает в Chrome, Firefox и Edge по крайней мере в последних производственных версиях на момент публикации.

Ответ 5

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

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

:root {
  --gutter: 4px;
}

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

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

Ответ 6

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

Кто-то упомянул пользовательские переменные окружения (похожие на пользовательские переменные css env() вместо var()), и принцип здравый, хотя есть еще две основные проблемы:

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