Masonry (with Animation) in CSS – Master.dev Blog

Grid Lanes – The Future of Masonry Layout

Grid Lanes, giải pháp phân bố masonry layout đang gây tranh luận, đã chính thức ra mắt và cần tìm hiểu cách triển khai. Bài viết sẽ đi sâu vào cơ chế hoạt động của công nghệ này.

Lập trình viên nên đọc bài này để khám phá cách Grid Lanes giải quyết vấn đề bố trí masonry (độ dài không đều) trong CSS, giúp tạo ra giao diện đẹp, cân bằng và dễ quản lý hơn mà không cần phụ thuộc vào các kỹ thuật phức tạp như flexbox hoặc grid riêng lẻ.

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 …

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ư scroll-triggered animations, scoped view transitions, UI components và primitives CSS/HTML. Demo có sẵn trên CodePen, kèm bài viết chi tiết trên Chrome for Developers.

Lập trình viên nên đọc để cập nhật những công cụ UI hiện đại mới nhất từ Google, giúp tối ưu hóa giao diện web với các tính năng mới như chuyển tiếp hiển thị và hoạt động nhảy trượt, giúp cải thiện trải nghiệm người dùng và hiệu suất phát triển.

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 …

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.

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.