css-modern

name	css-modern
description	Modern CSS features: anchor positioning, container queries, native nesting, @scope, view transitions, popover API, @starting-style, color-mix. Use when building modern UI with cutting-edge CSS. Triggers: "css", "modern", "anchor", "container", "nesting", "popover", "transition".
category	web-ui

Skill: css-modern

What This Covers

Modern CSS features available in current browsers. Use these patterns for cutting-edge UI without JavaScript dependencies.

Anchor Positioning

Position elements relative to other elements (tooltips, popovers, menus):

.anchor-button {
  anchor-name: --anchor-el;
}

.tooltip {
  position: absolute;
  position-anchor: --anchor-el;
  bottom: anchor(top);
  justify-self: anchor-center;
}

/* Fallback positions */
@position-try --bottom {
  position-area: bottom;
}

Container Queries

Style elements based on their container size:

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 40rem) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}

Native CSS Nesting

No preprocessor required:

.card {
  background: var(--surface);
  border-radius: 4px;

  &:hover {
    box-shadow: 0 4px 12px oklch(20% 0.02 80 / 0.12);
  }

  & .title {
    font-size: var(--font-xl);
  }
}

@scope Rule

Scoped styles without specificity wars:

@scope (.card) to (.card-footer) {
  p { color: var(--text); }
  a { color: var(--primary); }
}

View Transitions API

Smooth page transitions:

::view-transition-old(root) {
  animation: fade-out 300ms ease;
}
::view-transition-new(root) {
  animation: fade-in 300ms ease;
}

Popover API

Native tooltip/popover without JavaScript:

<button popovertarget="my-popover">Open</button>
<div popover id="my-popover">
  Content here
</div>

[popover] {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

@starting-style

Enter/exit transitions without JavaScript:

[popover] {
  opacity: 1;
  transition: opacity 0.3s, display 0.3s allow-discrete;

  &:popover-open {
    opacity: 1;
  }

  @starting-style {
    &:popover-open {
      opacity: 0;
    }
  }
}

color-mix()

Runtime color manipulation:

.hover-bg {
  background: color-mix(in oklch, var(--primary) 90%, transparent);
}
.disabled {
  opacity: color-mix(in oklch, var(--text) 50%, transparent);
}

Modern Features

@property (Registered Custom Properties)

@property --gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

Cascade Layers

@layer theme, base, components, utilities;

Logical Properties

.element {
  margin-inline: auto;
  padding-block: 1rem;
  border-inline-start: 2px solid var(--primary);
}

Rules

• Use OKLCH color tokens from DESIGN.md
• Prefer container queries over media queries
• Use native CSS nesting over preprocessors
• Test across Chrome 125+, Firefox 147+, Safari 26+