CSS3 attr() не работает в основных браузерах

У меня это в моем документе HTML:

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

и это в файле CSS:

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint, color);
    box-shadow: inset 0 0 50px attr(data-tint, color);
}

Firefox возвращает ошибку CSS в Firebug. Я что-то делаю неправильно?

В соответствии с спецификациями W3C для функции attr() она должна работать.

(Кроме того, там страница о attr() в MDN Wiki, поэтому я предполагаю, что она должна хотя бы работать в Firefox)

Ответ 1

Глядя на грамматику, указанную в спецификации:

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

Похоже, что запятая между именем атрибута и используемым модулем должна быть удалена:

.window > .content .wbutton.tint {
    border: solid thin attr(data-tint color);
    box-shadow: inset 0 0 50px attr(data-tint color);
}

Однако, даже если у вас есть правильный синтаксис, он тоже не будет работать. Оказывается, нет известной реализации версии 3-го уровня attr(), но с ~~2012~~ ~~2013~~ ~~2014 " > ~~2015~~ 2016~~ 2017. Что еще хуже, он все еще находится под угрозой с самого последнего редактор проекта спецификации.

Но не все потеряно: если вы хотите увидеть эту функцию, реализованную в будущих браузерах, еще есть время предложить ее в соответствующих каналах обратной связи! Вот предложения, которые были доведены до сих пор:

Microsoft Edge Platform, в настоящее время находится в стадии рассмотрения (ht Lea Verou!)

Для записи базовая content для псевдо-элементов :before и :after для сгенерированного содержимого. Таблица совместимости браузера Mozilla Developer Network (MDN) применима только к этой версии, а не к версии CSS3.

Ответ 2

На сегодняшний день attr() в CSS3 поддерживает только получение значений из атрибута HTML5 data для установки content элемента. Существует хороший fiddle, который показывает его.

Я тестировал его в Google Chrome 35, Mozilla Firefox 30 и Internet Explorer 11.

Если вы хотите использовать атрибуты данных HTML5 для разных вещей в CSS3, например, для установки элементов width и height, вам понадобится дополнительная библиотека JavaScript.

Фабрис Вайнберг написал CSS3 attr() Polyfill, который обрабатывает data-width и data-height. Здесь вы можете найти репозиторий Fabrice GitHub: cssattr.js.

Ответ 3

Я нашел хак. Это не атрибут, а манипулирование непосредственно стилями. В Chrome Canary вы можете использовать пользовательские свойства css и JS для управления свойствами.

В CSS:

.some { background-position: var(--x) 0; }

В JS:

element.style.setProperty("--x", "100px", "");
//With same success you can set attribute.

Тестовый пример: https://jsfiddle.net/y0oer8dk/

Firefox: https://jsfiddle.net/0ysxxmj9/2/