picasso-skill 2.4.0 → 2.6.0

package/references/modern-css-performance.md

@@ -3,30 +3,13 @@
 ## 1. Modern CSS Features (2024-2025)
 
 ### CSS Nesting (Baseline 2024)
-Native nesting eliminates preprocessor dependency.
-
-```css
-.card {
-  padding: 1rem;
-  > h2:first-child { margin-block-start: 0; }
-  &:hover { box-shadow: 0 4px 12px rgb(0 0 0 / 0.1); }
-  @media (width >= 768px) { padding: 2rem; }
-}
-```
+Native nesting eliminates preprocessor dependency. Nest with `>`, `&`, and `@media` directly inside rule blocks.
 
 ### Cascade Layers (@layer)
-Control specificity ordering without selector wars.
-
-```css
-@layer reset, base, components, utilities;
-@layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; } }
-@layer base { body { font-family: system-ui; line-height: 1.6; } }
-@layer components { .btn { padding: 0.5rem 1rem; border-radius: 0.375rem; } }
-```
+Control specificity ordering: `@layer reset, base, components, utilities;` -- later layers win regardless of selector specificity.
 
 ### :has() Selector
-Style parents based on children.
-
+Style parents based on children:
 ```css
 form:has(:invalid) { border-color: red; }
 .card:has(img) { grid-template-rows: auto 1fr; }
@@ -34,128 +17,52 @@ body:has(dialog[open]) { overflow: hidden; }
 ```
 
 ### CSS Anchor Positioning
-Position elements relative to other elements without JS.
-
-```css
-.trigger { anchor-name: --tooltip-anchor; }
-.tooltip {
-  position: absolute;
-  position-anchor: --tooltip-anchor;
-  top: anchor(bottom);
-  left: anchor(center);
-  translate: -50% 0.5rem;
-}
-```
+Position elements relative to other elements without JS. Use `anchor-name` on trigger, `position-anchor` + `anchor()` on positioned element.
 
 ### @scope
-Restrict styles to a DOM subtree with optional lower boundary.
-
+Restrict styles to a DOM subtree with optional lower boundary:
 ```css
 @scope (.card) to (.card-content) {
-  h2 { font-size: 1.25rem; font-weight: 600; }
-  p { color: var(--muted); }
+  h2 { font-size: 1.25rem; }
 }
 ```
 
 ### @property (Typed Custom Properties)
-Register custom properties with type, initial value, and inheritance. Enables animating custom properties.
-
-```css
-@property --gradient-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
-}
-.gradient-border {
-  --gradient-angle: 0deg;
-  border-image: conic-gradient(from var(--gradient-angle), #f06, #9f6, #06f) 1;
-  animation: spin 3s linear infinite;
-}
-@keyframes spin { to { --gradient-angle: 360deg; } }
-```
+Register custom properties with type, initial value, and inheritance. Enables animating custom properties (e.g., gradient angles).
 
 ### color-mix()
-Blend colors in any color space at runtime.
-
-```css
-.button {
-  --brand: oklch(0.65 0.25 260);
-  background: var(--brand);
-  &:hover { background: color-mix(in oklch, var(--brand) 85%, white); }
-  &:active { background: color-mix(in oklch, var(--brand) 80%, black); }
-}
-```
+Blend colors in any color space at runtime. Always specify `in oklch` for perceptual uniformity.
 
 ### Logical Properties
-Write direction-agnostic layouts (LTR/RTL safe).
-
-Key mappings: `margin-left` -> `margin-inline-start`, `padding-top` -> `padding-block-start`, `width` -> `inline-size`, `height` -> `block-size`.
-
-```css
-.sidebar { margin-inline-end: 2rem; padding-block: 1rem; border-inline-start: 3px solid var(--accent); }
-```
+Direction-agnostic layouts (LTR/RTL safe): `margin-inline-start`, `padding-block`, `inline-size`, `border-inline-start`.
 
 ### Subgrid
-Child grids align to parent grid tracks.
-
-```css
-.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
-.grid > .card {
-  display: grid;
-  grid-row: span 3;
-  grid-template-rows: subgrid;
-}
-```
+Child grids align to parent grid tracks: `grid-template-rows: subgrid` on a child spanning multiple rows.
 
 ### Popover API
-Native popovers with light-dismiss, no JS required.
-
-```html
-<button popovertarget="info">Info</button>
-<div popover id="info">Content here. Click outside to dismiss.</div>
-```
-
-```css
-[popover] {
-  &::backdrop { background: rgb(0 0 0 / 0.25); }
-  opacity: 0; transition: opacity 0.2s, display 0.2s allow-discrete;
-  &:popover-open { opacity: 1; }
-}
-```
+Native popovers with light-dismiss, no JS: `<button popovertarget="id">` + `<div popover id="id">`.
 
 ---
 
