v132 · css

Code Editor

A code editor mockup with four caret modes. Each mode uses the real caret-animation values: manual for steady or author-keyframed carets, and invalid values are surfaced as a rejected branch.

Feature detection: checking…

Switch modes with the toolbar. In a real editor these would be triggered by keyboard shortcuts — here they toggle the data-mode attribute which CSS selects on.

styles.css NORMAL
Ln 1 Col 1 Mode: NORMAL caret-animation: manual caret-color: var(--demo-color-888) computed: manual
Switch modes to inspect computed caret-animation and invalid keyword handling.

mode × caret comparison

NORMAL
INSERT
VISUAL
SEARCH
/* Map Vim modes to caret styles */

[data-mode="normal"] textarea {
  caret-color: var(--demo-color-888);
  caret-animation: manual; /* steady bar — not editing */
}

[data-mode="insert"] textarea {
  caret-color: var(--demo-color-6bc98a);
  caret-animation: manual;
  animation: insertCaret 1s steps(1) infinite;
}

[data-mode="visual"] textarea {
  caret-color: var(--demo-color-7aa2e8);
  caret-animation: manual; /* blue steady — selection mode */
}

[data-mode="search"] textarea {
  caret-color: var(--demo-color-e87a7a);
  caret-animation: manual;
  animation: searchCaret 650ms steps(1) infinite;
}

see also