Hay 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.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información
