About This HTML Issue
The validator flags any declaration where the property token doesn’t match a known CSS property in its ruleset. Common causes include typos, wrong hyphenation, using values where property names should go, properties from older drafts that were renamed, or relying solely on vendor-prefixed/experimental properties without a standard equivalent. It can also show up when copy-pasting snippets that include custom, nonstandard properties.
Why this matters:
- Browser compatibility: Unknown properties are ignored, causing styles to silently fail.
- Maintainability: Typos and nonstandard syntax make CSS harder to debug.
- Standards compliance: Clean, validated CSS reduces cross-browser surprises and eases future maintenance.
How to fix it:
-
Check spelling and hyphenation exactly (e.g.,
text-decoration-skip-ink, nottext-decoration-skipink). - Verify the property exists on MDN or in the CSS specifications; if it’s not documented, it’s likely invalid.
- Replace deprecated or draft names with current standardized ones.
- If using experimental features, include a standard fallback and keep vendor-prefixed versions alongside the unprefixed property when supported.
- Remove framework- or tool-specific tokens that aren’t valid CSS at runtime.
-
Don’t invent properties. If you need custom data for JS, use
data-*attributes in HTML, not fake CSS properties.
Examples
Example that triggers the error (typo) and the corrected version
Invalid:
<p style="colr: red;">Hello</p>Valid:
<p style="color: red;">Hello</p>Example using a deprecated/draft name replaced with the current property
Invalid (older draft name):
<div style="gap: 1rem; grid-row-gap: 8px;"></div>Valid (current, standardized property):
<div style="row-gap: 8px; gap: 1rem;"></div>Example with vendor-prefixed property plus standard fallback
Invalid (only vendor-prefixed, missing standard property):
<div style="-webkit-user-select: none;"></div>Valid (fallback plus prefix):
<div style="user-select: none; -webkit-user-select: none;"></div>Example removing a nonstandard custom property name misuse
Invalid (attempting to invent a property):
<div style="button-style: primary;"></div>Valid (use classes and real CSS properties):
<style>
.btn--primary {
background-color: #0b5fff;
color: #fff;
}
</style>
<button class="btn--primary">Submit</button>Example with custom properties (variables) used correctly
Valid use of CSS custom properties (won’t trigger the error because the property is standard and custom properties start with --):
<style>
:root {
--brand-color: #0b5fff;
}
.tag {
color: var(--brand-color);
}
</style>
<span class="tag">Tag</span>Full document with corrected properties
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Property Validation Fixes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
display: grid;
gap: 1rem;
row-gap: 0.5rem;
user-select: none;
-webkit-user-select: none;
color: #222;
}
</style>
</head>
<body>
<div class="card">Valid CSS properties in use</div>
</body>
</html>Quick checklist:
- Confirm the property on MDN. If not found, it’s probably invalid.
- Fix spelling/casing; CSS properties are lowercase with hyphens.
- Prefer standardized names; keep prefixes only as supplements.
-
Use CSS custom properties starting with
--if you need variables. - Remove tool-specific placeholders before validation.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.