This should be red, with an opacity of 0.5и это в файле CSS:.window > .content .wbutton.tint { border: solid thin attr(data-tint, color);" />

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

css css3

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)

Автор: Peter W. Источник Размещён: 12.11.2019 09:15

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

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

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

Автор: BoltClock Размещён: 07.01.2012 01:08

10 плюса

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

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

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

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

Автор: Benny Neugebauer Размещён: 15.07.2014 12:48

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:06

0 плюса

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

<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
Вопросы из категории :
32x32