Frontend & giao diện
7 bài viết gắn thẻ #css trên DiCodeWeb, từ nền tảng đến production, mới nhất trước.
7 bàiCập nhật 21 thg 9, 2026
Năm 2026 trình duyệt đã có sẵn những primitive mà trước đây phải nhờ Floating UI, Radix hay thư viện animation. Bài này đi qua popover, invoker commands, anchor positioning và View Transitions: chúng làm gì, kết hợp ra sao, hỗ trợ tới đâu và chỗ nào vẫn nên dùng thư viện.
Cơ chế snapshot và cây pseudo-element của View Transitions, startViewTransition trong SPA, transition giữa hai document, view-transition-name, view-transition-class và types, shared element từ danh sách sang trang chi tiết, reduced motion, những bẫy hiệu năng, và cách dùng component ViewTransition của React trong Next.js 16.
Vì sao CSS của dự án lớn luôn trượt dần về !important, cách @layer thay đổi luật thắng thua của cascade, những bẫy như style không nằm trong layer và !important bị đảo ngược, @scope với donut scope và proximity, các gotcha của native nesting, và lộ trình đưa một codebase cũ vào layer.
Chia token thành ba tầng, đặt tên theo mục đích, làm light/dark theme với prefers-color-scheme và lựa chọn của người dùng mà không bị nháy, color-scheme, map token vào @theme của Tailwind v4, kiểm tra contrast và những lỗi hay gặp.
Font ảnh hưởng LCP và CLS ra sao, chọn font-display thế nào, preload font quan trọng, subset với unicode-range cho tiếng Việt, variable font, tự host hay dùng CDN, chỉnh metric font fallback và next/font trong Next.js.
Vì sao media query theo viewport không còn đủ cho component tái sử dụng, cách dùng container-type, container có tên, đơn vị cqi, kết hợp clamp() và :has(), kèm một card responsive hoàn chỉnh và chiến lược fallback.
Hiểu normal flow, block và inline, flexbox (một chiều, từ nội dung ra) và grid (hai chiều, từ layout vào), intrinsic sizing, vì sao min-width: 0 cứu flex item bị tràn — để viết layout bằng hiểu biết thay vì thử từng thuộc tính.