Diff view

Canonical specification

Purpose

How changed text is shown: line rows with a fill and a textual marker, word-level changes as underlines that leave text contrast untouched, hunk headers, collapsible unchanged regions, and merge conflicts in a double border. The +, − and ~ markers are content, present in every state and every profile.

Anatomy

Root .diff-view (the table) with the variant class .diff-view-unified, -split, -word-level or -conflict. Row classes: .diff-view-row, -row-context, -row-added, -row-removed, -row-modified, -row-hunk, -row-fold, -row-conflict with -row-conflict-start, -row-conflict-mid and -row-conflict-end for the marker lines. Cells: .diff-view-ln, -marker, -text, -fold-cell, and -range for the @@ span; the split variant adds -side-old and -side-new on cells and, on a -row-pair, -cell-removed and -cell-added per side (an empty -cell-blank faces an added line); the conflict variant adds -row-ours and -row-theirs. Word-level spans: .diff-view-word-added (2px underline in color.diff.added.emphasis) and .diff-view-word-removed (underline plus line-through in color.diff.removed.emphasis). The fold button is .diff-view-fold with an inline SVG chevron .diff-view-chevron and two labels, -fold-collapsed and -fold-expanded; the folded rows are a <tbody class="diff-view-folded" hidden>. Line numbers use color.text.muted rather than color.code.line-number because the modified fill would drop the subtle step to 4.45:1.

States

Precedence: selected > hover; focus-visible is always drawn. A selected row loses its diff fill but never its marker, which is why the marker is content.

Keyboard

A plain table has no row focus. The official web distribution places it in a named, focusable scroll region so keyboard users can inspect wide lines without page overflow. The region uses the canonical container focus ring. Within the table, the fold buttons are the only stops and toggle with Enter or Space, the chevron turning within the motion budget. Hosts that expose the diff as a grid own row navigation and draw the ring on the focused row; the theme adds no binding of its own.

Accessibility

The caption names both files. Every changed row carries its marker in a cell of its own, so a screen reader announces + or − before the line and a monochrome print keeps the distinction. Word-level changes use text-decoration (underline, or underline and line-through), never a fill, so the row text stays at 7.56:1 or better on every diff fill. The − marker measures 4.24:1 on the removed fill: it is bold, sits on its own fill and is a glyph, so it is held to the 3:1 graphics floor and recorded here. Folded hunks use aria-expanded and aria-controls on a real button; the hidden rows are hidden, not visually clipped, so they are not read while collapsed. Conflict markers are the literal <<<<<<<, ======= and >>>>>>> lines in color.text.bright on color.diff.header-bg, inside the double border.

Portability

A table with cell backgrounds, borders and text decoration is expressible in every toolkit. Hosts without double borders draw two 1px lines and record it; hosts without line-through keep the underline and the − marker. The three extension hues are confined to the diff group here and change with the profile; the markers do not.

Non-examples

Red and green fills with no +/− marker. Word-level changes drawn as a bright fill that pushes the text below 4.5:1. A removed line rendered in text.disabled or struck through as a whole. Collapsed hunks that are only visually clipped and still read out. Conflict blocks in purple. Hover that recolours the code text. Round-cornered hunk cards floating on the page. A selected row that drops the marker because “the colour says it”.