Описание тега css-variables

Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations.
1 ответ

Используйте CSS-переменную в SVG через <img>

У меня есть SVG, который я сейчас отображаю через &lt;img src="foobar.svg"&gt;, Родительский HTML имеет некоторый CSS-код, который определяет переменные, которые мне нужны в SVG. SVG имеет &lt;style&gt; чтобы хотлинк это. CSS-переменные, определенны…
24 авг '18 в 18:10
0 ответов

Как обновить переменную CSS через JQuery/Javascript

Недавно я узнал, что мы можем использовать переменную CSS и использовать эту переменную в нашем коде CSS. У меня есть следующий код. body { --common-padding:15px; --color: white; } .test { padding: var(--common-padding); background-color: green; } .…
20 мар '18 в 13:16
5 ответов

Список пользовательских свойств CSS (CSS-переменные)

Я установил некоторые пользовательские свойства CSS в моей таблице стилей: :root { --bc: #fff; --bc-primary: #eee; --bc-secondary: #ddd; } Я могу получить их по отдельности, если я уже знаю имя переменной CSS следующим образом: console.log(getComput…
18 авг '17 в 18:40
0 ответов

css: преобразование + 2 переменные css

У меня есть следующий CSS на серии элементов. #foo-parent { --rotation: 45deg; } @media (max-width: 1680px) { .foo { --multiplier: 8.33; } } /* a number of other nearly identical media queries defining different values for --multiplier */ .foo { tra…
24 сен '16 в 00:57
1 ответ

Как бы я решил эту проблему на freecodecamp.org? - CSS связаны

.red-box Правило должно включать запасной вариант с background установлен в red непосредственно перед существующим background декларация Вот предварительно сгенерированный код: :root { --red-color: red; } .red-box { background: var(--red-color); hei…
24 сен '18 в 02:47
1 ответ

Можно ли использовать CSS-переменные для изменения содержимого TITLE (описание при наведении курсора) объектов SVG?

Можно ли использовать переменные CSS (аналог, например, непрозрачность в style="opacity:var(--QQQ_SOMETHING_AAA, 1)" а также .ZZZ_RECTANGLES{--QQQ_SOMETHING_AAA: 0.7;} настроить название SVGS (описание при наведении курсора) &lt;title&gt;&lt;/title&…
23 июн '18 в 07:27
3 ответа

Как установить переменную класса анимации CSS с помощью Javascript/jQuery?

Я осуществлял некоторые CSS анимации как именованные классы, поэтому я могу легко добавлять / удалять любую связанную анимацию для элемента, делая его "доступным" для последующих или повторяющихся анимаций. Я опускаю пальцы ног в использование CSS п…
0 ответов

Как получить значение переменных CSS, установленных в таблице стилей?

У меня есть этот CSS: body { --animation: terminal-bar; --size: 1.4; } как я могу получить значение --animation в JavaScript? Я пробовал это: getComputedStyle(document.body)['--animation']; document.body.style.getPropertyValue('--animation'); они об…
05 сен '18 в 09:30
2 ответа

Mixin, классы и пользовательские элементы в Polymer

Я создаю файл с именем my-mixins.html содержащий: &lt;link rel="import" href="../polymer/polymer.html"&gt; &lt;style is="custom-style"&gt; :root { --red: { color: red; }; } // This won't work .green: { color: green; } &lt;/style&gt; Затем я создаю э…
16 ноя '16 в 17:11
1 ответ

: импортированный из root CSS не работает в Safari и IE 11

:root Селектор не работает в некоторых браузерах. Код: :root { --blue: #4d6fd3; --yellow: #d8c812; } h1{ color: var(--blue); } h2{ color: var(--yellow); } &lt;h1&gt;This is a heading with blue color&lt;/h1&gt; &lt;h2&gt;This is a heading with yellow…
1 ответ

JavaScript - динамически загружаемый CSS: переменная CSS не видна для JS, но оценивается с помощью CSS

Я загружаю некоторые таблицы стилей динамически через JavaScript в мое приложение. В этих таблицах стилей у меня есть разные переменные CSS, которые я хочу читать / писать из моего JS. Таблицы стилей, которые вставляются непосредственно в тег head, …
21 июл '17 в 15:14
2 ответа

Переменные CSS: синтаксис Sugar существует?

Вместо написания: :root { --pc: gray; --sc: lightgray; } var(--pc) Есть ли еще более короткий синтаксис, по крайней мере, короче, чем var(--pc)?
01 июл '18 в 22:18
1 ответ

Переменные CSS - не работает несколько резервных вариантов

Согласно MDN, var Функция принимает несколько откатов. Но я не могу заставить их работать. Я попробовал следующий код на Chrome, Firefox и Safari. background-color за .demo3 прозрачно во всех вышеперечисленных браузерах. Это ошибка с кодом, или пото…
02 июн '17 в 05:32
1 ответ

Ionic 4: прозрачный заголовок

Я хочу сделать цвет фона моего заголовка прозрачным. Мой HTML выглядит следующим образом: account.page.html &lt;ion-header&gt; &lt;ion-toolbar&gt; &lt;ion-buttons slot="start"&gt; &lt;ion-back-button defaultHref="home"&gt;&lt;/ion-back-button&gt; &l…
18 авг '18 в 07:28
2 ответа

Chrome Dev Tools Профилирование CSS переменных

Я новичок в профилировании с помощью инструментов Chrome Dev. Я хочу выяснить, есть ли / сколько переменных перфорированного CSS, поэтому я хочу сравнить ту же страницу с предварительно обработанными переменными css и css на стороне сервера. В профи…
18 сен '17 в 21:42
1 ответ

Переменные CSS с арифметическими операциями не работают в сокращенных свойствах?

Пожалуйста, помогите мне выяснить, почему арифметическая операция в переменной CSS нарушает код. Я начал с простого файла CSS с одним правилом: html { font: 16px/32px Arial; } В браузерах это работает как написано: размер шрифта 16px, высота строки …
20 окт '17 в 14:07
1 ответ

Как установить динамическое имя свойства в var()

Я пытаюсь использовать пользовательские свойства, основанные на динамических значениях, таких как attr(), Например, в приведенном ниже коде я попытался получить доступ к обоим пользовательским свойствам на основе текущего элемента. id приписывать. :…
08 дек '17 в 04:45
1 ответ

Переменные массива CSS - возможно?

Я понимаю, как использовать переменные в CSS. Они помогли ускорить мой рабочий процесс на сайтах моих клиентов. Я заметил, что более чем в нескольких случаях я записывал переменные с номером рядом с ним, чтобы назначить их определенному цвету или ви…
27 окт '16 в 04:30
3 ответа

Использование CSS-переменных (пользовательских свойств) в свойстве "content:" псевдоэлемента

Пример использования (что я хочу) div::after { content: var(--mouse-x) ' / ' var(--mouse-y); } Тестовый пример, показывающий, что он НЕ работает: CodePen: CSS-переменные в свойстве "content:" псевдоэлемента (тестовый пример) от Jase Smith document.a…
20 окт '16 в 20:42
2 ответа

Могу ли я иметь один файл переменных, используя cssnext с webpack?

У меня есть проект, который имеет набор CSS-файлов (по одному для каждого реагирующего компонента). Я использую css-загрузчик (с модулями) в webpack, а также postcss-cssnext. В идеале я хочу сингл variables.css так что я могу обмениваться переменным…