diff --git a/docs/output.md b/docs/output.md index ba3cd6c..71b0ccd 100644 --- a/docs/output.md +++ b/docs/output.md @@ -65,6 +65,7 @@ per-shot output when piped, `--no-progress` the summary on a terminal. | `findings: N repeated on 2+ routes` | After the routes: the same `dom` entry, text line, `fonts` face or element-less band delta (`band -24px`) on two or more routes, once per line with `×N routes` and where (`/a@1440,375`, then `+N routes`), most widespread first, accepted ones aside. Text lines seen on exactly the same routes and widths share one line, `text -"Users" -"Billing" -"Docs" (+9 more)` (a nav folded into a menu button), and N counts lines as printed. Top 20; `summary.findings` in results.json has every finding, one per text line. One cause behind many rows: fix it once. A selector names an element per page, so the same path may be a different element on another route: check one crop. | | `computed: N findings` | With `--computed`: each `key prop left→right` once, with the routes and widths it was seen at; `dom identical`: the markup matches apart from asset hashes and generated class names, so look at CSS or script. See [below](#computed-styles---computed). | | `rules: N changed groups` | With `--computed`: style rules only one side has, by stylesheet and `@media`, and whether any shot had an element they could style. `matched nothing`: the run proved nothing about those rules. See [below](#rule-coverage). | +| `prefixes: N prefixed declarations only one side has` | With `--computed`: `-webkit-`, `-moz-`, `-ms-` and `-o-` declarations in one side's CSS source only, which Chrome's parsed rules can't show. See [below](#vendor-prefixes). | | `aria: identical on N of M route(s)` | With `--aria`: routes whose accessibility tree matches at every width, then each differing route's lines, `+` left only, `-` right only. See [below](#aria-snapshots---aria). | | `crops …` | Up to 3 PNGs per comparison, worst first, relative to `results.json`. Left is on top or on the left, and the change is boxed in red. | | `ERROR …` | Unmeasured, which is neither a pass nor a fail. Exits 3. | @@ -317,6 +318,34 @@ rules: 3 changed groups, 1 never matched, 2 matched on some shots rules then show as one side's. renderdiff's own CSS (hidden selectors, stilled animations, `extraCss`) isn't read. +### Vendor prefixes + +Chrome parses `-webkit-user-select: none` and `user-select: none` into the same rule, so a lint +autofix that drops a prefix Safari still needs is no pixel change and no rule change. So +`--computed` also reads each side's CSS as written and counts its prefixed properties: + +``` +prefixes: 3 prefixed declarations only one side has + only left has: -webkit-background-clip: text; -webkit-text-size-adjust: 100%; -webkit-user-select: none /a@1440,375 +``` + +- The source is every stylesheet the page loaded, as served (cross-origin and `@import`ed ones + too), and the text of every ` + +
+Both sides hold the same three -webkit- declarations. Only where they are written, and how, differs, so the prefix check finds nothing.
+Gradient text
+This line is not selectable.
+A build that minifies or fingerprints its stylesheets keeps every declaration, so it is no change.
+