Почему не работает attr()?

Question

[ne_pes]

Хочу задать цвет фона через attr() и data-background, в чем ошибка??
https://codepen.io/v-tumane98/pen/XxBXNp

Comments

[Денис Инешин]

Зачем идти таким сложным путем? Если вы можете задать html-атрибут `data-background`, то точно так же вы можете задать стиль: `style="background-color: #000;"`

[Exploding]

Денис Инешин, Ударяясь в перфекционизм: где-то вроде бы читал в гугловских письменах, что инлайновые стили не приветствуются (где и чем именно, тоже не помню:))

[Nikita-Fast]

Exploding, но однако они есть же, любая карусель генерирует вагон инлайновых стилей

[Exploding]

Nikita-Fast, гораздо проще управлять стилями через смену классов... как по мне, хотя у инлайна приоритет выше...

[Nikita-Fast]

Exploding, да, я согласен ...но однако inline нужен там где необходимо

[Денис Инешин]

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

Answer 1

[Сергей delphinpro]

Потому что базовая поддержка со свойством content древняя и работает везде. А вот то что эта функция по спецификации может (должна) работать с любым свойством — пока еще не реализовано ни в одном браузере.
В этом легко убедится самому =) https://caniuse.com/#feat=css3-attr

Answer 2

[profesor08]

.main{
  div{
    &:before {
      content: attr(data-background);
    }
  }
}

Comments

[ne_pes]

не то

[profesor08]

ne_pes, это именно то самое, что можно сделать с этой функцией и ничего более. Смирись.