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
CSS
div { width: attr(data-width) }
De hecho, hay una previsión para tal característica, mira http://www.w3.org/TR/css3-values/#attr-notation
Este violín 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.
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.
A partir de hoy, puede leer algunos valores de atributos de data HTML5 en declaraciones CSS3. En el violín de CaioToOn, 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 repository de GitHub aquí: cssattr.js .