Creo que todos somos muy conscientes de colores como este:
color: OldLace;
background: rebeccapurple;Supongo que simplemente llamarías a esos “colores con nombre” en CSS.
Sin embargo, esos no son los únicos tipos de colores con nombre que existen. Algunos de ellos son un poco más fluidos. Jim Nielsen estaba alucinando el otro día cuando escribió en su blog sobre System Colors.
Lo que necesito es una forma de decir “Hola navegador, para mi menú desplegable, use el mismo negro (o blanco si está en modo claro) que está usando para el color de fondo del documento”. Necesito acceso a una especie de variable que haga referencia al “negro” exacto que está usando el navegador.
Luego, a través de Jim haciendo referencia a Thomas Steiner, descubrí que literalmente hay colores del sistema CSS. Estos no son colores que son (o al menos intentan ser) los mismos en todos los navegadores, pero se pueden configurar mediante “elecciones hechas por el usuario, el navegador o el sistema operativo”. Así por ejemplo, Canvas es el “antecedentes del contenido o los documentos de la aplicación”. Caso en cuestión: el background-color para el modo oscuro es #1e1e1e en safari y #121212 en cromo. Si te gusta eso, lo que significa que te inclinas por lo que el navegador cree que es un buen color para las cosas, ahora puedes acceder a él a través de ese Canvas palabra clave.
¡Colores del sistema! Hay muchos de ellos.
CanvasCanvasTextLinkTextVisitedTextActiveTextButtonFaceButtonTextButtonBorderFieldFieldTextHighlightHighlightTextMarkMarkTextGrayText
No solo cambian entre los navegadores, sino que cambian al alternar entre el modo oscuro y el claro, siempre que tenga CSS para admitirlos…
html {
color-scheme: light dark;
}Los verás cambiar cuando cambien los modos. Y no tienes que usarlos para lo que fueron diseñados, supongo:
Esos son los colores del sistema, pero pueden ver en ese Pen que también he usado una fuente del sistema: system-ui. Misma vibra! Es deliberadamente fluido. No va a ser el mismo tipo de letra en todos los navegadores y sistemas operativos. Jim también cubrió esto hace un tiempo. Solíamos replicar la idea con una gran pila de fuentes con nombre, pero ahora CSS ayuda con eso (en los navegadores compatibles).
Hay un montón de ellos especificados:
serifsans-serifmonospacesystem-uicursivefantasyemojimathfangsongui-serifui-sans-serifui-monospaceui-rounded
El apoyo parece disperso. Por ejemplo, podría configurar esto:
p {
font-family: ui-monospace, system-ui, fantasy;
}En mi Mac, en Safari, obtendría SF Mono (ui-monospace). Pero en Chrome, ui-monospace no funciona, por lo que recurriría a SF Pro (system-ui). En Firefox tampoco ui-monospace o system-ui trabajo y obtendría Papyrus (fantasy). Por lo tanto, las pilas de fuentes siguen siendo importantes. Es divertido pensar en ello porque estas nuevas palabras clave de fuentes del sistema son casi como pilas de fuentes en sí mismas.
Entonces, hay colores del sistema y fuentes del sistema. ¿No plantea eso la pregunta de qué otras cosas del sistema hay?
Bueno, hay pesos de fuente con nombre, como cómo font-weight: bold; es lo mismo que 700, y bolder es un poco más audaz que el padre. Pero eso no se siente como algo a nivel del sistema en el que el sistema querría controlar eso y hacer cosas diferentes. Pero bueno, tal vez.
También hay tamaños de fuente con nombre, como font-size: xx-small;. Pude ver sistemas que querían tener en sus manos esos valores y ajustarlos a tamaños que tuvieran sentido contextualmente, pero en un vistazo rápido (comparando Chrome y iOS Safari), calculan los mismos tamaños.
Esos valores de tamaño de fuente nombrados tampoco viajan. no puedo hacer margin: large;. Bueno, puedo, pero no hace nada. Así que no hay tamaños reales de sistemas universales.
¿Qué pasa con los iconos del sistema? ¡Los tenemos en forma de emoji! Usamos el emoji sabiendo que los diferentes sistemas lo representarán de manera diferente y, en general, estamos de acuerdo con eso, ya que sabemos que se verá consistente con la plataforma de ese usuario.
El emoji del “Libro azul” (a través de Emojipedia)
Podríamos pensar en las entradas como “entradas del sistema”. Sabemos que los diferentes navegadores y plataformas representan los controles de entrada de formas muy diferentes, y así es como lo pretende la especificación. A cada uno lo suyo.