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

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

This should be red, with an opacity of 0.5 

и это в файле 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)

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

 attr(  ? [ ,  ]? ) 

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

 .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. Чтобы усугубить ситуацию, она по-прежнему подвержена риску в связи с последним проектом редакции спецификации .

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

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

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

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

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

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

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

Я нашел хак. Это не атрибут, а манипулирование непосредственно стилями. В 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/

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

 

Тогда в вашем 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 каждый процентный шанс, позволяющий установить ширину диапазона с шириной данных.

Посмотрите скрипку

  • Центр Треугольника в нижней части Div
  • Могу ли я исчезать в фоновом изображении (CSS: background-image) с помощью jQuery?
  • Заказ объявлений с конкретными поставщиками CSS
  • Могу ли я объединить: nth-child () или: nth-of-type () с произвольным селектором?
  • На странице начальной загрузки, как центрировать div
  • У LESS есть функция «расширения»?
  • Вложенные правила @media в CSS
  • Является ли CSS3 официальным стандартом?
  • Cut Corners с использованием CSS
  • Переходы на дисплее: свойство
  • Как изменить цвет полосы прокрутки с помощью css
  • Давайте будем гением компьютера.