Ngày 27/10/2026, Mozilla phát hành Firefox 159 và bật mặc định tính năng scroll-driven animations — animation CSS chạy theo vị trí cuộn trang thay vì theo thời gian. Vì Chrome đã có tính năng này từ bản 115 và Safari từ bản 26, Firefox là trình duyệt lớn cuối cùng bổ sung nó, nên lập trình viên giờ có thể dùng hiệu ứng theo cuộn cho mọi trình duyệt mà không cần cờ thử nghiệm.

Vì sao tin này đáng đọc

Trước đây, thanh tiến trình đọc bài, ảnh hiện dần hay parallax thường phải viết JavaScript: lắng nghe sự kiện scroll, tính vị trí phần tử rồi cập nhật style bằng tay. Cách đó nhiều code và dễ làm trang giật vì mọi tính toán chạy trên luồng chính. Khi cả ba engine lớn đều hỗ trợ, bạn không còn phải duy trì hai lối triển khai song song.

Scroll-driven animations là gì

Thay vì gắn animation với đồng hồ, bạn gắn nó với một timeline cuộn. Có hai loại chính:

  • Scroll timeline: tiến trình bám theo vị trí cuộn của một container, ví dụ thanh tiến trình đầu trang đầy dần khi bạn cuộn xuống cuối bài.
  • View timeline: tiến trình bám theo mức độ một phần tử đi vào và ra khỏi viewport, ví dụ một ảnh mờ dần thành rõ khi trượt vào khung nhìn.

Firefox 159 bổ sung các thuộc tính CSS đi kèm: animation-timeline, scroll-timeline, view-timeline và animation-range, cùng hai interface JavaScript ScrollTimeline và ViewTimeline cho trường hợp cần điều khiển bằng code.

Những điểm mới đáng chú ý khác

  • Scoped custom element registries: một cây shadow có thể tạo registry riêng bằng CustomElementRegistry(), để nhiều web component cùng tên thẻ chung sống trên một trang mà không xung đột.
  • Sanitizer API làm sạch HTML ngay lúc phân tích cú pháp, nên constructor của custom element bị loại sẽ không chạy.
  • WebGL bổ sung EXT_clip_control và EXT_texture_mirror_clamp_to_edge; cú pháp masonry cũ của grid bị loại bỏ, thay bằng grid lanes layout.
  • Về phía người dùng: macOS dùng hộp thoại chia sẻ gốc của hệ thống và mật khẩu đã lưu hiện sẵn trong sidebar.
  • Cùng đợt, Mozilla cập nhật các nhánh ESR, và các bản tin tổng hợp ghi nhận khoảng 167 bản vá bảo mật đi kèm Firefox 159.

Điều này có ý nghĩa gì với bạn

Nếu dự án của bạn đang dùng JavaScript chỉ để làm thanh tiến trình, hiệu ứng hiện dần hay parallax đơn giản, đây là lúc cân nhắc chuyển sang CSS thuần: ít code hơn và trình duyệt tự tối ưu phần nặng nhọc. Tuy vậy, đừng vội xóa fallback: người dùng Firefox bản cũ vẫn cần trải nghiệm chấp nhận được, nên hãy bọc hiệu ứng trong @supports để nội dung vẫn hiển thị bình thường khi trình duyệt không hỗ trợ. Và luôn tôn trọng prefers-reduced-motion, vì hiệu ứng theo cuộn có thể gây khó chịu cho người nhạy cảm với chuyển động.

Bài viết liên quan

Câu hỏi thường gặp

Scroll-driven animations khác animation CSS thường ở điểm nào?

Animation thường chạy theo thời gian: hết số giây đã đặt thì dừng hoặc lặp. Scroll-driven animations chạy theo vị trí cuộn: cuộn tới đâu, animation tiến tới đó, cuộn ngược thì animation chạy ngược.

Có cần JavaScript để dùng tính năng này không?

Không, với các hiệu ứng phổ biến thì chỉ cần CSS thuần. JavaScript chỉ cần khi muốn điều khiển timeline bằng code, qua ScrollTimeline hoặc ViewTimeline.

Trình duyệt cũ không hỗ trợ thì sao?

Dùng @supports để kiểm tra animation-timeline trước khi áp hiệu ứng, và đảm bảo nội dung vẫn hiển thị đầy đủ khi không có animation. Đừng giấu nội dung phía sau hiệu ứng, và hãy tôn trọng prefers-reduced-motion của người dùng.

💬 Tin này ảnh hưởng tới dự án của bạn thế nào? Chia sẻ góc nhìn của bạn trong phần bình luận — mình đọc hết và sẽ tổng hợp những ý hay nhất.

Nguồn tham khảo