---
name: modern-css-native-expert
description: "Expert guide for cutting-edge Native CSS (2026 Standard) — CSS Anchor Positioning, @starting-style, View Transitions Level 2, Container Queries, :has(), and Modern Web Guidance / Panduan ahli fitur CSS native modern 2026."
author: "Roedy Rustam"
version: "4.4.2"
---

# Modern Native CSS Expert (2026 Standard & Primitives)

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>
## English

### Orchestration & Integration
Integrates tightly with the following domain skills:
- **`modern-web-guidance`**: Primary companion tool to look up standardized native CSS best practices (`npx -y modern-web-guidance@latest search "<query>"`).
- **`design-system-architect`**: Supplies headless token definitions and surface container hierarchies.
- **`tailwind-expert`**: Bridges native CSS primitives with Tailwind v4 `@theme` and dynamic utility classes.
- **`visual-ui-auditor`**: Validates smooth top-layer transitions, focus rings, and layout stability.
- **`anti-slop`**: Eliminates unnecessary JS polyfills and div-soup wrappers.
- **`senior-frontend`**: Integrates native CSS features into React 19 / Next.js 15 architectures.

### Purpose & Overview
Production-grade engineering guide for modern **Native CSS features (2026 Edition)** that replace cumbersome JavaScript libraries with pure browser-native primitives. Covers the **CSS Anchor Positioning API** for tooltips/popovers, **`@starting-style`** for smooth entry/exit animations on top-layer elements (`<dialog>`, `popover`), **View Transitions API Level 2**, **Container Queries (`@container`)**, and the **`:has()`** relational selector.

### Key Capabilities
1. **CSS Anchor Positioning**: Eliminating Floating UI / Popper.js dependencies. Tether tooltips, menus, and popovers to trigger elements natively with auto-flip fallbacks (`position-try-fallbacks`).
2. **Smooth Top-Layer Transitions**: Animating `<dialog>` and `[popover]` elements from `display: none` to visible with `@starting-style` and `transition-behavior: allow-discrete`.
3. **Container Queries (`@container`)**: Component-level responsive design based on parent container dimensions rather than viewport width.
4. **Relational `:has()` Selector**: Styling parent containers or sibling trees based on nested child states without React/JS state overhead.
5. **Native CSS Nesting & `@layer`**: Structuring clean, zero-build styles with cascade priority layers.

---

### Production Implementation Recipes

#### Recipe 1: Pure Native Anchor Positioning for Tooltips & Dropdowns (No JS)
```css
/* Define the anchor trigger button */
.anchor-trigger {
  anchor-name: --my-dropdown-anchor;
}

/* Tether the popover menu to the anchor trigger */
.dropdown-menu {
  position: fixed;
  position-anchor: --my-dropdown-anchor;
  
  /* Place below the anchor by default */
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 8px;

  /* Automatic flip to top if screen boundary is reached */
  position-try-fallbacks: flip-block;
}
```

#### Recipe 2: Smooth `<dialog>` Entry/Exit Animation with `@starting-style`
```css
/* Dialog element with discrete transition support */
dialog {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, display 0.25s allow-discrete;
}

/* Open state */
dialog[open] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Starting style when transitioning from display: none to open */
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
}

/* Backdrop smooth fade */
dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition: background-color 0.25s ease-out, display 0.25s allow-discrete;
}

dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

@starting-style {
  dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}
```

---

#### Recipe 5: Material Design 3 (M3) Top-Layer Overlays with Emphasized Decelerate Easing
Implement M3 dialogs and modal bottom sheets natively using `<dialog>` and `@starting-style` with M3 Emphasized Decelerate Easing (`cubic-bezier(0.05, 0.7, 0.1, 1.0)`):

```css
/* M3 Modal Dialog using Native CSS Top-Layer with M3 Tokens */
dialog.m3-dialog {
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-large, 28px);
  background-color: var(--md-sys-color-surface-container-high, #ECE6F0);
  color: var(--md-sys-color-on-surface, #1D1B20);
  box-shadow: var(--md-sys-elevation-level3, 0 4px 12px rgba(0, 0, 0, 0.18));
  padding: 24px;
  max-width: 560px;
  opacity: 0;
  transform: scale(0.9) translateY(16px);
  transition: 
    opacity 0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0),
    transform 0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0),
    display 0.4s allow-discrete;
}

dialog.m3-dialog[open] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  dialog.m3-dialog[open] {
    opacity: 0;
    transform: scale(0.9) translateY(16px);
  }
}

dialog.m3-dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition: background-color 0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0), display 0.4s allow-discrete;
}

dialog.m3-dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 32%); /* M3 Scrim */
}
```

