What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More

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.

ECMAScript 2026 specification approved

ECMA International vừa phê duyệt ECMAScript 2026 (ES2026) vào ngày 30/6, phiên bản thứ 17 của đặc tả JavaScript. Bản cập nhật bổ sung nhiều tính năng mới như Math.sumPrecise, Iterator.concat, Array.fromAsync, Error.isError, phương thức mới cho Map/WeakMap, hỗ trợ chuyển đổi Uint8Array sang hex/base64, cùng cải tiến cho JSON.parse và JSON.stringify.

Lập trình viên nên đọc bài này vì ECMAScript 2026 mang đến những tính năng mới như Array.fromAsync và JSON.rawJSON, giúp cải thiện hiệu suất và tính linh hoạt trong xử lý dữ liệu đồng bộ/không đồng bộ và định dạng JSON trong các dự án hiện đại.

FixCSS – Master.dev Blog

Bài viết giới thiệu về tài liệu nổi tiếng của Nhóm Làm việc CSS liệt kê những sai lầm trong thiết kế CSS, như việc box-sizing: border-box đáng lẽ nên là mặc định. Declan Chidlow đã thực hiện một bước tiến chưa từng thấy trong cách tiếp cận vấn đề này.

Là lập trình viên phát triển web, đọc bài này giúp bạn hiểu rõ về những sai lầm lịch sử trong CSS—chẳng hạn như box-sizing: border-box—để tránh phải sửa lỗi thừa khi thiết kế giao diện, tiết kiệm thời gian và tránh những thói quen cũ gây khó khăn cho tương lai.

Get Ready For the Powerful CSS border-shape Property!

Thuộc tính CSS sắp ra mắt border-shape cho phép định hình toàn bộ phần tử đồng thời giữ nguyên border, box-shadow và outline, khắc phục hạn chế của clip-path. Tính năng này hỗ trợ đa dạng hiệu ứng như border dạng shape, background cắt gọt, hoạt ảnh, hiện chỉ khả dụng trên Chrome.

Lập trình viên nên đọc bài này để khám phá cách border-shape trong CSS sẽ giải quyết vấn đề tạo các hiệu ứng trang trí (border, shadow) theo hình dạng tự do mà không cần cắt bỏ bằng clip-path, mở rộng khả năng tạo UI sáng tạo và hiệu ứng động hình với các ví dụ thực tế.

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.

Developer Launched Site That Lets You Buy Steam Games Without Money

Nhà phát triển Mike Wing tạo ra trang web Steam Sales Simulator mô phỏng giao diện Steam, cho phép người dùng "mua" game và nhận thành tựu miễn phí. Trang web còn có chợ cộng đồng ảo để trao đổi vật phẩm bằng tiền ảo, nhưng game đã "mua" không thể chơi được.

Bài viết này hữu ích cho lập trình viên muốn khám phá cách xây dựng các giải pháp tương tác và gameplay giả lập, từ đó học cách thiết kế hệ thống giao diện người dùng và cơ chế kinh doanh trong game không cần chi phí thực tế.