Si alguien se me acercara el otro día y me preguntara cuál es la diferencia entre inherit y initial Es posible que haya respondido:
“¿Qué, hay una diferencia?”
He estado escribiendo CSS durante más de diez años, pero de alguna manera he escapado a comprender qué es exactamente initial es o hace. Llámalo ignorancia, pereza o suerte, pero inherit me ha ayudado y nunca pensé en mirar hacia arriba cuando initial podría usarse en su lugar. Entonces, esta publicación compartirá algunas de las cosas que aprendí.
Qué initial medio
En primer lugar, la especificación nos ayuda a comprender la diferencia entre una palabra clave inicial y un valor inicial.
- Palabra clave inicial: Si el valor en cascada de una propiedad es la palabra clave inicial, el valor inicial de la propiedad se convierte en su valor especificado.
- Valor inicial: Cada propiedad tiene un valor inicial, definido en la tabla de definición de propiedades. Si la propiedad no es una propiedad heredada y la cascada no da como resultado un valor, entonces el valor especificado de la propiedad es su valor inicial.
Umm, está bien. Ejecuté esas definiciones a través de Google Translate (¡bromeando!) y obtuve esto:
La palabra clave inicial es lo que se declara como la propiedad donde el valor inicial es la salida resultante, según lo define el navegador predeterminado.
Entonces, si el initial palabra clave se utiliza aquí:
.module {
color: initial;
}…entonces la initial el valor podría regresar como black, Si black es el valor predeterminado del navegador para la propiedad de ese elemento.
¿Cómo es diferente de inherit
Si estás pensando que esto se parece mucho a inherit, entonces tienes toda la razón. Suena muchísimo como eso.
Pero initial y inherit son distintos en el paso extra que inherit toma para verificar si hay otras propiedades que puede usar en la cascada antes de que se mueva al valor inicial.
H1 busca heredar un valor de color, que encuentra en el elemento del cuerpo.
Se le dice a H1 que use su valor inicial, por lo que salta el elemento del cuerpo y va a sus raíces.
Un ejemplo de la diferencia
Vea Pen CSS Initial vs. Inherit de Programar Plus(@css-tricks) en CodePen.
¿Mira eso? Las propiedades en el cuadro de la izquierda están configuradas para heredar los valores del .module class ya que es el elemento padre. Por otro lado, las propiedades en el cuadro de la derecha están configuradas para initial, que restablece las propiedades del elemento a los valores predeterminados del navegador.
Cuándo usar initial
me gusta pensar en initial como un restablecimiento completo. Es fácil que los estilos se compliquen a medida que crece el CSS, y usar initial es una forma de aclarar las cosas para que un elemento pueda volver a su estado natural. Si initial Si fuera Nintendo de la vieja escuela, lo usaría como el equivalente a sacar un cartucho de juego con errores de la consola y soplarlo (aunque hacerlo supuestamente no tuvo ningún efecto).
Pero eso no significa initial es una bala de plata para reinicios. Esto se debe a que los valores iniciales aún están sujetos a los valores predeterminados del navegador, que sabemos que pueden variar de un navegador a otro.
Oh, espera, ¿usas reinicios de CSS? En su lugar, puede esperar que se utilicen como valores iniciales.
En pocas palabras: yo usaría initial para borrar completamente cualquier estilo heredado de un elemento y usar inherit para asegurarse de que el elemento toma sus señales del padre más cercano.
Un caso de uso más práctico
He aquí un ejemplo de cómo initial se puede utilizar para crear líneas de colores alternos en las tablas.
Vea Pen CSS Initial por Programar Plus(@css-tricks) en CodePen.
Compatibilidad con navegador
MDN tiene un buen desglose del soporte actual para initial. Tenga en cuenta la evidente falta de soporte de IE.
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| sí | sí | 19 | 15 | No | sí | sí |
Terminando
Me he estado devanando los sesos buscando algunos casos de uso interesantes para initial. Si bien veo una gran utilidad potencial en poder usar estilos predeterminados en un elemento, simplemente no los he encontrado en una aplicación práctica, aunque eso podría decir mucho más sobre mí que el valor de la propiedad en sí.
Donde esto será realmente útil es cuando all gana más apoyo como propiedad. Eso haría declarar all: initial una herramienta realmente poderosa para crear reinicios en cualquier elemento.
Por favor, comparta cualquier situación en la que initial era algo que tenías que usar en un proyecto. Puntos de bonificación si lo has usado para alguna hazaña complicada.