The CSS Checker validates your stylesheets against W3C standards, identifies render-blocking CSS, finds unused rules, flags specificity conflicts, checks browser-prefix completeness and measures stylesheet size. CSS issues hurt page-load metrics that Google rewards (LCP especially) and create maintenance nightmares. This index covers every fix.
CSS findings fall into these categories. Pick yours:
:hove instead of :hover), unrecognised @-rules. Browsers silently ignore invalid declarations, so things break without errors.<head> block render until downloaded. Inline critical CSS (above-the-fold) directly. Load the rest with media="print" onload="this.media='all'" or via preload. The LCP-improvement workflow.!important creep, #id .class.class chains, inline styles overriding everything. The specificity calculation, refactoring approaches, and the BEM/CUBE/utility-first patterns that prevent it.-webkit-, -moz-, -ms- prefixes for properties still in flux. Autoprefixer in your build chain solves this — but only if configured. Check Can I Use for current prefix needs.font-display: optional or matching fallback metrics. Async-loaded CSS that changes layout. The CLS budget and how to stay inside it.color-scheme meta missing causes Safari to show black-on-black scrollbars. prefers-color-scheme media query patterns, the CSS-variable approach to dark themes, and accessibility considerations.Where CSS lives depends on your stack:
style.css patterns, plugin-injected CSS conflicts, and the page-builder stylesheets you cannot avoid.assets/ folder structure, app-injected CSS bloat, and the move to scoped styles in Dawn-based themes.The checker validates your CSS against W3C standards, identifies render-blocking patterns, calculates unused-CSS percentage, scans for specificity issues, checks browser-prefix coverage and measures parse time. For the full reference, see the CSS Checker Guide.
Most sites have 2-3 large stylesheets where 70% is unused. Audit, prune, see LCP improve.
Run CSS Checker →