que - ¿Por qué el color de borde CSS hereda la propiedad de color?

propiedades css que no se heredan

Question

¿Es normal que un color de borde sea heredado de la propiedad de color la fuente? Me sorprendió encontrar que:

div
{
 border: 4px solid;
 color: red;
 height: 100px;
 width: 100px;
}

<div></div>

JSBIN

Me da un div con un borde rojo. Por lo general, no especificar un color por defecto será negro. ¿Qué es esta extraña herencia?

Answer 1

Basado en la sección 4.1 de las especificaciones relevantes del Módulo de Fondos y Bordes , el valor inicial border-color currentColor :

currentColor currentColor

CSS1 y CSS2 definieron el valor inicial de la propiedad de border-color del border-color como el valor de la propiedad de color , pero no definieron una palabra clave correspondiente. Esta omisión fue reconocida por SVG y, por lo tanto, SVG 1.0 introdujo el valor currentColor para las currentColor de fill , stroke , stop-color flood-color lighting-color .

CSS3 extiende el valor del color para incluir la palabra clave currentColor para permitir su uso con todas las propiedades que aceptan un valor de <color>. Esto simplifica la definición de esas propiedades en CSS3.

En otras palabras, el valor se trata como el siguiente en su caso:

border: 4px solid currentColor;

Por lo tanto, también podría usar el valor currentColor para algo como la propiedad de background-color . Por ejemplo:

div {
  color: red;
  width: 100px;
  height: 100px;
  border: 4px solid;
  background-color: currentColor;
}

<div></div>

Pequeño dato curioso, si cambia el color de la fuente (por ejemplo, :hover ), ¡el bordercolor cambia con él! ¡También funciona bien con las transiciones!

Answer 2

En CSS, un elemento puede tener uno de dos colores "primarios": un color de primer plano, especificado por la propiedad de color , y un color de fondo, especificado por la propiedad de background-color . Muchas otras propiedades aceptan un color, pero tener negro como valor de color inicial sería muy arbitrario, por lo que las propiedades que aceptan un valor de color toman el color de primer plano calculado de forma predeterminada.

Por supuesto, esto puede resultar en un borde negro si el color de primer plano es negro, pero solo entonces. Y para empezar, el color del texto es solo negro porque las hojas de estilo de UA predeterminadas lo hacen así; CSS no indica en ningún lugar que el valor inicial debe ser negro, sino que depende de la UA ( CSS1 , CSS2.1 , CSS Color 3 ). Por ejemplo, una UA en modo de alto contraste o modo de colores invertidos podría especificar que el esquema de color predeterminado sea blanco sobre negro, o una combinación de colores diferente por completo:

Este comportamiento ha existido desde specs . El valor currentColor , introducido en currentColor basado en la palabra clave SVG equivalente, ahora aparece como el valor inicial de las propiedades respectivas en los respectivos módulos CSS3:

• border-color
• outline-color ¹
• box-shadow

El uso de attr() con un valor de color también vuelve a currentColor cuando no se puede encontrar un valor. Ver valores de CSS 3 .

Antes de CSS3 no había manera de restaurar el color de un borde o contorno al color de primer plano calculado una vez que se anulaba; Vea mi respuesta a esta pregunta relacionada . Si bien esta pregunta utiliza la palabra "heredar", se debe tener en cuenta que al especificar border-color: inherit no se hereda de la propiedad de color , como todas las demás propiedades de CSS, se hereda del border-color de border-color del elemento principal.

¹ _{En realidad, el valor predeterminado es invertir los colores de los píxeles debajo del contorno, pero no es obligatorio el uso de Invertir y, si un navegador decide no hacerlo, se debe usar el color de primer plano.}