---

### Implementation Checklist
- [ ] Replace JS positioning libraries (Popper, Floating UI) with native `anchor-name` and `position-anchor`.
- [ ] Use `@starting-style` and `transition-behavior: allow-discrete` for animating modals and popovers without JavaScript timers.
- [ ] Use `@container` on modular components to allow seamless reuse across sidebars, grids, and modals.
- [ ] Organize design tokens and reset styles into `@layer` (e.g. `@layer base, components, utilities;`).

## Orchestration & Integration
- Integrates with: `design-system-architect`, `design-system-architect, senior-frontend`, `tailwind-expert`, `senior-frontend`.

### Sovereign Execution, Token Efficiency & Invariants
| Dimension | Sovereign Mandate & Deterministic Contract |
| :--- | :--- |
| **Frontier Model Cascade** | Medium / High (`Gemini 4 Argon`, `Claude Sonnet 5.5 High`, `Muse Wonder High`, `Composer 2.5 Fast`) |
| **Availability Fallback** | `Gemini 4 Argon/Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6` (Zero unhandled missing-model errors) |
| **KV-Cache & Token Protocol** | Pin static instructions & schemas at prompt prefix (`kv-cache-prefix-optimizer`); pass surgical `CONTEXT_MAP.md` slices (<250 tokens/call) during Swarm Fan-Out |
| **SaaT CLI & MCP Dispatch** | CLI: `vibes skill exec modern-css-native-expert <audit\|eval\|verify\|generate\|blueprint>` / MCP: `vibes_skill_dispatch`, `vibes_visual_audit`, `vibes_ast_query`, `vibes_verify_gate` |
| **NFR & Anti-Slop Invariants** | LCP < 1.8s, INP < 100ms, CLS < 0.05, 1px crisp borders, 3-tier radius (6px/8px/12px), `tabular-nums`, 5-state interactive contract; 100% complete zero-placeholder output verified via `node scripts/check-anti-slop.js --strict` |

---


---

<a name="bahasa-indonesia"></a>
## Bahasa Indonesia

### Tujuan & Gambaran Umum
Panduan rekayasa tingkat produksi untuk memanfaatkan **Fitur CSS Native Modern (Standar 2026)** yang menggantikan pustaka JavaScript berukuran besar dengan fitur asli browser. Mencakup **CSS Anchor Positioning API** untuk tooltip dan popover, **`@starting-style`** untuk animasi masuk dan keluar yang mulus pada elemen *top-layer* (`<dialog>`, `popover`), **View Transitions API Level 2**, **Container Queries (`@container`)**, dan selektor relasional **`:has()`**.

### Kemampuan Utama
1. **CSS Anchor Positioning**: Menghapus ketergantungan pada pustaka seperti Floating UI atau Popper.js. Mengikat tooltip, menu, dan popover ke tombol pemicu secara native dengan pembalikan posisi otomatis (`position-try-fallbacks`).
2. **Animasi Mulus Top-Layer**: Menganimasikan dialog dari status `display: none` ke tampil menggunakan `@starting-style` dan `transition-behavior: allow-discrete`.
3. **Container Queries (`@container`)**: Desain responsif berbasis ukuran kontainer induk, bukan lebar layar viewport.
4. **Selektor Relasional `:has()`**: Menata gaya elemen induk berdasarkan status elemen anak di dalamnya tanpa membutuhkan *state* JavaScript.
5. **Nesting Native & `@layer`**: Mengatur hierarki gaya CSS tanpa alat build dan mengontrol urutan spesifisitas secara terstruktur.

---

### Resep Implementasi Produksi

