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);
}

Однако, даже если у вас правильный синтаксис, он тоже не будет работать. Оказывается, нет известных реализаций версии уровня 3attr() по состоянию на 201220132014201520162017 2018. Что еще хуже, это все еще под угрозой с момента последней редакции спецификации спецификации.

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

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

Напомним, что базовая версия уровня 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.

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

Answer 5

То, что вы пытаетесь выполнить, в настоящее время не может быть достигнуто с помощью атрибутов данных, как уже было сказано несколькими людьми. Хотя ответ от @Eugene будет работать, он добавит невероятное количество раздувания в ваш файл CSS и поэтому неразумно. @benny-neugebauer был прав, говоря, что это невозможно с атрибутами данных, но он не совсем прав, говоря, что для этого вам нужен javascript. Есть способ добиться этого только с помощью html и css...

Нам нужно начать с преобразования вашего атрибута из атрибута данных в переменную CSS.

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

становится

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

Далее нам нужно немного изменить ваш css. Следует также отметить, что, поскольку вы использовали запятую в своем attr(), где у вас есть colorэто то место, где вы должны или можете включить запасной вариант на случай, если ваша переменная недействительна. Если вы хотите объявить, что значением атрибута должен быть цвет, вы не будете использовать запятую.

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

становится

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

Вы можете увидеть это в действии ниже.

Вот статья Криса Койера на css-tricks.com , в которой содержится дополнительная информация.