Css Protips

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

1. Compatibility language is source-bound. “Widely available,” “Newly available,” and “Limited availability” follow MDN Baseline definitions unless a different source is named.
2. 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.
3. 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.
4. 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].

---

Key corrections from the uploaded skill

| Area | Validated decision | Why | |---|---|---| | Baseline meaning | Keep the caveat. Baseline is a browser-compatibility signal only, not an accessibility/performance/QA guarantee. | MDN Baseline defines support buckets and explicitly says Baseline is not a substitute for accessibility, performance, and other tests. [MDN Baseline][ref-baseline] | | Anchor positioning | Update from “Limited availability” to Baseline 2026 Newly available for core properties such as anchor-name, position-area, and position-try-fallbacks; still verify support floor and keep fallbacks for older audiences. | MDN now marks key anchor-positioning properties as Baseline 2026 Newly available. [MDN anchor-name][ref-anchor-name], [MDN position-area][ref-position-area], [MDN position-try-fallbacks][ref-position-try-fallbacks] | | field-sizing | Update from “Limited availability” to Baseline 2026 Newly available; still use a fallback if your browser floor includes older browsers. | MDN marks field-sizing as Baseline 2026 Newly available. [MDN field-sizing][ref-field-sizing] | | accent-color | Keep as Limited availability. Use as a progressive enhancement, not as the only brand-control styling mechanism. | MDN marks accent-color Limited availability. [MDN accent-color][ref-accent-color] | | Scroll-driven animations | Keep as progressive enhancement. animation-timeline remains Limited availability. | MDN marks animation-timeline Limited availability. [MDN animation-timeline][ref-animation-timeline] | | interpolate-size / calc-size() | Keep as progressive enhancement. Do not treat native height: auto interpolation as Baseline. | MDN marks interpolate-size and calc-size() Limited availability/experimental. [MDN interpolate-size][ref-interpolate-size], [MDN calc-size][ref-calc-size] | | transition-behavior | Use it for discrete transitions such as display; it does not by itself interpolate height: 0 to height: auto. | MDN defines transition-behavior as enabling transitions for discrete animation properties. [MDN transition-behavior][ref-transition-behavior] | | Generated-content commas/empty-link URLs | Keep only with accessibility/copy-paste caveats. Generated text from content may not behave like real DOM text. | MDN documents generated/replaced content and the attr() function, including accessibility-oriented alt text syntax. [MDN content][ref-content] | | Native CSS nesting | Keep for modern evergreen projects after checking support floor. Can I use shows broad but not universal support; MDN confirms browser-native parsing, not preprocessor compilation. | [Can I use CSS nesting][ref-caniuse-nesting], [MDN CSS nesting][ref-nesting] |

---

Validated patterns

1. Use a CSS reset deliberately

A minimal reset can remove browser-default margin/padding and make layout more predictable. Prefer a project-owned reset rather than copy-pasting an aggressive global reset blindly.

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Validation: box-sizing is a widely available property. border-box makes the declared width/height include padding and border, which usually makes component sizing easier. [MDN box-sizing][ref-box-sizing]

2. Inherit box-sizing when components may need overrides

This variant sets the root sizing model once, then lets components inherit it.

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Validation: box-sizing supports content-box and border-box; inheriting from html is a safe pattern when a component needs to override sizing context locally. [MDN box-sizing][ref-box-sizing]

3. Use all: unset carefully for component resets

all: unset resets almost all CSS properties. It excludes unicode-bidi, direction, and custom properties. Because non-inherited properties go to their initial values, a button can lose its native display/box behavior. Restore layout and focus styles explicitly.

button.reset {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

button.reset:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.15em;
}

Use all: revert when the intent is “undo author styles and return toward UA/user defaults,” not “strip everything to a blank slate.”

Validation: MDN documents that all resets all properties except unicode-bidi, direction, and CSS custom properties. [MDN all][ref-all]

4. Prefer :focus-visible for keyboard focus styles

Use :focus-visible so keyboard users keep a visible focus indicator without forcing the same ring on every pointer click.

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.15em;
}