#### Resep 1: Anchor Positioning Murni untuk Menu Dropdown (Tanpa JavaScript)
```css
/* Definisikan tombol pemicu sebagai jangkar (anchor) */
.tombol-pemicu {
  anchor-name: --jangkar-menu;
}

/* Hubungkan menu popover ke tombol pemicu */
.menu-dropdown {
  position: fixed;
  position-anchor: --jangkar-menu;
  
  /* Posisikan di bawah tombol pemicu */
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 8px;

  /* Balik posisi ke atas jika terpotong batas layar */
  position-try-fallbacks: flip-block;
}
```

#### Resep 2: Animasi Modal `<dialog>` dengan `@starting-style`
```css
dialog {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, display 0.25s allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
}

dialog::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition: background-color 0.25s ease-out, display 0.25s allow-discrete;
}

dialog[open]::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

@starting-style {
  dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}
```

---

### Checklist Implementasi
- [ ] Ganti library positioning pihak ketiga dengan CSS `anchor-name` dan `position-anchor`.
- [ ] Gunakan `@starting-style` dan `transition-behavior: allow-discrete` untuk animasi modal tanpa jeda JavaScript.
- [ ] Gunakan `@container` pada komponen reusable agar adaptif di semua layout.
- [ ] Tata arsitektur CSS menggunakan `@layer base, components, utilities;`.

#### Resep 5: Overlay Top-Layer Material Design 3 (M3) dengan Easing Emphasized
Implementasikan dialog M3 dan modal bottom sheet secara native menggunakan `<dialog>` dan `@starting-style` dengan kurva Emphasized Decelerate M3 (`cubic-bezier(0.05, 0.7, 0.1, 1.0)`):
- Hubungkan token bentuk M3 (`--md-sys-shape-corner-extra-large: 28px`) dan surface container (`--md-sys-color-surface-container-high`).
- Backdrop scrim M3 transparan bertransisi halus ke opasitas 32% hitam (`rgb(0 0 0 / 32%)`).

## Integrasi Orkestrasi
Terintegrasi erat dengan skill berikut:
- **`modern-web-guidance`**: Tool pendamping utama untuk menelusuri standar terbaik CSS native modern (`npx -y modern-web-guidance@latest search "<query>"`).
- **`design-system-architect`**: Menyuplai definisi token headless dan hierarki kontainer permukaan.
- **`tailwind-expert`**: Menjembatani primitif CSS native dengan direktif `@theme` dan utilitas dinamis Tailwind v4.
- **`visual-ui-auditor`**: Memvalidasi transisi top-layer yang halus, indikator fokus, dan stabilitas tata letak.
- **`anti-slop`**: Menghilangkan polyfill JavaScript yang tidak diperlukan dan pembungkus div-soup.
- **`senior-frontend`**: Mengintegrasikan fitur CSS native ke dalam arsitektur React 19 / Next.js 15.

### Matriks Eksekusi Berdaulat, Efisiensi Token & Invarian
| Dimensi | Mandat Berdaulat & Kontrak Deterministik |
| :--- | :--- |
| **Kaskade Model Frontier** | Medium / High (`Gemini 4 Argon`, `Claude Sonnet 5.5 High`, `Muse Wonder High`, `Composer 2.5 Fast`) |
| **Invarian Fallback Ketersediaan** | `Gemini 4 Argon/Pro` -> `Gemini 3.8 Flash`; `Claude Opus 5.5` -> `Claude Opus 4.6` (Bebas gagal saat model belum tersedia/kuota penuh) |
| **Protokol Hemat Token & KV-Cache** | Kunci instruksi & skema statis di prefix awal (`kv-cache-prefix-optimizer`); kirim potongan `CONTEXT_MAP.md` (<250 token/panggilan) saat Fan-Out |
| **Eksekusi SaaT CLI & MCP** | CLI: `vibes skill exec modern-css-native-expert <audit\|eval\|verify\|generate\|blueprint>` / MCP: `vibes_skill_dispatch`, `vibes_visual_audit`, `vibes_ast_query`, `vibes_verify_gate` |
| **Invarian NFR & Anti-Slop** | LCP < 1.8s, INP < 100ms, CLS < 0.05, border tegas 1px, radius 3-tier (6px/8px/12px), `tabular-nums`, kontrak interaktif 5-state; kode 100% tuntas tanpa placeholder diverifikasi melalui `node scripts/check-anti-slop.js --strict` |