Блог

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

 [data-color] {
    --color: attr(data-color color, green);
}
* {
    color: var(--color, blue);
}  

 <div data-color="red">hello</div>  

Кажется, что attr работает только в псевдоселекторах (и, вероятно, только для content: свойства), но страница MDN attr гласит:

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

Есть даже демо, но оно не работает в Chrome на Linux, так что для меня это бесполезно. Это даже не работает в Firefox на Linux.

Есть ли какой-либо другой способ использовать переменные css без встроенных стилей и без записи dynamic <style></style> и nonce?

Пока нет. По той же ссылке вы можете прочитать:

Примечание: Функция attr() может использоваться с любым свойством CSS, но поддержка свойств, отличных от содержимого, является экспериментальной, а поддержка параметра типа или единицы измерения является редкой.

По-прежнему ни один браузер не поддерживает свойства attr() for, отличные от content, а также не поддерживает type-or-unit .

Стоит отметить, что вы можете использовать attr() внутри переменной CSS, но ее нужно использовать позже с контентом. Переменные CSS — это только промежуточное звено, поэтому мы оцениваем поддержку не на основе переменной, а на основе свойства, которое будет использовать переменную.

 [data-color] {
  --color: attr(data-color);
}

*::before {
  content: var(--color, "default");
  color:blue;
}  

 <div data-color="red">hello</div>  

Интересное использование свойства CSS attr, но, как указано в вопросе, поддержка его за пределами свойства псевдоэлемента скудна, см., Например https://developer.mozilla.org/en-US/docs/Web/CSS/attr

На самом деле это немного хуже, потому что, если у вас есть:

 * {
    color: var(--color, blue);
}
[data-color] {
    --color: green;
    --color: attr(data-color);
}  

 <div data-color="red">hello</div>  

аналогично вопросу, но выделено более явно. Предупреждение --color: attr(data-color) не помечается и игнорируется, а используется зеленый. Вместо этого принимается и —color устанавливается в строку. Это как если бы браузер вроде как распознал attr и что он должен что-то с ним делать, но на самом деле не делает этого полностью.

Для всех, кто все еще хочет управлять переменными CSS в HTML, вы можете сделать это так:

 * {
    color: var(--color, blue);
}  

 <div style="--color: red">hello</div>
<div>hello</div>