Значения CSS с использованием атрибута данных HTML5

Question

width: attr(data-width);

Я хочу знать, есть ли способ установить значение CSS, используя HTML5 data- атрибуты так же, как вы можете установить CSS content, В настоящее время это не работает.

---

HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

Answer 1

Существует, действительно, предвидение такой функции, посмотрите http://www.w3.org/TR/css3-values/

Эта скрипка должна работать так, как вам нужно, но пока не сработает.

К сожалению, это все еще черновик, и он не полностью реализован в основных браузерах.

Это работает для content на псевдоэлементах, хотя.

Answer 2

Вы можете создать с помощью JavaScript некоторые CSS-rules, который вы можете позже использовать в своих стилях: http://jsfiddle.net/ARTsinn/vKbda/

var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));

var i = 101;
while (i--) {
    addRule("[data-width='" + i + "%']", "width:" + i + "%");
}

Это создает 100 псевдо-селекторов, как это:

[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }

Примечание: это немного оффтоп, и не совсем то, что вы (или кто-то) хотите, но, возможно, полезно.

Answer 3

На сегодняшний день вы можете прочитать некоторые значения из HTML5 data атрибуты в объявлениях CSS3. В скрипке CaioToOn CSS-код может использовать data свойства для настройки content,

К сожалению, это не работает для width а также height (протестировано в Google Chrome 35, Mozilla Firefox 30 и Internet Explorer 11).

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