Chase M. Notes

CSS variables

Custom properties and system variables baked into browsers.

--bg-color: var(--color-gray--100);

Using the example above, --bg-color is the custom property and var(--color-gray--100) is the variable. More info on this distinction here.

System variables

Colors

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

Fonts

Lots of these are specced but not implemented yet.

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