valores CSS usando datos HTML5 atribuyen

width: attr(data-width);

Quiero saber si hay alguna manera es posible establecer un valor CSS usando HTML5 data- atributo de la misma manera que se puede establecer css content. Actualmente no funciona.valores CSS usando datos HTML5 atribuyen

HTML

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

CSS

div { width: attr(data-width) }

Fuente

2012-03-01 James Kyle

AFAIK no puede usar solo CSS. Sin embargo, es totalmente posible utilizar javascript. – David

Semánticamente esta es una mala idea porque rompe la separación del margen de beneficio y el diseño. –

Necesita encontrar un mejor ejemplo porque la solución a su problema anterior está utilizando

en lugar de

. Por el momento, solo puedo imaginar que tu pregunta sea interesante con respecto a los selectores de atributos: http://css-tricks.com/attribute-selectors/ –

Existe, de hecho, la previsión para tal función, se ven http://www.w3.org/TR/css3-values/#attr-notation

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

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

Funciona para content en pseudo-elementos, sin embargo.

Fuente

2012-08-08 18:25:31

es esta sintaxis css 'content: attr (data-content);' cross browser? funciona hasta IE8? – axel

Actualización: ahora es una función utilizable en los navegadores. –

@CaptainHypertext De acuerdo con 'caniuse.com', la función aún no está admitida (excepto por las cadenas en el atributo de contenido de los pseudo-elementos). http://caniuse.com/#feat=css3-attr – ne1410s

Teóricamente sí, con selectores de atributos, pero no he probado esto. Proveedores:

[data-width="600px"] { 
width: 600px; 
}

http://www.w3.org/TR/CSS2/selector.html#matching-attrs le ayudará a obtener lo que quiere

Fuente

2012-03-01 20:13:25 frank

+10

Supongo que el OP significa que no quiere codificar cosas como 600px. –

Claro, asumí que solo tenían eso para tratar de obtener lo que querían en apariencia ... antes de usar CSS para hacerlo, de ahí la pregunta ... – frank

Utilicé esto para ocultar un botón de seguimiento de un script de terceros (Shareaholic). Los siguientes botones se desbordaron en el móvil, así que eliminé un par de ellos usando [data-service = "google_plus"] {display: none} – costumingdiary

Se pueden crear con javascript algunos CSS- rules, que se puede utilizar más adelante 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.

Fuente

2013-06-05 19:58:19 yckart

TypeError no detectada: No se puede leer la propiedad 'longitud' de null en main.js: 1172 en main.js: 1179 (anónimo) @ main.js: 1172 (anónimos) @ main.js: 1179 09:02 : 48.363 –

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

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

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

Fuente

2014-07-14 10:46:36

valores CSS usando datos HTML5 atribuyen

Respuesta

Cuestiones relacionadas