-## 2. Core Web Vitals Optimization
+## 2. Core Web Vitals
 
 **Thresholds:** LCP < 2.5s | CLS < 0.1 | INP < 200ms
 
 ### LCP (Largest Contentful Paint)
-- Preload hero images: `<link rel="preload" as="image" href="hero.webp" fetchpriority="high">`
-- Use `fetchpriority="high"` on the LCP `<img>` element.
-- Eliminate render-blocking CSS/JS; inline critical CSS.
-- Use CDN, compress with Brotli.
+- Preload hero images with `fetchpriority="high"`
+- Inline critical CSS, eliminate render-blocking resources
+- Use CDN + Brotli compression
 
 ### CLS (Cumulative Layout Shift)
-- Always set `width`/`height` or `aspect-ratio` on images and video.
-- Reserve space for ads/embeds with `min-height`.
-- Use `font-display: optional` (best CLS) or `swap` (best UX).
-- Avoid inserting content above the fold after load.
+- Always set `width`/`height` or `aspect-ratio` on images/video
+- Reserve space for ads/embeds with `min-height`
+- Use `font-display: optional` (best CLS) or `swap` (best UX)
+- Never insert content above the fold after load
 
 ### INP (Interaction to Next Paint)
-Replaced FID in March 2024. Measures all interactions across the page lifecycle.
-
-```js
-button.addEventListener('click', () => {
-  button.classList.add('pressed');       // instant visual feedback
-  requestAnimationFrame(() => {
-    setTimeout(() => doHeavyWork(), 0);  // yield to browser
-  });
-});
-```
-
-- Break long tasks with `scheduler.yield()` (or `setTimeout(0)` fallback).
-- Use `content-visibility: auto` for off-screen DOM.
-- Avoid layout thrashing: batch reads, then batch writes.
+- Provide instant visual feedback, defer heavy work with `scheduler.yield()` or `setTimeout(0)`
+- Use `content-visibility: auto` for off-screen DOM
+- Avoid layout thrashing: batch reads, then batch writes
 
 ---
 