Validation: MDN describes :focus-visible as matching when the user agent determines that focus should be made evident, and notes that people need to know which element has focus. [MDN :focus-visible][ref-focus-visible]

5. Add unitless line-height to text containers

Set a readable unitless line height on body or on text-heavy containers.

body {
  line-height: 1.5;
}

Validation: line-height sets the height of a line box, and MDN recommends unitless values because descendants inherit the number rather than a computed fixed length. [MDN line-height][ref-line-height]

6. Center with Grid or Flexbox

For page-level centering, Grid is concise. Use dynamic viewport block units on mobile when browser toolbars matter.

.center-page {
  min-block-size: 100dvb;
  display: grid;
  place-items: center;
}

For flex layouts, set the container’s size and center on both axes.

.center-flex {
  min-block-size: 100dvb;
  display: flex;
  align-items: center;
  justify-content: center;
}

Validation: place-items aligns items in block and inline directions at once. Flexbox centering uses align-items and justify-content. Dynamic viewport units represent viewport dimensions that update as browser UI expands/retracts; MDN also notes that dynamic units can resize during scrolling, so test the result. [MDN place-items][ref-place-items], [MDN flex alignment][ref-flex-align], [MDN viewport units][ref-viewport-units]

7. Use aspect-ratio for media boxes

Prefer aspect-ratio over wrapper/padding hacks for modern browsers.

.media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Validation: aspect-ratio sets a preferred width-to-height ratio; object-fit: cover preserves aspect ratio while filling and clipping as needed. [MDN aspect-ratio][ref-aspect-ratio], [MDN object-fit][ref-object-fit]

8. Use :not() for exclusion selectors

Use :not() to apply styles to everything except the excluded case.

.nav li:not(:last-child) {
  border-inline-end: 1px solid #666;
}

Validation: :not() matches elements that are not represented by its argument selector list. [MDN :not][ref-not]

9. Use :is() for compact selector lists

Use :is() to reduce repeated selector groups.

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  margin-block-end: 0.5em;
}

Validation: :is() takes a selector list and selects elements matched by any selector in the list. MDN also documents its forgiving selector-list behavior. [MDN :is][ref-is]

10. Use :where() for low-specificity defaults

Use :where() when a default should be trivial to override.

:where(a[href]:not([class])) {
  color: LinkText;
  text-decoration: underline;
}

Validation: :where() always has zero specificity, unlike :is(), whose specificity comes from the most specific selector in its arguments. [MDN :where][ref-where]

11. Use generated content only for non-critical presentation

Generated commas, visible URLs, and labels can be convenient, but they are not a replacement for semantic text in the DOM.

ul.tags > li:not(:last-child)::after {
  content: ",";
}

Validation: the content property replaces or generates content; MDN documents attr() support and accessibility-related alternative text syntax. Treat generated content as presentational unless you have tested your assistive-technology target matrix. [MDN content][ref-content]

12. Use negative :nth-child() for first-N selection

li:nth-child(-n + 3) {
  display: block;
}

Validation: :nth-child() matches elements by child index, and MDN documents the An+B syntax. [MDN :nth-child][ref-nth-child]

13. Use scoped :nth-child(... of selector) when sibling filtering matters

li:nth-child(-n + 3 of .item) {
  display: block;
}

Validation: MDN documents the of syntax, which counts only matching siblings for the formula. [MDN nth-child of selector][ref-nth-child-of]

14. Use SVG or masks for icons depending on recoloring needs

Use inline SVG or image SVGs for multicolor art. For monochrome, CSS-recolorable icons, use mask and paint with currentColor.

.icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  background-color: currentColor;
  mask: url("icon.svg") no-repeat center / contain;
}

Validation: CSS mask hides or clips parts of an element using a mask image; painting the masked element with currentColor lets the icon follow the text color. [MDN mask][ref-mask]

15. Scope flow spacing instead of using a global owl selector

The global * + * pattern is powerful but can leak into third-party widgets and internal component layouts. Scope it.

