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


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

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

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

}
4   51   2016-11-21 17:47:04

4 ответа:

С spec,

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

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

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

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

как Ориол ответил в настоящее время CSS переменные уровня 1's 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 понял что эти переменные среды будут использоваться в запросах мультимедиа, и таб Аткинс-младший из Google тогда понял что пользовательские переменные среды будут особенно полезны в качестве глобальных, не переопределяемых корневых переменных, используемых в запросах мультимедиа. Теперь,Дина "Дино" Джексон из Apple присоединится к Аткинсу в редактировании уровня 2.

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

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


обновление 2018-02-08: Safari Technology Preview 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]".

один из способов достичь того, что вы хотите, это использовать пакет 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) {}

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

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

:root {
  --gutter: 4px;
}

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

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