CSS Infinity Use Cases – Master.dev Blog

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.

The View Transitions API

API View Transitions cho phép tạo các animation mượt mà giữa các trạng thái cùng một tài liệu nhờ các phương thức startViewTransition, CSS pseudo-elements và thuộc tính view-transition-name.

Là người phát triển web, bạn nên đọc bài này để khám phá cách tạo các chuyển động nhẹ nhàng giữa các trang trong cùng một tài liệu mà không cần reload, nâng cao trải nghiệm người dùng và tối ưu hiệu suất với API mới của Web.

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.

Dark mode toggles: two states are enough

Lea Verou phản đối các giao diện chế độ sáng/tối có ba tùy chọn (sáng, tối, hệ thống) vì …

Minimal JS, modern CSS anchored product tours

Tạo một sản phẩm hướng dẫn tương tác bằng cách sử dụng CSS anchor positioning cùng với một Stimulus controller nhỏ, không cần thư viện nặng.

Là người viết mã cho ứng dụng web, bạn sẽ tìm hiểu cách tạo tour sản phẩm tương tác nhẹ nhàng mà không cần phụ thuộc vào các thư viện lớn, giúp tối ưu hiệu suất và giữ lại quyền kiểm soát hoàn toàn về thiết kế và hành vi.

Animating CSS border-image

Hình ảnh viền (border image) thường bị bỏ qua, nhưng hiệu ứng slice có thể trải rộng toàn bộ viền phần tử. Việc animate border image sẽ tạo ra những hiệu ứng đẹp mắt.

Là người viết mã, bạn nên đọc để khám phá cách tạo hiệu ứng thẩm mỹ và hiệu suất cao bằng CSS mà không cần phụ thuộc vào JavaScript, giúp tối ưu hóa giao diện và tăng tính tương tác cho dự án của mình.

Get Grid Information using pure CSS

Bằng vài dòng code CSS, bạn có thể lấy được số cột, số hàng và tọa độ của các item trong grid.

Lập trình viên nên đọc bài này để khám phá cách sử dụng CSS puro để tránh phụ thuộc vào JavaScript, giúp tối ưu hóa hiệu suất và giảm thiểu code phụ thuộc bên ngoài khi xử lý thông tin grid một cách đơn giản và hiệu quả.

HTML & CSS Error Statistics: We Validated the Top 5,000 Websites

Kiểm tra 5.000 website hàng đầu, 90,5% trong số 2.655 website có thể truy cập được vi phạm đặc tả HTML. Bài viết cung cấp bảng xếp hạng đầy đủ về mọi lỗi HTML cùng tần suất xuất hiện thực tế.

Lập trình viên nên đọc bài này để hiểu rõ về những lỗi HTML phổ biến nhất trên thực tế và cách tối ưu hóa mã của mình để đảm bảo hiệu suất, tính tương thích và tránh các vấn đề về SEO khi phát triển website.