Wiggly/Wavy Input Range Slider II

An animated radial gradient mask over text in CSS

Bài viết hướng dẫn tạo hiệu ứng mặt nạ (mask) gradient xuyên tâm hoạt ảnh trên văn bản bằng CSS, sử dụng thuộc tính mask kết hợp repeating-radial-gradient, điều chỉnh tâm gradient quanh một chữ cái cụ thể, và tận dụng @property (CSS Houdini) để làm thuộc tính tùy chỉnh có thể hoạt ảnh. Ngoài ra, bài viết cũng đề cập đến sự tương thích trình duyệt không đồng nhất trên Firefox và Safari, cùng các mẹo điều chỉnh độ dày và khoảng cách sọc thông qua thuộc tính CSS tùy chỉnh.

Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng ánh sáng động từ gradient bán kính trên văn bản bằng CSS, giúp nâng cao tính tương tác và thẩm mỹ cho giao diện web mà không cần JavaScript.

Progressively enhancing Grid Lanes

Grid Lanes là tính năng CSS mới tương tự CSS Grid thông thường, hỗ trợ nâng cấp dần bằng cách lặp thuộc tính display. Tuy nhiên, nó có thể phá vỡ thứ tự focus bàn phím và không truy cập được nếu thiếu hỗ trợ Reading Flow. Cách đề xuất là dùng @supports để kích hoạt Grid Lanes chỉ khi cả grid-lanes và reading-flow đều hỗ trợ, tránh lỗi trên Safari. Phương án dự phòng flow-tolerance: infinite có thể giúp nhưng vẫn cần kiểm tra thủ công thứ tự focus.

Lập trình viên nên đọc bài này để hiểu cách sử dụng Grid Lanes một cách an toàn và hiệu quả, tránh rủi ro về tính khả dụng (accessibility) và sự tương thích với các trình duyệt hiện đại như Safari, mà không cần phải phụ thuộc vào tính năng chưa hoàn thiện này.

Prop For That

Thư viện Prop For That của Adam Argyle cung cấp các CSS custom properties động, cho phép truy cập vào những thuộc tính CSS thông thường không thể truy xuất như vị trí con trỏ, tốc độ cuộn, trạng thái form hay thời gian hiện tại. Nhà phát triển chỉ cần thêm thuộc tính data vào HTML, sau đó sử dụng trực tiếp các biến CSS này trong stylesheet mà không cần viết JavaScript.

Lập trình viên nên đọc bài này để khám phá cách Prop For That giúp tối ưu hóa giao diện người dùng bằng cách kết nối trực tiếp CSS với dữ liệu động từ HTML mà không cần JavaScript, mở rộng khả năng tùy biến UI một cách đơn giản và hiệu quả.

The Shifting Line Between CSS States and JavaScript Events

CSS pseudo-classes ngày càng tương đồng với JavaScript event listeners, giúp xử lý trạng thái UI mà không cần viết JS. Bài viết so sánh các pseudo-classes phổ biến (:hover, :focus, :valid...) với sự kiện JavaScript tương ứng, đồng thời giới thiệu spec event-trigger mới (chưa được hỗ trợ) cho phép CSS lắng nghe sự kiện trực tiếp để kích hoạt animation.

Những kiến thức về sự tương đồng giữa các trạng thái CSS và sự kiện JavaScript giúp lập trình viên tối ưu hóa mã, giảm bớt sự phụ thuộc vào JavaScript và khám phá các tính năng tương lai của CSS để làm UI đẹp hơn, nhanh hơn và hiệu suất cao hơn.

Fluid Typography with progress() – Master.dev Blog

Sử dụng phương pháp typography linh hoạt (fluid typography) với clamp() có nhược điểm tiềm ẩn khi chuyển đổi breakpoint sang rem, khiến kích thước văn bản thu nhỏ nếu người dùng tăng kích thước font gốc. Giải pháp là dùng hàm progress() mới trong CSS để ánh xạ phạm vi (range mapping) với đơn vị hỗn hợp, trả về giá trị 0–1 không đơn vị, giúp phối hợp giữa breakpoint pixel và font-size rem. Bài viết hướng dẫn xây dựng thang typography toàn diện bằng CSS thuần, Sass hoặc custom properties, đồng thời giới thiệu các tính năng CSS tương lai như @function và calc-mix(). Lưu ý: progress() chưa được hỗ trợ trên Firefox.

Lập trình viên nên đọc bài này để khám phá cách sử dụng progress() trong CSS để tạo ra font size động (fluid typography) mà không bị phụ thuộc vào font size cơ sở của người dùng, giúp tối ưu hóa trải nghiệm UI cho mọi thiết bị và font size cá nhân.

Modern Web Guidance – Master.dev Blog

Google ra mắt công cụ Modern Web Guidance tại Google I/O, gồm các tệp Markdown lồng nhau giúp AI tạo mã HTML, CSS và JavaScript chính xác hơn bằng cách cập nhật xu hướng mới nhất. Tài liệu hướng dẫn chi tiết về các tính năng như CSS animations, yêu cầu bắt buộc như overlay hay allow-discrete, đồng thời nhắc nhở nhà phát triển không nên tin hoàn toàn vào AI mà cần hiểu rõ mã mình viết.

Là người viết mã, hiểu rõ các tiêu chuẩn mới nhất như Modern Web Guidance giúp bạn tránh lỗi kỹ thuật, tối ưu hóa hiệu suất và đảm bảo code phù hợp với các tiêu chuẩn hiện đại mà AI không thể thay thế được.

Wiggly/Wavy Input Range Slider

Kỹ thuật CSS thuần tạo thanh trượt (range slider) dạng lượn sóng bằng phần tử HTML input …