A vendor prefix marks a browser-specific CSS property or selector. Prefixes were historically used for experimental features, whose behavior might be incomplete, nonstandard, or subject to change. Common prefixes include `-webkit-` and `-moz-`. section 3.6.1
Restyling a progress bar
A `<progress>` element comes with browser styling. Adding `background: pink` does not simply recolor it: the control changes appearance and its accent color is lost. Reset the default appearance with `-webkit-appearance: none; -moz-appearance: none; appearance: none;`, then style the control’s parts. In WebKit-based browsers, `::-webkit-progress-value` targets the filled portion; Firefox uses `::-moz-progress-bar` for that purpose. section 3.6.1 section 3.6.2 section 3.6.3
Listing 3.16 Updated progress rule
progress {
height: 24px;
width: 100%;
border-radius: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
The progress rule places both prefixed appearance declarations before the unprefixed declaration. section 3.6.1
Test each browser rather than assuming prefixed selectors behave alike. Combining the Firefox and WebKit progress selectors in one rule styles Firefox but breaks Chrome; separate, identical rules work around the problem. Prefixed features remain experimental, so these styles may need revisiting. section 3.6.3
Prefixes also appear in image-filled heading text. `background-clip: text` needs `-webkit-background-clip` for the specified WebKit-based browsers, while `text-fill-color` needs prefixed declarations. Keep a visible `color` fallback if the image or experimental styling fails, and put prefixed properties before an available unprefixed version. Do not add prefixes automatically: major browsers no longer need them for gradients. section 5.3.2 section 3.6.2
