CSS và nền tảng web hiện đại

Các phần

1. 1

   Phần 1

   Một mô hình tư duy cho CSS layout: từ normal flow đến flexbox và grid

   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.

   10 thg 3, 20258 phút

2. 2

   Phần 2

   Container queries và responsive hiện đại: component tự biết mình rộng bao nhiêu

   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.

   15 thg 5, 20256 phút

3. 3

   Phần 3

   Design token và theming với CSS custom properties: từ màu thô đến dark mode

   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.

   2 thg 2, 20268 phút

4. 4

   Phần 4

   Ưu tiên nền tảng: Popover API, CSS anchor positioning và View Transitions thay được khá nhiều JavaScript UI

   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.

   21 thg 9, 202622 phút

5. 5

   Phần 5

   Modal dialog dễ tiếp cận: dùng thẻ dialog native cho đúng

   Từ showModal(), top layer, ::backdrop đến quản lý focus, gắn nhãn, khoá cuộn, đóng khi bấm nền và dialog lồng nhau — kèm một component React nhỏ và cách tự kiểm tra bằng bàn phím và screen reader.

   7 thg 9, 20258 phút