CSS3 attr () не работает в основных браузерах
21042 просмотра
4 ответа
У меня есть это в моем документе 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)
Ответы (4)
60 плюса
Глядя на грамматику, приведенную в спецификации:
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 20182019. Что еще хуже, это все еще под угрозой с момента последней редакции спецификации спецификации .
Но не все потеряно: если вы хотите, чтобы эта функция была реализована в будущих браузерах, еще есть время предложить ее в соответствующих каналах обратной связи! Вот предложения, которые были выпущены до сих пор:
- Платформа Microsoft Edge , в настоящее время на рассмотрении (ht Lea Verou !)
Напомним, что базовая версия уровня 2.1 полностью поддерживается во всех последних версиях всех основных браузеров, включая IE8 + и Firefox 2+, и используется со content
свойством псевдоэлементов :before
и :after
для сгенерированного содержимого. Таблица совместимости браузера MDN применима только к этой версии, но не к версии CSS3.
10 плюса
На сегодняшний день attr()
в CSS3 поддерживается только получение значений из data
атрибута HTML5 для установки content
элемента. Есть хорошая скрипка, которая показывает это.
Я проверил это в Google Chrome 35, Mozilla Firefox 30 и Internet Explorer 11.
Если вы хотите использовать атрибуты данных HTML5 для разных вещей в CSS3, таких как установка элементов width
and и height
of, то вам нужна дополнительная библиотека JavaScript.
Фабрис Вайнберг написал CSS3 attr () Polyfill, который обрабатывает data-width
и data-height
. Вы можете найти репозиторий Fabrice's GitHub здесь: cssattr.js .
1 плюс
Я нашел взломать. Это не атрибут, но манипулирование непосредственно на стилях. В 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/
Автор: user2454034 Размещён: 13.12.2015 09:060 плюса
Это работает, но не так, как вы думаете. Это не значение, которое отправляется через переменную, а скорее как триггер, чтобы затем присвоить значение. И из-за этого лучше сделать атрибуты данных чем-то уникальным, но простым. Небольшой пример может помочь:
<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.
Автор: Eugene Размещён: 10.04.2018 05:50Вопросы из категории :
- css Как определить, какой из указанных шрифтов был использован на веб-странице?
- css Создание закругленных углов с помощью CSS
- css Как автоматически изменить размер текстовой области с помощью Prototype?
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?
- css Create a variable in .CSS file for use within that .CSS file
- css Как разместить одно изображение поверх другого в HTML?
- css Как я могу отобразить только часть изображения в HTML / CSS?
- css Удалите все классы, начинающиеся с определенной строки.
- css3 Как я могу изменить порядок моих div с CSS?
- css3 Как заставить div заполнить оставшееся горизонтальное пространство?
- css3 Как нарисовать вертикальный текст с помощью кросс-браузера CSS?
- css3 Разверните div, чтобы взять оставшуюся ширину
- css3 Установить размер на фоновое изображение с помощью CSS?
- css3 Создание CSS3 box-shadow со всех сторон, кроме одного
- css3 Поддерживать соотношение сторон div с CSS
- css3 css селектор для соответствия элементу без атрибута x
- css3 Сделайте высоту div на 100% окна браузера