CSS Protips — Validated Skill

This skill is a source-validated update of the uploaded css-protips Markdown skill. It keeps the useful practical guidance, corrects current compatibility status where needed, adds explicit references for each claim, and now includes an expanded set of modern CSS tricks validated against MDN/web platform references.

How to use this skill

Use this skill when writing, reviewing, or modernizing CSS. Prefer the “Validated patterns” section for day-to-day code. Use the “Modern CSS support buckets” section when deciding whether a feature can ship as normal production CSS or should be guarded with @supports. Use the “Retire or modernize older tips” section when replacing older CSS tricks with current native features.

Validation rules used

Compatibility language is source-bound. “Widely available,” “Newly available,” and “Limited availability” follow MDN Baseline definitions unless a different source is named.
Baseline is not QA. Baseline says whether a web platform feature is broadly implemented across core browsers; it does not replace accessibility, keyboard, contrast, motion, performance, or project-specific testing.
Progressive enhancement is required for limited or audience-dependent features. If browser support is incomplete for your audience, ship a working fallback first, then add the enhanced rule with @supports.
Do not turn tips into global rules blindly. Global selectors such as :empty, * + *, or blanket resets can affect third-party widgets, CMS content, accessibility, or embedded components. Scope them unless the whole project explicitly opts in.

References: [MDN Baseline][ref-baseline], [MDN @supports][ref-supports].