width: attr(data-row px); -> css vía js

quico5 · #1 (**permalink**) 27/06/2014, 06:11

Parece ser que los navegadores actuales por ahora no dan soporte para recoger un atributo de html en css de la forma que viene en la especificación, he pensado en hacerlo por javascript pero por ahora no tengo claro como desarrollarlo, gracias

Código HTML:

[data-row] {display:table; margin:0 auto; width: attr(data-row px);}

Código HTML:

<!DOCTYPE html>
<html lang='es'>
<head>
	<meta charset='UTF-8'>
	<title>Document</title>
	<style>
		[data-row] {display:table; margin:0 auto;}
		[data-row*='960'] {width: 960px;}
		[data-col] {display:table-cell; vertical-align:top; padding:0 5px;}
	</style>
</head>
<body>
	<div data-row='960'>
		<div data-col>
			prueba
		</div>
		<div data-col>
			prueba
		</div>
	</div>
</body>
</html>

quico5 · #2 (**permalink**) 27/06/2014, 06:13

¿puedo prescindir del prefijo DATA- o mas que una recomendación es una obligación? gracias

Creo haber leído que uno de sus puntos es que sea omitido por los buscadores

PHPeros · #3 (**permalink**) 27/06/2014, 07:24

Los prefijos data-* son cortesía de HTML5.

Si omites el "data", estarás poniendo atributos que no existen conforme al DTD del documento, y no validará bien...

zerokilled · #4 (**permalink**) 27/06/2014, 13:41

Cita:

Iniciado por quico5

Parece ser que los navegadores actuales por ahora no dan soporte para recoger un atributo de html en css de la forma que viene en la especificación...

buenas,
no se a ti pero a mi me funciona en chrome. en todo caso, si quieres capturar todos los elementos por javascript, intenta con la interfaz NodeIterator o Traversal.