.flow > * + * {
  margin-block-start: 1.5em;
}

Validation: adjacent sibling combinators are standard CSS selector behavior; logical margin-block-start follows the block axis for the writing mode. [MDN margin-inline/logical margin][ref-margin-inline], [MDN logical properties][ref-logical]

16. Use max-height disclosure only with caveats

A max-height transition works mechanically but animates toward an arbitrary ceiling, which can make timing feel wrong and can truncate content if the ceiling is too small.

.disclosure {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.disclosure.is-open {
  max-height: 50rem;
}

Validation: max-height caps used height, and overflow controls clipping/scroll behavior when content does not fit. MDN warns to ensure max-height content is not truncated/obscured when users zoom text. [MDN max-height][ref-max-height], [MDN overflow][ref-overflow]

17. Prefer grid-row disclosure for unknown-height content

For modern layouts, animate grid rows instead of guessing a max-height ceiling.

.disclosure {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.disclosure.is-open {
  grid-template-rows: 1fr;
}

.disclosure > * {
  min-block-size: 0;
  overflow: hidden;
}

Validation: CSS Grid defines row/column tracks, and grid track sizes are animatable in modern engines; still test because animation edge cases depend on content, overflow, and layout. [MDN CSS grid][ref-grid], [MDN grid-template-columns][ref-grid-template-columns]

18. Use table-layout: fixed only when the table width is known

table.report {
  inline-size: 100%;
  table-layout: fixed;
}

Validation: MDN says the fixed table-layout algorithm is faster because horizontal layout depends on table width, column widths, borders, and cell spacing, not cell contents; it also notes that if width is auto or unspecified, fixed has no effect. [MDN table-layout][ref-table-layout]

19. Use Grid auto-fit for responsive cards

Prefer auto-fitting Grid over space-between plus percentage flex basis for card galleries, because Grid keeps incomplete rows aligned.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}

Validation: repeat() supports auto-fit, minmax() defines a size range, and gap defines spacing between grid/flex tracks/items. [MDN repeat()][ref-repeat], [MDN minmax()][ref-minmax], [MDN gap][ref-gap]

20. Prefer gap over margin hacks in Flexbox/Grid

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Validation: gap applies to multi-column, flex, and grid layouts and avoids first/last-child margin cleanup. [MDN gap][ref-gap]

21. Use logical properties for internationalized layout

.card {
  padding-block: 1rem;
  padding-inline: 1.25rem;
  margin-inline: auto;
}

.overlay {
  position: absolute;
  inset: 0;
}

Validation: logical properties map to physical properties depending on writing mode, direction, and text orientation. [MDN logical properties][ref-logical], [MDN margin-inline][ref-margin-inline], [MDN padding-block][ref-padding-block]

22. Use :empty narrowly

.error-message:empty {
  display: none;
}

Validation: :empty matches elements with no children; text nodes, including whitespace, make an element non-empty. Scope it to known elements instead of using :empty globally. [MDN :empty][ref-empty]

23. Use pointer-events: none only for pointer hit-testing

button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

Validation: pointer-events: none affects pointer targeting; MDN notes elements with pointer-events: none can still receive focus through sequential keyboard navigation. Prefer the native disabled attribute where available. [MDN pointer-events][ref-pointer-events]

24. Hide autoplaying unmuted video only as a user stylesheet or controlled policy

video[autoplay]:not([muted]) {
  display: none;
}

Validation: the selector is valid CSS because attribute selectors and :not() can combine; however, hiding media can affect content access. Use it as a user preference or product policy, not as an invisible surprise. [MDN :not][ref-not]

25. Use @font-face local() cautiously

@font-face {
  font-family: "ExampleBrand";
  src: url("/fonts/example-brand.woff2") format("woff2");
  font-display: swap;
}

Avoid local() for strict brand fonts unless you have measured

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: PyModel
• Source: PyModel/css-pro-tips
• License: MIT
• Homepage: https://www.npmjs.com/package/css-pro-tips

Install and usage instructions live in the source repository linked above.