La propiedad ALL y 3 palabras mágicas: initial, inherit y unset. 9.10.13
La propiedad "all" de css: para librarte de la cascada y herencia con una sola declaración.
La propiedad ALL y 3 palabras mágicas: initial, inherit y unset.
Actualización. Artículo publicado originalmente el 4 de Enero de 2013.
Si algo había de cierto en Css es que nada se escapaba a la herencia y la cascada. Su brazo es mucho más largo que la ley (especialmente la española con según quienes) y pasa como la gravedad: podrás conocerla o ignorarla, pero si te sueltas estando colgado nada ni nadie te libra del piñazo.
Actualizado al documento "CSS Cascading and Inheritance Level 3", "W3C Candidate Recommendation" del 3 de Octubre de 2013.
Los cambios quedan precedidos por la leyenda ACTUALIZACIÓN
Otra ley universal es que ante un important! sólo tenías un camino: otro important! con un selector más específico.
Estas cuestiones se vuelven más peliagudas y preocupantes en las webs modulares. Y para lidiar con la herencia y la cascada de Css te encuentras con que muchos autores llenan todas sus declaraciones con su important! correspondiente. Ejemplos hay a montones en muchos "widgets" o "plugins" de plataformas como blogger, wordpress...
Todo lo anterior, como el frotar, se va a acabar.
Reseteo Herencia y cascada: la propiedad "all"
En documento "CSS Cascading and Inheritance Level 3" (3 de Enero 2013, status: working draft) introduce la propiedad all.
Y la definición que hace de ella es tan sencilla como:
The ‘all’ property is a shorthand that resets all CSS properties. It only accepts the CSS-wide keywords.
La propeidad "all" es la forma acortada que resetea todas las propiedades CSS. Sólo acepta las palabras clave universales de CSS*.
ACTUALIZACIÓN: Quedan excluidas las propiedades unicode-bidi y direction. Estas dos no se ven afectadas por la propiedad 'all'.
Bienvenido sea este "anillo único" para somerter a todas las propiedades en una sola declaración.
CSS-wide keywords
* Antes de seguir, yo he optado por utilizar el término "universal" en la expresión "CSS-wide keywords".
¿Qué son las "CSS-wide keywords"?
En el documento candidato a recomendación las define como las tres palabras clave que aceptan todas las propiedades en su valor.
Estos valores pueden ser tres:
- initial
- Cada propiedad tiene un valor inicial, definido en la tabla que define la propiedad. Si el valor en cascada es la palabra clave "initial", ese valor primero en la tabla de la propiedad se convierte en su valor especificado.
Tiene un significado distinto según se trate de propiedades heredadas o no heredadas.
En las heredadas el valor "initial" sólo aplica al elemento raíz (al que se le declara el valor) y en las no heredadas a todos los elementos: declarado y descendientes. - inherit
- En aquellas propiedades que admiten ser heredadas de padres a hijos, es el valor que se aplica al hijo para dicha propiedad si no la tiene declara, excepto que se vea afectado por la cascada.
- ACTUALIZACIÓN:
- La palabra clave 'default' desparece como valor y se incluye el valor 'unset'
defaultSi se utiliza esta palabra clave en una propiedad, se anula cualquier valor que por cascada o herencia le correspondería al elemento. El valor computado es el inicial de esa propiedad y se crea un punto cero para la cascada.- Unset
- Este valor tiene un doble significado. En aquellas propiedades cuyo valor sí se hereda equivale al valor 'inherit' y en las propiedades que no se hereda su valor equivale a 'initial'.
Esta nueva propiedad junto a style scoped prometen ser una buena herramienta para evitar código y trabajo.
![](https://www.pinterest.com/pin/create/button/?url=https://escss.blogspot.com/2013/01/propiedad-CSS-all.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4qN7YCPD6rESWrkdFHalKcbuiVeMACrak2C12B981XASwsqxJ6q732_QzuvZYHHFcMww8hSofQZ0stL9YG-pVjrpGuwwndL3R4FSd_AgPc31eebD7-fJuvVqGBnRzCO_nfwLi3h8lKo0/s1600/herencia-css.jpg&description=La propiedad "all" de css: para librarte de la cascada y herencia con una sola declaración.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
¡Pintaza de propiedad! Yo la utilizaría en un par de proyectillos que tengo, solo espero que no se use mal como cualquier important con tal de correr eso sí :)
ResponderEliminar[Elena Ramírez] → «...solo espero que no se use mal como cualquier important...»
ResponderEliminarYo pensé exactamente lo mismo. Hace rato que estábamos pidiendo algo como esto, pero para casos en que no quede otra que "limpiar" formatos muy enrevesados. Temo que cuando esté disponible hagan más abuso que uso de la propiedad.
Elena, Furoya: Gracias por el aporte.
ResponderEliminarPero creo que esta propiedad (así como el scoped) no se presta a abusos. Un ejemplo:
Yo en este tema del blog utilizo la siguiente declaración:
*, ::after, ::before {
box-sizing: border-box;
}
Así que hay veces que al incluir una demo de un tercero se va al garete por esa u otras propiedades del blog.
Tengo que averiguar cuáles son y actuar en consecuencia = más código innecesario.
Una vez que la propiedad "all" sea soportada sólo tengo que declararla a la caja padre de la demo y me olvidaré de colisiones.
Un saludo.
Acabo de conocer esta propiedad y conviene ser divulgada por la comunidad de desarrolladores, porque va a suponer una gran alegría para todos.
ResponderEliminarAhora mismo, dos opciones para anular la herencia es declarar un :not en la regla por ej. #mielem:not(.className) o crear una clase específica para ese estilo si no quieres recurrir al !important.
Buen trabajo, Kseso
Recién se me dio por probarla por motivos que no vienen al caso, y en Firefox y Chrome ya funciona. Aunque no sé si exactamente de acuerdo al estándar, tendría que experimentar más.
ResponderEliminar