System * Things

Ich glaube, wir sind uns Farben wie diese weitgehend bewusst

color: OldLace;
background: rebeccapurple;

Ich schätze, man würde diese einfach als "benannte Farben" in CSS bezeichnen.

Das sind jedoch nicht die einzigen Arten von benannten Farben. Einige von ihnen sind etwas fließender. Jim Nielsen hat neulich die Köpfe rauchen lassen, als er über Systemfarben bloggte.

Was ich brauche, ist eine Möglichkeit zu sagen: „Hey Browser, benutze für mein Dropdown das gleiche Schwarz (oder Weiß, wenn im hellen Modus), das du für die Hintergrundfarbe des Dokuments verwendest“. Ich brauche Zugriff auf eine Art Variable, die sich auf das exakte „Schwarz“ bezieht, das der Browser verwendet.

Dann habe ich, über Jim, der auf Thomas Steiner verweist, entdeckt, dass es buchstäblich CSS-Systemfarben gibt. Das sind keine Farben, die in allen Browsern gleich sind (oder zumindest versuchen, es zu sein), sondern sie dürfen von „Entscheidungen des Benutzers, des Browsers oder des Betriebssystems“ festgelegt werden. So ist zum Beispiel Canvas der „Hintergrund von Anwendungsinhalten oder Dokumenten“. Ein Beispiel: Die background-color für den dunklen Modus ist #1e1e1e in Safari und #121212 in Chrome. Wenn dir das gefällt, also wenn du dich darauf einlässt, was der Browser für gut hält, dann kannst du jetzt darauf über das Canvas-Schlüsselwort zugreifen.

Systemfarben! Davon gibt es eine ganze Menge.

• Canvas
• CanvasText
• LinkText
• VisitedText
• ActiveText
• ButtonFace
• ButtonText
• ButtonBorder
• Field
• FieldText
• Highlight
• HighlightText
• Mark
• MarkText
• GrayText

Sie ändern sich nicht nur zwischen Browsern, sondern sie ändern sich auch beim Umschalten zwischen dunklem und hellem Modus, solange du CSS hast, um sie zu unterstützen ...

html {
  color-scheme: light dark;
}

Du wirst sehen, wie sie sich bei Moduswechseln ändern. Und du musst sie nicht unbedingt für das verwenden, wofür sie gedacht waren, nehme ich an.

Das sind also die System-Farben, aber du kannst in diesem Pen sehen, dass ich auch eine System-Schriftart verwendet habe: system-ui. Gleiche Stimmung! Sie ist bewusst fließend. Sie wird nicht in jedem Browser und Betriebssystem die gleiche Schriftart sein. Jim hat das auch schon vor einiger Zeit behandelt. Früher haben wir die Idee mit einem langen Stapel benannter Schriftarten nachgebildet, aber jetzt hilft CSS dabei (in unterstützten Browsern).

Davon sind einige spezifiziert

• serif
• sans-serif
• monospace
• system-ui
• cursive
• fantasy
• Emoji
• math
• fangsong
• ui-serif
• ui-sans-serif
• ui-monospace
• ui-rounded

Die Unterstützung scheint verstreut zu sein. Zum Beispiel könnte ich das hier einstellen

p {
  font-family: ui-monospace, system-ui, fantasy;
}

Auf meinem Mac, in Safari, würde ich SF Mono (ui-monospace) bekommen. Aber in Chrome funktioniert ui-monospace nicht, also würde es auf SF Pro (system-ui) zurückfallen. In Firefox funktionieren weder ui-monospace noch system-ui und ich würde Papyrus (fantasy) bekommen. Font-Stacks sind also immer noch wichtig. Es ist einfach lustig darüber nachzudenken, weil diese neuen System-Schriftart-Schlüsselwörter fast selbst wie Font-Stacks sind.

Es gibt also Systemfarben und Systemschriften – wirft das nicht die Frage auf, welche anderen System-Dinge es gibt?

Nun, es gibt benannte Schriftstärken – so wie font-weight: bold; dasselbe ist wie 700, und bolder nur *ein bisschen fetter* als das übergeordnete Element ist. Aber das fühlt sich nicht wie eine Systemebene an, bei der das System etwas übernehmen und verschiedene Dinge tun möchte. Aber hey, vielleicht.

Es gibt auch benannte Schriftgrößen, wie font-size: xx-small;. Ich könnte mir vorstellen, dass Systeme diese Werte aufgreifen und an Größen anpassen möchten, die kontextuell Sinn ergeben, aber bei einem schnellen Blick (im Vergleich zu Chrome und iOS Safari) ergeben sie dieselben Größen.

Diese benannten Schriftgrößenwerte reisen auch nicht. Ich kann nicht margin: large; machen. Nun, ich kann, aber es tut nichts. Also keine wirklich universellen Systemgrößen.

Was ist mit System-Icons? Die haben wir gewissermaßen in Form von Emojis! Wir verwenden die Emojis im Wissen, dass verschiedene Systeme sie unterschiedlich rendern werden und sind damit im Allgemeinen einverstanden, da wir wissen, dass sie mit der Plattform des Benutzers konsistent aussehen werden.

Wir könnten Eingaben gewissermaßen als „Systemeingaben“ betrachten. Wir wissen, dass verschiedene Browser und Plattformen Eingabesteuerelemente auf sehr unterschiedliche Weise rendern, und das ist auch so von der Spezifikation vorgesehen. Jedem das Seine.