# Round 09 โ€” Mobile-First CSS Strategy + RTL **Date**: 2026-04-30 **Time**: 30 min (of 2h) **Status**: โœ… COMPLETE **Round Type**: Critical Path โ€” CSS architecture --- ## ๐ŸŽฏ ืฉืืœื” ืžืจื›ื–ื™ืช **ืื™ืš master.css ืขื•ื‘ื“ ืžืฆื•ื™ืŸ ื‘-mobile/iPad/desktop ื‘-RTL ืžืœื, ื‘ืœื™ ื›ืคื™ืœื•ื™ื•ืช?** --- ## ๐Ÿ† Verdict: 3 breakpoints + Logical Properties + Container Queries **Mobile-first** ยท 3 ฮต-points ยท CSS Logical Properties (`margin-inline-start` ื‘ืžืงื•ื `margin-left`) ยท Container queries ืœcomponents. --- ## ๐Ÿ“ ื”-3 Breakpoints ```css /* Mobile-first base โ€” ืื™ืŸ media query */ :root { --container-padding: 16px; --grid-cols: 1; --headline-size: 28px; --body-size: 16px; } /* Tablet โ€” 768px+ */ @media (min-width: 768px) { :root { --container-padding: 24px; --grid-cols: 2; --headline-size: 36px; } } /* Desktop โ€” 1024px+ */ @media (min-width: 1024px) { :root { --container-padding: 32px; --grid-cols: 3; --headline-size: 48px; } } /* Wide โ€” 1440px+ (ืื•ืคืฆื™ื•ื ืœื™) */ @media (min-width: 1440px) { :root { --container-padding: 48px; --grid-cols: 4; } } ``` **ืื–ื•ืœืื™ ื›ื•ืชื‘ CSS ืคืขื ืื—ืช**. ื›ืœ component ืžืฉืชืžืฉ ื‘-`var(--grid-cols)` โ€” ืื™ืŸ `@media` ื‘ื›ืœ component. --- ## ๐ŸŒ RTL โ€” Automatic via Logical Properties ```css /* โŒ ื™ืฉืŸ โ€” ืฉื•ื‘ืจ ื‘-RTL */ .card { margin-left: 16px; padding-right: 24px; } /* โœ… ืžื•ื“ืจื ื™ โ€” RTL automatic */ .card { margin-inline-start: 16px; padding-inline-end: 24px; } ``` **ืงื•ื•ื™ ื”ืžืชืืจ**: - `margin-left` โ†’ `margin-inline-start` - `margin-right` โ†’ `margin-inline-end` - `padding-left/right` โ†’ `padding-inline-start/end` - `border-left/right` โ†’ `border-inline-start/end` - `text-align: left` โ†’ `text-align: start` - `transform: translateX(20px)` โ†’ โš ๏ธ ืขื“ื™ื™ืŸ ืฆืจื™ืš `dir`-aware (ืื™ืŸ logical equivalent ื‘-CSS) ื”-`` ืžืฉื ื” ืืช ื›ืœ ื”logical ื”ืœืœื• ืื•ื˜ื•ืžื˜ื™ืช. **0 ืฉื•ืจื•ืช JS, 0 ื›ืคื™ืœื•ืช CSS**. --- ## ๐ŸŽ Container Queries โ€” ื”ืงืกื ื”ื—ื“ืฉ ```css /* ืจื›ื™ื‘ ืžื•ื“ืข ืœืจื•ื—ื‘ ื”-CONTAINER ืฉืœื•, ืœื ืจื•ื—ื‘ ื”ืžืกืš */ .context-card-grid { container-type: inline-size; display: grid; gap: 16px; } @container (inline-size < 480px) { .context-card-grid { grid-template-columns: 1fr; } } @container (inline-size >= 480px) { .context-card-grid { grid-template-columns: 1fr 1fr; } } @container (inline-size >= 800px) { .context-card-grid { grid-template-columns: 1fr 1fr 1fr; } } ``` **ืชื—ื ื•ืช-ืžืชื™?** - Drawer 50% ื ืคืชื— ืขืœ ื“ืกืงื˜ื•ืค โ†’ grid ื™ื•ื“ืข ืฉื”container ~600px โ†’ 2 cols - Drawer 92% ื ืคืชื— โ†’ ~900px โ†’ 3 cols - ื›ืœ ื–ื” **ื‘ืœื™ ืฉื™ื ื•ื™ ื‘-A2UI** โ€” ื”-LLM ืœื ืฆืจื™ืš ืœื“ืขืช ืขืœ rendering width! ื–ื” ื”-**holy grail** ืฉืœ responsive: ืจื›ื™ื‘ ื™ื•ื“ืข ืœืจื ื“ืจ ื ื›ื•ืŸ ื‘ื›ืœ container ื‘ืœื™ breakpoints ื’ืœื•ื‘ืœื™ื™ื. ืชืžื™ื›ื” ื‘-2026: Chrome 105+, Safari 16+, Firefox 110+ (ื‘ืขืฆื **ื”ื›ืœ**). --- ## ๐ŸŽจ Mobile-First Cascading ```css /* Default โ€” mobile */ .press-flow-stepper { font-size: 11px; padding: 12px; gap: 8px; flex-direction: column; /* vertical on mobile */ } @media (min-width: 768px) { .press-flow-stepper { font-size: 13px; padding: 16px; gap: 16px; flex-direction: row; /* horizontal on tablet+ */ } } ``` ืžื•ื‘ื™ื™ืœ ืžืงื‘ืœ **ืืช ื”ื›ื™ ืคื—ื•ืช ืกื˜ื™ื™ืœื™ื**. ื›ืœ ื”ื•ืกืคื” ื”ื™ื enhancement. --- ## ๐ŸŒ— Dark Mode ```css /* Light mode โ€” default */ :root { --bg-page: var(--paper-100); --text-primary: var(--ink-900); --hairline: rgba(20,20,19,0.08); } /* Dark mode โ€” based on user preference */ @media (prefers-color-scheme: dark) { :root { --bg-page: var(--ink-900); --text-primary: var(--paper-100); --hairline: rgba(255,255,255,0.08); } } /* Manual override (user choice) */ [data-theme="dark"] { --bg-page: var(--ink-900); --text-primary: var(--paper-100); } ``` ื”-LLM ืฉื•ืœื— `theme.mode: "dark"` ื‘-A2UI โ†’ renderer ืžื•ืกื™ืฃ `data-theme="dark"` ืขืœ root. **0 changes ื‘-CSS** โ€” ื”ืงื•ื‘ืฅ ืื•ืชื• ืงื•ื‘ืฅ. --- ## ๐Ÿ“ฑ Touch Targets iOS HIG ื“ื•ืจืฉ ืžื™ื ื™ืžื•ื **44ร—44px** ืœืžื’ืข. Material 3 ื“ื•ืจืฉ **48ร—48px**. ```css :root { --touch-min: 44px; } button, [role="button"], .clickable { min-block-size: var(--touch-min); min-inline-size: var(--touch-min); /* iOS: ื‘ื™ื˜ืœ highlight ื›ื—ื•ืœ-default */ -webkit-tap-highlight-color: transparent; } ``` --- ## โšก Performance Optimizations ### 1. CSS containment ```css .article-card { contain: layout paint style; /* ืจื›ื™ื‘ ืœื ื™ื•ืฆืจ re-layout ื‘stu */ } ``` ### 2. content-visibility (ื ื˜ืขืŸ ืจืง ื›ืฉื ืจืื”) ```css .context-card-list > * { content-visibility: auto; contain-intrinsic-size: 100px 200px; /* placeholder size */ } ``` ### 3. font-display ```css @font-face { font-family: 'Frank Ruhl Libre'; src: url('https://assets.clastop.app/fonts/frank-ruhl-libre-900.woff2') format('woff2'); font-display: swap; /* ืžืฆื™ื’ fallback ืžื™ื“ */ } ``` ### 4. transform/opacity only (animations) ```css .context-card.entering { /* ืจืง transform + opacity = GPU only, 60 FPS guaranteed */ transform: translateY(10px); opacity: 0; animation: fadeIn 0.3s var(--ease-smooth) forwards; } ``` --- ## ๐ŸŽฏ ื”ืงื•ื‘ืฅ ื”ืกื•ืคื™ โ€” `master.css` ``` /master.css (~80KB total, gzipped ~15KB) โ”œโ”€โ”€ @font-face (4 fonts) ~1KB โ”œโ”€โ”€ :root tokens (L1+L2+L4 ~400 vars) ~6KB โ”œโ”€โ”€ @media base styles (mobile-first) ~15KB โ”œโ”€โ”€ @media tablet (min-width: 768px) ~5KB โ”œโ”€โ”€ @media desktop (min-width: 1024px) ~8KB โ”œโ”€โ”€ @container queries (per-component) ~12KB โ”œโ”€โ”€ @media prefers-color-scheme: dark ~5KB โ”œโ”€โ”€ Component classes (Card, Stack, BottomSheet, ...) ~25KB โ””โ”€โ”€ Animations (@keyframes, transitions) ~3KB ``` `/tenant-{slug}.css` (~2KB, gzipped ~500 bytes) โ€” ืจืง 10-30 token overrides. **Total CSS network cost**: ~15-17KB gzipped first-load ยท cached forever after. --- ## ๐Ÿ“Š Browser Support Matrix (May 2026) | Feature | Chrome | Firefox | Safari | iOS Safari | |---|---|---|---|---| | CSS Variables | โœ… all | โœ… all | โœ… 9.1+ | โœ… 9.3+ | | Logical Properties | โœ… 89+ | โœ… 41+ | โœ… 14.1+ | โœ… 14.5+ | | Container Queries | โœ… 105+ | โœ… 110+ | โœ… 16+ | โœ… 16.4+ | | `:has()` selector | โœ… 105+ | โœ… 121+ | โœ… 15.4+ | โœ… 15.4+ | | `view-transition-name` | โœ… 111+ | โŒ | โœ… 18+ | โœ… 18.2+ | | `accent-color` | โœ… 93+ | โœ… 92+ | โœ… 15.4+ | โœ… 15.4+ | | OKLCH colors | โœ… 111+ | โœ… 113+ | โœ… 15.4+ | โœ… 15.4+ | | `subgrid` | โœ… 117+ | โœ… 71+ | โœ… 16+ | โœ… 16+ | โœ… **ื›ืœ ื”features ืฉืื ื™ ืžืฉืชืžืฉ ื‘ื”ื ื ืชืžื›ื™ื ื‘-95%+ ืฉืœ ื”-traffic ื‘-2026**. --- ## โœ… Closure - [x] 3 breakpoints (768/1024/1440) - [x] Logical Properties (RTL automatic) - [x] Container Queries (per-component responsive) - [x] Mobile-first cascade - [x] Dark mode (auto + manual) - [x] Touch targets (44px iOS HIG) - [x] Performance (containment, content-visibility, font-display) - [x] Browser support matrix verified โœ… **Round 09 closed.** --- ## ๐Ÿ›ฃ๏ธ Next: Round 10 โ€” POC Architecture (file tree + sequence diagram)