meter element fallback styles

concepts

1. <meter> with author styles

   UA <meter> next to an authored one with appearance: none. Sliders for value, low, high, optimum — both move; the authored one no longer renders at 0×0.

2. Branded themes

   Four real-world themes built from ::-webkit-meter-* and ::-moz-meter-bar pseudos: battery with terminal nub, audio peak meter, water tank, storage strip with notches. All driven from a single value slider.

3. Forced-colors audit

   Three themes (currentColor outline, branded gold/black, pure system) rendered side by side in four colour contexts (default, light, dark, forced-colors). Per-cell WCAG AA contrast computation and a written verdict for each theme's accessibility trade-off.

4. Dashboard meters

   Six system-monitor widgets (CPU, memory, disk, battery, temperature, network) each using ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, and ::-webkit-meter-even-less-good-value to colour-code healthy, warning, and critical states.

5. Animated Meter

   A simulated download manager with three animated <meter appearance: none> elements. CSS transitions on ::-webkit-meter-optimum-value drive smooth fill animations; JS updates the value attribute to simulate download progress.

6. Segmented Meter

   Three segmented meter designs — battery bars, audio VU levels, and rating — built by layering a repeating-linear-gradient gap pattern over <meter appearance: none>. Each design has a value slider and shows how a single CSS trick creates distinct visual styles.

why it shipped

Without this change, <meter> elements with `appearance: none` become invisible unlike Safari and Firefox which provide a reasonable fallback style. With this change the <meter> elements with `appearance: none` will still be visible with a fall back style similar to Safari and Firefox and will also allow developers to style the meter parts.

references

• ChromeStatus entry
• Spec