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. Я делаю что-то неправильно?
- Как перекосить элемент, но сохранить текст нормальным (не подверженным курку)
- Какова цель символа «@» в CSS?
- Почему размер windows меньше ширины видового экрана, заданного в медиа-запросах
- В чем разница между переключателями атрибутов pipe (|) и cart (^)?
- Как сделать трехугольный треугольник в CSS
Согласно спецификациям W3C для функции attr() , она должна работать.
(Кроме того, есть страница об attr() в MDN Wiki , поэтому я предполагаю, что она должна по крайней мере работать в Firefox)
- Почему гибкий ребенок ограничен размером родителя?
- CSS3 - Как стилизовать выделенный текст в текстовых областях и входах в Chrome?
- Поддерживать соотношение сторон по ширине и высоте
- Чистый CSS для изменения размера шрифта на основе динамического количества символов
- Зебра разбивает таблицу со скрытыми строками с помощью CSS3?
- CSS3 transform: rotate; в IE9
- Почему функция CSS calc () не работает для меня?
- свойство flexbox и wrap
Глядя на грамматику, приведенную в спецификации:
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 каждый процентный шанс, позволяющий установить ширину диапазона с шириной данных.
Посмотрите скрипку