CSS "color" vs. "font-color"


136

Qualcuno sa perché CSS fornisce colortesto, ma non ha font-coloro text-color?

Sembra molto contro-intuitivo, un po 'come o text-decoration: underlinepiuttosto font-styleo qualcosa legato ai caratteri.

Qualcuno sa perché / come il W3C ha inventato una così vasta gamma di nomi CSS come questo?


1
Ho avviato una petizione per introdurre la proprietà "font-color". Forse alcuni di voi vorrebbero firmarlo. change.org/p/…
tsuma534

Puoi farlo all'interno del tag <font>. ad es. <font color = "red"> Hello World! <font>
airider74

@ airider74 In che anno vivi? L'elemento <font> è stato deprecato per molti anni.
kojow7,

Sì, ha ... ma funziona ancora
airider74

Risposte:


111

Penserei che uno dei motivi potrebbe essere che il colore viene applicato a cose diverse dal font. Per esempio:

div {
    border: 1px solid;
    color: red;
}

Produce sia un colore del carattere rosso che un bordo rosso.

In alternativa, potrebbe essere solo che gli standard CSS del W3C siano completamente arretrati e senza senso, come evidenziato altrove.


4
Prova ad aggiungere quanto segue al CSS in questa pagina: .post-text { color: blue; border: 1px solid red; }Vedrai che il colore del testo è blu anche se il colore del bordo è rosso.
Robusto,

quindi per definizione, il colore del carattere è più veloce del colore in quanto deve fare meno lavoro.
kta,

193

Allo stesso modo Boston ha inventato il suo piano stradale. Seguirono i sentieri delle mucche già lì e costruirono case dove non c'erano le strade, e dopo un po 'fu troppo difficile cambiare.


10

So che questo è un vecchio post, ma come affermato da MisterZimbu, la colorproprietà sta definendo i valori di altre proprietà, come the border-colore, con CSS3, di currentColor.

currentColor è molto utile se si desidera utilizzare il colore del carattere per altri elementi (come ad esempio lo sfondo o caselle di controllo personalizzate e radio di elementi interni).

Esempio:

.element {
  color: green;
  background: red;
  display: block;
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0;
}

.innerElement1 {
  border: solid 10px;
  display: inline-block;
  width: 60px;
  height: 100px;
  margin: 10px;
}

.innerElement2 {
  background: currentColor;
  display: inline-block;
  width: 60px;
  height: 100px;
  margin: 10px;
}
<div class="element">
  <div class="innerElement1"></div>
  <div class="innerElement2"></div>
</div>


Penso che questo dia ancora più motivo per avere un separato font-color/ text-colorproprietà disponibile. In questo modo puoi avere molte parti dell'elemento con un particolare colore predefinito e il testo in un altro, se lo desideri. Altrimenti lega il colore predefinito al colore del testo.
Ben J,

@BenJ Associare il colore predefinito al colore principale era probabilmente l'intenzione nei primi giorni del web. Oggi puoi usare le variabili css ( developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables ) e / o usare un preprocessore css come Sass, Less, Stylus, ecc. Dove è facile lavorare con le variabili.
quasi
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.