@@ -168,180 +75,61 @@ button.addEventListener('click', () => {
 | **SVG** | Icons, logos, illustrations | Infinitely scalable |
 | **PNG** | Screenshots, pixel-precise | Lossless only |
 
-### Responsive Images Pattern
-
-```html
-<picture>
-  <source srcset="hero.avif" type="image/avif">
-  <source srcset="hero.webp" type="image/webp">
-  <img src="hero.jpg"
-    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
-    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
-    alt="Hero" width="1200" height="675"
-    loading="lazy" decoding="async">
-</picture>
-```
-
-**Rules:** Never lazy-load above-the-fold images (hurts LCP). Use `fetchpriority="high"` on LCP image. Always include `width`/`height` for CLS prevention.
-
-### Blur-Up Placeholder
-
-```css
-.img-placeholder {
-  background: url('data:image/webp;base64,...') center/cover;
-  aspect-ratio: 16/9;
-}
-.img-placeholder img {
-  opacity: 0; transition: opacity 0.3s;
-  &.loaded { opacity: 1; }
-}
-```
+**Rules:** Use `<picture>` with AVIF/WebP sources + JPEG fallback. Never lazy-load above-the-fold (hurts LCP). Use `fetchpriority="high"` on LCP image. Always include `width`/`height`. Use blur-up placeholder for perceived performance.
 
 ---
 
 ## 4. Font Performance
 
-### Optimal Loading Strategy
-
-```html
-<link rel="preload" href="/fonts/display.woff2" as="font" type="font/woff2" crossorigin>
-```
-
-```css
-@font-face {
-  font-family: 'Display';
-  src: url('/fonts/display.woff2') format('woff2');
-  font-weight: 100 900;
-  font-display: swap;
-  unicode-range: U+0000-00FF;
-}
-```
-
-### font-display Decision Guide
-- **`swap`**: shows fallback immediately, swaps when loaded. Best for body text. Causes FOUT.
-- **`optional`**: uses web font only if cached/instant. Best CLS score.
-- **`fallback`**: 100ms blank, then fallback, short swap window. Good compromise.
-- **`block`**: up to 3s invisible text (FOIT). Avoid for body text.
-
-### Variable Fonts
-One file replaces multiple weight/style files. Use when you need 3+ weights. A single variable font (~90KB) replaces 6 static files (360KB+).
-
-### Subsetting
-Strip unused glyphs with `pyftsubset` or `glyphhanger`. Can reduce 200KB+ files to 15-30KB.
+- Preload primary font: `<link rel="preload" as="font" type="font/woff2" crossorigin>`
+- Use `font-display: swap` (body text) or `optional` (best CLS)
+- Variable fonts: one file replaces multiple weights (~90KB vs 360KB+)
+- Subset with `pyftsubset` or `glyphhanger` (200KB+ down to 15-30KB)
+- Use `unicode-range` to load only needed glyphs
 
 ---
 
 ## 5. Critical CSS & Resource Hints
 
-### Critical CSS Pattern
-
-```html
-<head>
-  <style>/* inlined above-the-fold styles, ~14KB max */</style>
-  <link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">
-  <noscript><link rel="stylesheet" href="/styles.css"></noscript>
-</head>
-```
-
-### Resource Hints
-
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="dns-prefetch" href="https://analytics.example.com">
-<link rel="preload" href="/critical.woff2" as="font" crossorigin>
-<link rel="prefetch" href="/next-page.js">
-<link rel="modulepreload" href="/app.js">
-```
-
-**Build tools:** Use `critical` (npm) or `critters` (webpack/vite plugin) to auto-extract above-fold CSS at build time.
+- Inline above-the-fold CSS (~14KB max) in `<head>`
+- Preload remaining stylesheet with `onload="this.rel='stylesheet'"`
+- Resource hints: `preconnect` (fonts, APIs), `dns-prefetch` (analytics), `prefetch` (next page), `modulepreload` (app JS)
+- Auto-extract with `critical` (npm) or `critters` (webpack/vite)
 
 ---
 
 ## 6. Tailwind CSS v4
 
-Released January 2025. Core rewritten in Rust (Oxide engine). Full builds 3.8x faster, incremental rebuilds up to 182x faster.
-
-### CSS-First Configuration
-
-```css
-@import "tailwindcss";
-
-@theme {
-  --color-brand: oklch(0.65 0.25 260);
-  --font-display: "Satoshi", sans-serif;
-  --breakpoint-3xl: 1920px;
-  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
-}
-```
-
-No `tailwind.config.js` needed. All customization lives in CSS via `@theme`.
+Released January 2025. Rust-based Oxide engine: full builds 3.8x faster, incremental 182x faster.
 
 ### Key Changes
-- **Automatic content detection** -- scans files, respects `.gitignore`.
-- **Built on `@layer`, `@property`, `color-mix()`**.
-- **Container queries** built in: `@sm:`, `@md:` variants.
-- **3D transforms**: `rotate-x-45 transform-3d perspective-distant`.
-- **`@starting-style`** support for enter/exit transitions with `transition-discrete`.
-- **`not-*` variant**: `not-hover:opacity-75`, `not-last:border-b`.
+- CSS-first config: `@import "tailwindcss"` + `@theme {}` (no `tailwind.config.js`)
+- Automatic content detection (respects `.gitignore`)
+- Built on `@layer`, `@property`, `color-mix()`
+- Container queries: `@sm:`, `@md:` variants
+- 3D transforms: `rotate-x-45 transform-3d perspective-distant`
+- `@starting-style` for enter/exit transitions
+- `not-*` variant: `not-hover:opacity-75`, `not-last:border-b`
 
 ---
 
 ## 7. Advanced Animation APIs
 
 ### View Transitions API
-
-```css
-@view-transition { navigation: auto; }
-.hero-image { view-transition-name: hero; }
-::view-transition-old(hero) { animation: fade-out 0.3s ease-out; }
-::view-transition-new(hero) { animation: fade-in 0.3s ease-in; }
-```
-
-```js
-document.startViewTransition(() => updateDOM());
-```
+Name elements with `view-transition-name`, style with `::view-transition-old/new`. Trigger with `document.startViewTransition(() => updateDOM())`. CSS-only for MPA: `@view-transition { navigation: auto; }`.
 
 ### Scroll-Driven Animations (No JS, Off Main Thread)
-
+Bind animations to scroll or view progress:
 ```css
-.progress-bar {
-  animation: grow-width linear;
-  animation-timeline: scroll();
-}
-@keyframes grow-width { from { width: 0; } to { width: 100%; } }
-
-.reveal {
-  animation: fade-slide-up linear both;
-  animation-timeline: view();
-  animation-range: entry 0% entry 100%;
-}
-@keyframes fade-slide-up {
-  from { opacity: 0; translate: 0 2rem; }
-  to { opacity: 1; translate: 0; }
-}
+.progress-bar { animation: grow linear; animation-timeline: scroll(); }
+.reveal { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
 ```
 
 ### Web Animations API (WAAPI)
-
-```js
-element.animate(
-  [{ transform: 'translateY(0)', opacity: 1 },
-   { transform: 'translateY(-20px)', opacity: 0 }],
-  { duration: 300, easing: 'ease-out', fill: 'forwards' }
-);
-```
+`element.animate([keyframes], options)` for programmatic control with `duration`, `easing`, `fill`.
 
 ### GSAP ScrollTrigger
-
-```js
-gsap.to('.hero-title', {
-  scrollTrigger: {
-    trigger: '.hero', start: 'top top', end: 'bottom top',
-    scrub: true, pin: true
-  },
-  y: -100, opacity: 0, scale: 0.9
-});
-```
+For complex scroll-linked animations with `scrub`, `pin`, and timeline control.
 
 ---