web-dev-qa-db-fra.com

Valeurs CSS utilisant l'attribut de données HTML5

width: attr(data-width);

Je veux savoir s’il est possible de définir une valeur CSS à l’aide de data- attribue de la même manière que vous pouvez définir css content. Actuellement, ça ne marche pas.

HTML

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

CSS

div { width: attr(data-width) }
csshtml5attributes
98
James Kyle

Il existe, en effet, une prévision pour une telle fonctionnalité, regardez http://www.w3.org/TR/css3-values/#attr-notation

Ce violon devrait fonctionner comme ce dont vous avez besoin, mais ne le sera pas pour le moment.

Malheureusement, il s'agit toujours d'un brouillon et il n'est pas entièrement mis en œuvre sur les principaux navigateurs.

Cela fonctionne pour content sur les pseudo-éléments, cependant.

76
Caio Cunha

Vous pouvez créer avec javascript des css -rules que vous pourrez utiliser plus tard dans vos styles: 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 + "%");
}

Cela crée 100 pseudo-sélecteurs comme celui-ci:

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

Note: Ceci est un peu hors sujet, et pas vraiment ce que vous (ou quelqu'un) voulez, mais peut-être utile.

9
yckart

À ce jour, vous pouvez lire certaines valeurs des attributs HTML5 data dans les déclarations CSS3. Dans le violon de CaioToOn , le code CSS peut utiliser les propriétés data pour définir le content.

Malheureusement, cela ne fonctionne pas pour width et height (testé dans Google Chrome 35, Mozilla Firefox 30 et Internet Explorer 11).

Mais il existe un CSS3 attr () Polyfill de Fabrice Weinberg qui fournit un support pour data-width et data-height. Vous pouvez trouver le rapport GitHub ici: cssattr.js .

7
Benny Neugebauer