hojas - Valores de CSS con el atributo de datos HTML5

hojas de estilo css

Question

Esta pregunta ya tiene una respuesta aquí:

• Attr () de CSS3 no funciona en los principales navegadores 4 respuestas

width: attr(data-width);

Quiero saber si hay alguna manera de establecer un valor de css utilizando el atributo de data- de HTML5 de la misma manera que puede establecer el content css. Actualmente no funciona.

HTML

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

CSS

div { width: attr(data-width) }

Answer 1

A partir de hoy, puede leer algunos valores de atributos de data HTML5 en declaraciones CSS3. En fiddle el código CSS puede usar las propiedades de data para configurar el content .

Desafortunadamente no funciona para el width y la height (probado en Google Chrome 35, Mozilla Firefox 30 e Internet Explorer 11).

Pero hay un Polyfill CSS3 attr () de Fabrice Weinberg que proporciona soporte para data-width data-height . Puede encontrar el repositorio de GitHub aquí: cssattr.js .

Answer 2

De hecho, hay una previsión para tal característica, mira http://www.w3.org/TR/css3-values/#attr-notation

Este fiddle debería funcionar como lo que necesita, pero no lo hará por ahora.

Desafortunadamente, sigue siendo un borrador y no está completamente implementado en los principales navegadores.

Sin embargo, funciona para content en pseudo-elementos.

Answer 3

Puede crear con javascript algunas rules css, que luego puede usar en sus estilos: 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 + "%");
}

Esto crea 100 pseudo-selectores como este:

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

Nota: Esto es un poco offtopic, y no realmente lo que usted (o alguien) quiere, pero tal vez útil.