CSS as an interface language

Before you begin

By the end, you can…

• Layer new CSS behind a working baseline
• Use anchor positioning for relational layout
• Respect user motion preferences

01 / Understand

Modern CSS is a capability ladder

New CSS does not require an all-or-nothing browser target. Write the dependable layout first, then add a sharper behavior inside @supports. Browsers that understand the feature get the enhancement; the rest ignore it without breaking the task.

Anchor positioning is a good example. A popover can have a normal fixed or absolute fallback, then position itself relative to its trigger when anchor-name and position-area are supported. The relationship lives in CSS instead of JavaScript coordinates.

02 / Apply

Motion should explain change

View transitions and scroll-driven animations can communicate continuity, hierarchy, and progress. They become noise when they animate everything or delay control. Define the information the motion carries before choosing an effect.

Use prefers-reduced-motion to remove nonessential movement, not merely shorten it. Verify that content order, focus, and task completion make sense with all animation disabled.

.trigger { anchor-name: --tip; }
.tip { position: absolute; }
@supports (position-area: block-start) {
  .tip {
    position-anchor: --tip;
    position-area: block-start;
  }
}

03 / Make

Your studio task

Make — Anchor a callout, animate one reveal, and add a deliberate fallback.

1. Choose one tooltip or callout with brittle JavaScript coordinates.
2. Create a simple non-anchored fallback.
3. Enhance it with anchor positioning and a position fallback.
4. Disable the feature and reduced-motion animations to verify the task.

04 / Check

Knowledge check