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

I still like writing websites by hand

Tác giả từng hand‑code một trang web cho Alex vào năm 2020, sau khi họ quen nhau từ năm …

Scroll-driven CSS animations

Bài viết giới thiệu cách tạo hoạt ảnh dựa trên vị trí cuộn mà không cần JavaScript bằng …

The Future of CSS: Target Multiple Classes with the Class Prefix Selector

CSS sắp bổ sung bộ chọn Class Prefix Selector (.prefix-*) cho phép nhắm mục tiêu tất cả các class có tiền tố phân cách bằng dấu gạch ngang (như .btn-primary, .btn-secondary) mà không cần liệt kê riêng lẻ hay thêm class cơ sở. Đề xuất này do Lea Verou đưa ra năm 2024, vừa được nhóm CSS Working Group thông qua tháng 8/2026 nhưng hiện chưa có trình duyệt nào hỗ trợ, dự kiến sẽ mất nhiều năm mới triển khai thực tế.

Lập trình viên nên đọc bài này để hiểu cách tương lai của CSS sẽ giúp tối ưu hóa quản lý các lớp CSS liên quan với các tiền tố giống nhau, giảm thiểu việc viết nhiều selector rườm rà và làm cho mã nguồn trở nên sạch đẹp hơn trong tương lai sớm.

Almost nobody pays attention to web standards anymore

Một nghiên cứu của nhà phát triển Théo Ducreux trên 5.000 tên miền phổ biến nhất cho thấy 87,2% vi phạm tiêu chuẩn HTML/CSS, chỉ 12,8% hợp lệ hoàn toàn và 2,6% không có lỗi hay cảnh báo. Hơn 1/3 không đạt kiểm tra khả năng truy cập, với 20,4% thiếu alt text và 41,6% thiếu ARIA labels; lỗi lồng thẻ chiếm 59% do các framework front-end sinh ra markup lỗi thời điểm build. Các trình duyệt cho phép phục hồi lỗi đã dung túng mã kém chất lượng, gây hỏng hóc cho trình đọc màn hình, trợ lý AI hay công cụ dịch.

Lập trình viên nên đọc bài này để hiểu rõ cách các tiêu chuẩn web hiện nay bị vi phạm rộng rãi, từ đó nâng cao kiến thức về cách viết mã chính xác, đảm bảo tính khả dụng và tương thích với các công cụ tương lai như AI và trợ lý giọng nói.

CSS Infinity Use Cases – Master.dev Blog

CSS cho phép sử dụng giá trị infinity bên trong hàm calc() cho các thuộc tính như border-radius. Công nghệ này mở ra nhiều ứng dụng sáng tạo cho các nhà phát triển web.

Bài viết này giúp bạn khám phá những ứng dụng sáng tạo và thú vị của giá trị vô cực trong CSS để nâng cao kỹ năng thiết kế giao diện.

The asteroid currently hitting frontend web development

Nhiều giáo viên nổi tiếng trong lĩnh vực frontend web development như Axel Rauschmayer …

Background Image Refraction in CSS – Master.dev Blog

Bài viết giới thiệu cách tạo hiệu ứng refraction thủy tinh lỏng bằng CSS thuần, sử dụng hàm view() để theo dõi vị trí phần tử trong container cuộn thay vì nền cố định liên quan tới viewport. Để thực hiện, tác giả biến container thành phần tử cuộn, sau đó áp dụng view timeline trên cả hai trục x và y để animate thuộc tính background-position của phần tử con, khiến nền của phần tử con tự động khớp với phần tương ứng của hình nền container mà không cần cuộn thực tế. Khi thay đổi kích thước hoặc dịch chuyển background của phần tử con, hiện tượng uốn cong(refraction) xuất hiện, tạo cảm giác ánh sáng bị vỡ như qua chất lỏng. Hiệu ứng này có thể được tăng cường bằng lớp lớp blur, shadow và skew để đạt được vẻ ngoài glassmorphism hoàn chỉnh. Bài viết cho thấy với chỉ vài dòng CSS và sử dụng API view timeline mới, nhà phát triển có thể mô phỏng refraction phức tạp mà không cần JavaScript hoặc hình ảnh nền cố định, điều đáng học là tận dụng khả năng theo dõi vị trí của view() để tạo hiệu ứng tương tác dựa trên layout thay vì viewport.

Công nghệ view() trong CSS giúp tạo hiệu ứng ly quang chất lỏng chân thực mà không cần JavaScript, mở ra kỹ thuật CSS animation mới mẻ cho thiết kế giao động hiện đại.

Feature Detecting “Undetectable” CSS Features with @supports named-feature()

Trước đây @supports chỉ có thể kiểm tra tính năng dựa trên tên thuộc tính hoặc giá trị, không thể phát hiện các hành vi phụ thuộc vào triển khai như tương tác giữa hai thuộc tính hoặc hỗ trợ một phần. Để khắc phục, CSS Working Group đã chấp nhận đề xuất của David Baron và thêm hàm @supports named-feature() với hai từ khóa mới: anchor-position-follows-transforms (được hỗ trợ trong Chrome 150, Firefox 156, Safari Technology Preview) và single-axis-scroll-container (được hỗ trợ trong Chrome 153, chưa có trong Firefox hoặc Safari). Với hàm này, nhà phát triển có thể viết điều kiện chính xác hơn để áp dụng các quy tắc CSS chỉ khi tính năng thực sự hoạt động trong môi trường cụ thể, tránh những trường hợp giả dương như Flexbox gap hoạt động với Grid nhưng không với Flex. Điều đáng học là khi làm việc với các tính năng mới hoặc chưa đồng nhất giữa các trình duyệt, việc kiểm tra qua named-feature() giúp giảm thiểu lỗi giao diện và giảm phụ thuộc vào polyfill hoặc hack dựa trên user-agent. Tác giả cũng đã đề xuất cả hai từ khóa và làm việc trực tiếp với đội ngũ Safari để đưa chúng vào bản phát hành.

Lập trình viên nên đọc bài này vì @supports named-feature() cho phép phát hiện các hành vi CSS cụ thể của trình duyệt mà cách kiểm tra truyền thống không thể, giúp viết CSS tương thích tốt hơn trên mọi nền tảng.