Trình tạo CSS Thanh cuộn

Chrome, Safari và Edge tạo kiểu thanh cuộn bằng họ pseudo-element ::-webkit-scrollbar: các quy tắc riêng cho track, tay cuộn và trạng thái :hover của tay cuộn, cùng với độ rộng pixel chính xác và border-radius của tay cuộn. Firefox bỏ qua hoàn toàn tất cả những thứ đó và thay vào đó đọc hai thuộc tính chuẩn, scrollbar-width và scrollbar-color, sau này đã được đưa vào đặc tả CSS Scrollbars. Đây không phải là hai phương ngữ của cùng một tính năng — chúng là hai bộ tính năng khác nhau với giới hạn khác nhau, và hầu hết các trình tạo thanh cuộn lặng lẽ che lấp khoảng trống này bằng cách chỉ hiển thị kết quả WebKit. Công cụ này thì không.

Đặt độ rộng, màu track, màu tay cuộn, màu khi rê chuột và bo góc tay cuộn một lần, và công cụ sẽ xây dựng hai bộ quy tắc từ cùng các đầu vào đó. Khối WebKit giới hạn ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb và trạng thái :hover của nó trong hộp demo bên trái, vì vậy những gì bạn thấy ở đó chính xác là những gì Chrome, Safari và Edge hiển thị — engine thật của chính trình duyệt, không phải lớp phủ giả lập. Khối Firefox đặt scrollbar-width và scrollbar-color trên hộp demo bên phải bằng chính engine của trình duyệt đó, đó là lý do hộp này chỉ trông khác khi trang này thực sự được mở trong Firefox; trong trình duyệt WebKit, nó hiển thị thanh cuộn mặc định của chính nó ở đó, và công cụ nói rõ điều đó thay vì giả vờ tạo vẻ ngoài Firefox bằng pixel mượn.

Ánh xạ độ rộng là ví dụ rõ ràng nhất về khoảng trống này: scrollbar-width của Firefox chỉ chấp nhận các từ khóa auto, thin hoặc none — không bao giờ là một con số pixel chính xác. Trình tạo này ánh xạ độ rộng bạn chọn một cách trung thực (8px trở xuống trở thành thin, bất kỳ giá trị nào lớn hơn trở thành auto) và hiển thị từ khóa kết quả bên cạnh dữ liệu nhập của bạn, thay vì bịa ra một kết quả Firefox pixel-perfect giả tạo không tồn tại. Firefox cũng không có cách nào để đặt màu khi rê chuột riêng biệt, border-radius độc lập cho tay cuộn, hay màu track không đơn giản chỉ là giá trị thứ hai của scrollbar-color — đây là những hạn chế thực, vĩnh viễn của nền tảng, không phải là thiếu sót trong công cụ này.

Sao chép khối CSS đã gộp và cả hai bộ quy tắc đi cùng nhau, mỗi bộ nằm dưới chú thích riêng, sẵn sàng dán vào stylesheet là dùng được. Mọi thứ hiển thị và cập nhật trong chính trình duyệt của bạn khi bạn kéo các điều khiển — không tải lên, không tài khoản, không vòng đi-về máy chủ, và vẫn hoạt động ngoại tuyến sau khi trang đã tải.