css - support - can i use flexbox

Attr() de CSS3 no funciona en los principales navegadores

Question

Tengo esto en mi documento HTML:

<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>

y esto en el archivo CSS:

.window > .content .wbutton.tint {
border: solid thin attr(data-tint, color);
box-shadow: inset 0 0 50px attr(data-tint, color);
}

Firefox devuelve un error CSS en Firebug. ¿Estoy haciendo algo mal?

De acuerdo con las especificaciones W3C para la función attr() , debería funcionar.

(Además, hay una página sobre attr() en el Wiki de MDN , así que supongo que al menos debería funcionar en Firefox)

Answer 1

A partir de hoy, attr() en CSS3 solo admite obtener valores del atributo de data HTML5 para establecer el content de un elemento. Hay un buen fiddle lo muestra.

Lo probé en Google Chrome 35, Mozilla Firefox 30 e Internet Explorer 11.

Si desea utilizar atributos de datos HTML5 para diferentes cosas en CSS3, como establecer el width y el height de los elementos, entonces necesita una biblioteca de JavaScript adicional.

Fabrice Weinberg escribió un CSS3 attr () Polyfill que maneja data-width data-height . Puede encontrar el repositorio GitHub de Fabrice aquí: cssattr.js .

Answer 2

Encontré hack. Esto no es un atributo, sino que se manipula directamente en los estilos. En Chrome Canary, puede usar propiedades CSS personalizadas y JS para manipular propiedades.

En CSS:

.some { background-position: var(--x) 0; }

En JS:

element.style.setProperty("--x", "100px", "");
//With same success you can set attribute.

Caso de prueba: https://jsfiddle.net/y0oer8dk/

Firefox: https://jsfiddle.net/0ysxxmj9/2/

Answer 3

Funciona, pero no de la manera en que piensas. No es un valor que se envía a través de una variable, sino más bien como un desencadenante para luego asignarle un valor. Y debido a esto, es mejor hacer que los atributos de los datos sean únicos pero simples. Un pequeño ejemplo podría ayudar:

<div class="data"><span data-width="80" data-tint="lime"></span></div>

Luego, en tu css pondrías:

.data {height: 50px; width: 100%; background-color: #eee;}
.data > span {display: block; height: 100%;}
.data > span[data-width="80"] {width: 80%;}
.data > span[data-tint="lime"] {background-color: rgba(118, 255, 3, 0.6);}

No tiene sentido si lo haces a pequeña escala pero a mayor escala y con la ayuda de SCSS algunas cosas se vuelven más fáciles, como ...

@for $i from 1 through 100 {
&[data-width="#{$i}"] {
.data > span {
width: calc(#{$i} * 1%);
}
}
}

Eso compilará en CSS cada porcentaje de posibilidad que le permite establecer el ancho de su tramo con ancho de datos.

Mira el violín

Answer 4

Mirando la gramática que se da en la especificación:

attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )

Parece que se debe descartar la coma entre el nombre del atributo y la unidad que se utilizará:

.window > .content .wbutton.tint {
border: solid thin attr(data-tint color);
box-shadow: inset 0 0 50px attr(data-tint color);
}

Sin embargo, incluso si tiene la sintaxis correcta, tampoco funcionará. Resulta que no hay implementaciones conocidas de la versión de nivel 3 de attr() partir de 2012 2013 2014 2015 2016 2017 2018. Para empeorar las cosas, todavía está en riesgo a partir del último borrador de la especificación del editor .

Pero no todo está perdido: si desea ver implementada esta característica en los próximos navegadores, todavía hay tiempo para sugerirla en los canales de comentarios relevantes. Aquí están las propuestas que se han presentado hasta ahora:

• Microsoft Edge Platform , actualmente bajo consideración (ht Lea Verou !)

Para el registro, la versión básica de Nivel 2.1 es totalmente compatible con versiones recientes de todos los principales navegadores, incluidos IE8 + y Firefox 2+, y se usa con la propiedad de content para los pseudoelementos :before y :after del contenido generado. La tabla de compatibilidad del navegador MDN solo es aplicable a esta versión, y no a la versión CSS3.