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

Question

У меня есть это в моем 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)

Answer 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 2018 2019. Что еще хуже, это все еще под угрозой с момента последней редакции спецификации спецификации .

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

• Платформа Microsoft Edge , в настоящее время рассматривается (ht Lea Verou !)

Для справки: базовая версия Level 2.1 полностью поддерживается во всех последних версиях всех основных браузеров, включая IE8 + и Firefox 2+, и используется со свойством content для :before и :after псевдоэлементы для сгенерированного контента. Таблица совместимости браузера MDN применима только к этой версии, но не к версии CSS3.

Answer 2

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

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

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

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

Answer 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/

Answer 4

Это работает, но не так, как вы думаете. Это не значение, которое отправляется через переменную, а скорее как триггер, чтобы затем присвоить значение. И из-за этого лучше сделать атрибуты данных чем-то уникальным, но простым. Небольшой пример может помочь:

<div class="data"><span data-width="80" data-tint="lime"></span></div>

Тогда в вашем CSS вы должны поставить:

.data {height: 50px; width: 100%; background-color: #eee;}
.data > span {display: block; height: 100%;}
.data > span[data-width="80"] {width: 80%;}
.data > span[data-tint="lime"] {background-color: rgba(118, 255, 3, 0.6);}

Бессмысленно, если вы делаете это в небольшом масштабе, но в большем масштабе и с некоторой помощью SCSS, некоторые вещи становятся проще, например ..

@for $i from 1 through 100 {
    &[data-width="#{$i}"] {
        .data > span {
            width: calc(#{$i} * 1%);
        }
    }
}

Это скомпилирует в CSS каждую процентную возможность, позволяя вам установить ширину диапазона с data-width.

Проверьте скрипку