Valores de herencia en CSS3 con: inherit | initial | unset

Valores-de-herencia-en-CSS3-con-inherit-initial-unsetHay muchos valores en CSS que se definen por medio de Keywords o palabras clave con características muy diferentes, algunas muy conocidas y otras no tanto. Hay un grupo de ellas de las que podemos heredar valores de propiedades de CSS con solo especificarla, en la versión CSS2.1 contábamos con inherit para realizar este trabajo, ahora en CSS3 contamos con nuevos valores de herencia que muchos diseñadores o desarrolladores de pronto no estén al tanto de ellas. En este post vamos a ver como podemos aplicar valores de herencia en CSS3.

1 – Valor inherit

Este es un valor por medio de una Keyword que especifica que a la propiedad que se la apliquemos  debe de heredar los valores de su elemento padre. Podemos decir que la palabra Inherit significa  “Usa el valor de mi padre”, si el elemento padre no tiene definido dicho valor el navegador seguirá el DOM hasta que encuentre un elemento superior que lo contenga, y en ultima instancia de no tenerlo ningún elemento superior se aplicara el valor por defecto. Ejemplo:

Si tenemos el siguiente código HTML:

y aplicamos el siguiente CSS:

¿Que pasara?, bueno el elemento párrafo obtendrá el estilo del border y del color de su padre inmediato, que el #padre y el padding como no esta definido en el padre inmediato, lo tomara de un elemento superior de acuerdo al árbol DOM.

Este valor lo podemos aplicar en todas las propiedades CSS3 y es soportada por todos los navegadores web, Bueno IE7 no lo soporta pero esta versión nadie la utiliza ¿cierto?.

2 – Valor initial

Este valor pertenece a la especificación CSS3 y cuando aplicamos a una propiedad el valor initial estamos dando el valor inicial y predefinido por el navegador en cuestión. Ejemplo:

En este caso aunque tengamos un valor de tipografía definido para el cuerpo del documento los párrafos tendrán un tamaño de fuente predefinido y por defecto, que general y normalmente es 1em, que por defecto es 16px.

¿Es útil?  Para mi si lo es, aunque usted no puede depender de el a ojos cerrados porque los navegadores no tienen el mismo valor por defecto para ciertas propiedades.

Bueno, el soporte para este valor no es del todo bueno, aunque tiene el apoyo de Chrome, Firefox, Safari y en Opera después de la versión 15, en Explorer no funcionara naturalmente.

3 – Valor unset

Este valor unset es una combinación entre inherit y initial, cuando utilizamos este valor en una propiedad esta tratara de heredar el valor de su elemento padre si este esta disponible, de no ser así este valor colocará el valor de la propiedad en su valor inicial, como si usáramos inherit e initial juntamente.

Y por otra parte el apoyo de unset es muy regular solo los navegadores modernos la soportan.

Para mas información sobre estos valores Inheritance:

Inherit: https://developer.mozilla.org/en-US/docs/Web/CSS/inherit
Initial: https://developer.mozilla.org/en-US/docs/Web/CSS/initial
Unset: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo