Last week in the studio (CW28-26)

What’s new in Web UI (Google I/O 2026)

Bài chia sẻ tại Google I/O 2026 giới thiệu các tính năng mới cho Web UI như …

Why default Tailwind is not always an accessible choice

Tailwind CSS mặc định dùng breakpoint dựa trên rem, khiến layout thay đổi bất ngờ khi người dùng điều chỉnh cỡ chữ mặc định của trình duyệt, trong khi breakpoint px vẫn ổn định. Mặc dù rem tốt hơn cho người đọc có nhu cầu phóng to chữ, nhưng nó kém dự đoán hơn và không nhất thiết tuân WCAG 1.4.4 như zoom trang. Nhà phát triển nên chủ động chọn giữa rem hay px dựa trên đối tượng người dùng mục tiêu.

Lập trình viên nên đọc bài này để hiểu cách Tailwind CSS ảnh hưởng đến tính khả dụng (accessibility) khi sử dụng breakpoints rem mặc định, giúp họ lựa chọn giữa rem và px một cách thông minh để phù hợp với nhu cầu người dùng thay đổi font mặc định hoặc zoom trang web.

In-N-Out Animation using sibling-index() – Master.dev Blog

Kỹ thuật CSS sử dụng hàm sibling-index() để tạo hiệu ứng vào-ra mượt mà cho các phần tử DOM khi chúng được thêm/bớt, kích hoạt transition nhờ việc cập nhật chỉ số vị trí. Phương pháp này kết hợp với @starting-style cho hiệu ứng vào, nhưng bị hạn chế như không hỗ trợ content ngoài luồng, yêu cầu kích thước phần tử cố định và thiếu animation thoát bản địa, chỉ hoạt động trên Chrome và Edge.

Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng chuyển động in-and-out đơn giản chỉ bằng CSS, giúp tối ưu hóa hiệu suất và giảm phụ thuộc vào JavaScript cho các ứng dụng động như danh sách avatar, mảng tròn hoặc grid phản ứng.

Thinking Horizontally in CSS @layer – Master.dev Blog

CSS @layer thường được xem như cơ chế xếp chồng theo chiều dọc để kiểm soát độ ưu tiên, nhưng có thể hình dung theo chiều ngang: đặt các custom properties (design tokens) của mỗi component vào @layer giúp chúng dễ bị ghi đè mà không cần đấu độ ưu tiên. Mẫu thiết kế này sử dụng hai lớp cho mỗi component: lớp token (yếu, dễ ghi đè) và lớp style có phạm vi (được bảo vệ). Cách tiếp cận này giúp kiến trúc CSS trở nên phẳng hơn, tránh xung đột độ ưu tiên khi mở rộng nhiều component.

Lập trình viên nên đọc bài này để khám phá cách sử dụng @layer không chỉ như một công cụ kiểm soát độ ưu tiên vertical mà là một mô hình thinking horizontal, giúp giảm thiểu xung đột tính chất và tối ưu hóa việc quản lý các design tokens trong dự án.

Getting Started with Anchor Positioning • Josh W. Comeau

Giới thiệu thực hành về CSS Anchor Positioning API, hướng dẫn gắn các phần tử nổi như tooltip vào phần tử neo bằng các thuộc tính anchor-name, position-anchor và position-area. Giải thích cách xử lý tràn bằng position-try-fallbacks để tự động lật, đồng thời giới thiệu container queries cấp độ 2 cho tooltip. Đề cập đến chiến lược hỗ trợ trình duyệt bao gồm polyfill Oddbird và @supports feature queries.

Lập trình viên nên đọc bài này để khám phá cách sử dụng CSS mới nhất để tạo ra các tính năng tương tác như tooltip động, container query ankhored và xử lý overflow tự động, giúp nâng cấp UI của ứng dụng mà không cần JavaScript.

GitHub - spiritov/ds.css: A css framework recreating the DS / DS Lite's UI

ds.css là framework CSS mã nguồn mở mô phỏng giao diện người dùng của Nintendo DS Lite, có thể sử dụng bằng cách sao chép thư mục /css hoặc cài đặt qua npm. Dự án cung cấp bản xem trước trực tiếp và đang phát triển thêm các thành phần như đồng hồ, lịch, cùng nhiều UI lấy cảm hứng từ DS.

Lập trình viên nên đọc bài này để khám phá cách tái tạo UI cổ điển của Nintendo DS Lite bằng CSS, giúp tìm hiểu về thiết kế giao diện đơn giản, thân thiện và hiệu suất cao, có thể ứng dụng vào các dự án web hiện đại với phong cách retro.

How to create awesome staggered animations in CSS

CSS hiện đại hỗ trợ tạo hiệu ứng staggered animation (hoạt ảnh so le) trực tiếp bằng các hàm sibling-index() và sibling-count() mà không cần tiền xử lý hay JavaScript. Bài viết hướng dẫn cách xây dựng hiệu ứng leo thang (ascending) và giảm dần (descending) bằng cách tính toán animation-delay dựa trên sibling-index(), phân biệt giữa timing chồng chéo (overlapping) và tuần tự (sequential), cùng các ví dụ thực tế như hero section hay hiệu ứng hiển thị văn bản kiểu chat. Ngoài ra, nó cũng đề cập đến trường hợp cần JavaScript (thay đổi trạng thái tương tác, hiệu ứng thoát), cách viết fallback @supports cho trình duyệt không hỗ trợ sibling-index(), và tuân thủ cài đặt ưu tiên chuyển động giảm (prefers-reduced-motion) của người dùng. Hiện tại, tính năng này được hỗ trợ bởi khoảng 75% trình duyệt (Chromium và Safari).

Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng hoạt hình đồng thời và đồng bộ hóa giữa các phần tử CSS bằng các thuộc tính tiên tiến như sibling-index() và animation-delay, giúp tiết kiệm thời gian và code hơn so với các giải pháp phụ thuộc JavaScript.