Вопрос:
Я пытаюсь добавить цвет к другому элементу с атрибутом data в моем css, но doensn’t работать…
Я следую этим инструкциям:
Функция attr(): значения свойств, собранные из редактируемого документа.
HTML
<table> <tr> <td> <span class=»bgborder» data-color=»#e7663f»></span> <i class=»fa fa-copy»></i> </td> <td> <span>Blaablaaablaaa</span> </td> </tr> </table> <table> <tr> <td> <span class=»bgborder» data-color=»#77c385″></span> <i class=»fa fa-upload fa-fw»></i> </td> <td> <span>Blablaablaaa</span> </td> </tr> </table>
CSS
.bgborder { display: block; width: 5px; height: 100%; position: absolute; top: 0; background-color: attr(data-color color); }
Ничего не видно… Я прав?
У моего инспектора хрома у меня есть это:
background-color: attr(data-color color); /! Invalid property value
Я не понимаю, почему…???
Спасибо за вашу помощь:)
Лучший ответ:
Всегда хорошая идея прочитать документацию: https://developer.mozilla.org/en/docs/Web/CSS/attr
Сюрприз! Если ничего не поддерживает, то это не сработает;)
Альтернатива: Если вы знаете, что у вас ограниченный диапазон цветов, попробуйте:
[data-color=red] {background-color:red !important} [data-color=blue] {background-color:blue !important} [data-color=zophan-blue] {background-color:#33ccff !important}
Как вы можете видеть, это обеспечивает гибкость, например, определение собственных цветов;)
Ответ №1
Если вы говорите только о цветах, вы можете использовать значение currentColor в качестве прокси.
Например:
HTML
<td> <span class=»bgborder» style=»color: #e7663f»></span> <i class=»fa fa-copy»></i> </td>
CSS
.bgborder { background-color: currentColor; } Ответ №2
В настоящее время функция CSS attr может использоваться только с свойством content в браузерах
В спецификации CSS2:
Ограничено свойством содержимого
CSS3 расширит это предложение (предложение)
.. может использоваться для всех свойств; могут возвращать другие значения, чем <string>
Ответ №3
Я предполагаю, что вы ищете переменные CSS, и вы можете использовать их в Chrome, Firefox и Safari. Проверьте поддержку браузера Могу ли я использовать
И можно увидеть больше на видео из Lea Verou
