¿Cuál es el uso del valor ‘inicial’ en CSS?

Pensé que el valor initial restauraría los estilos renderizados inicialmente (tal como lo aplica la hoja de estilo de usuario-agente interna de un navegador ).

Ejemplo:

 div.inline { display: inline; } div.initial { display: initial; } 

Esperaba que la regla div.inline mostrara

en modo en línea, y la regla div.initial mostraría

usando el valor de visualización original de div un block .

Pero cuando exploro esto,

muestra en línea. ¿Me equivoco? ¿Alguien puede elaborar más sobre esto?

El valor initial (no atributo) denota el valor inicial de la propiedad, como se define en las especificaciones de CSS: “La palabra clave ‘inicial’ representa el valor especificado que se designa como el valor inicial de la propiedad.” Por lo tanto, su significado depende de la propiedad, pero no en ninguna otra cosa, por ejemplo, no en el navegador o en el elemento al que se aplica la propiedad. Por lo tanto, no significa que el navegador sea el predeterminado.

Por ejemplo, para la propiedad de display , initial siempre significa en inline , porque ese es el valor inicial designado de la propiedad. En el caso de ejemplo, el navegador predeterminado es block , ya que el elemento es div .

Por lo tanto, el valor initial es de utilidad limitada. Su efecto principal parece ser confundir a la gente, debido a malentendidos. Un posible caso de uso es para la propiedad del color , ya que su valor inicial depende del navegador (principalmente negro, como sabemos, pero no necesariamente). Para ello, initial significa navegador predeterminado, ya que así es como se ha definido la propiedad. Un caso de uso similar es para font-family : al declarar font-family: initial , obtiene la fuente predeterminada del navegador (que puede depender de la configuración del navegador).

La utilidad está limitada por la falta de soporte en IE (incluso IE 10).

Fuente

La palabra clave CSS inicial aplica el valor inicial de una propiedad a un elemento. Está permitido en todas las propiedades de CSS y hace que el elemento para el que está especificado utilice el valor inicial de la propiedad.

 /* give headers a green border */ h2 { border: medium solid green } /* but make those in the sidebar use the value of the "color" property */ #sidebar h2 { border-color: initial; } 

this text is red this text is in the initial color (eg black) this is red again