Trình tạo thanh cuộn CSS

Thanh cuộn kiểu Chrome, Safari và Edge với nhóm phần tử giả ::-webkit-scrollbar: các quy tắc riêng biệt cho bản nhạc, ngón tay cái và trạng thái di chuột của ngón tay cái, cộng với chiều rộng chính xác theo pixel và bán kính đường viền ngón tay cái. Firefox hoàn toàn bỏ qua tất cả những điều đó và thay vào đó đọc hai thuộc tính tiêu chuẩn, chiều rộng thanh cuộn và màu thanh cuộn, sau này đã nhập thông số 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 mức trần khác nhau và hầu hết các trình tạo thanh cuộn đều lặng lẽ lấp đầy khoảng trống bằng cách chỉ hiển thị kết quả WebKit. Cái này thì không.

Đặt chiều rộng, màu rãnh, màu ngón tay cái, màu di chuột và bán kính góc ngón tay cái một lần và công cụ sẽ xây dựng hai bộ quy tắc từ cùng một đầu vào. Khối WebKit đặt phạm vi ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb và trạng thái :hover của nó ở 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ị — công cụ thực sự của chính trình duyệt chứ không phải lớp phủ mô phỏng. Khối Firefox đặt chiều rộng thanh cuộn và màu thanh cuộn trên hộp demo bên phải bằng cách sử dụng công cụ riêng của trình duyệt đó, đó là lý do tại sao hộp 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 riêng nó ở đó và công cụ này nói như vậy thay vì giả mạo giao diện Firefox bằng các pixel mượn.

Ánh xạ chiều rộng là ví dụ rõ ràng nhất về khoảng cách: chiều rộng thanh cuộn của Firefox chỉ chấp nhận các từ khóa tự động, mỏng hoặc không - không bao giờ có số pixel chính xác. Trình tạo này ánh xạ chiều rộng bạn đã chọn một cách trung thực (8px trở xuống sẽ mỏng, mọi thứ rộng hơn sẽ tự động) và hiển thị từ khóa kết quả bên cạnh đầu vào của bạn, thay vì phát minh ra kết quả Firefox hoàn hảo về pixel giả không tồn tại. Firefox cũng không có cách nào để đặt màu di chuột riêng biệt, bán kính đường viền ngón tay cái độc lập hoặc màu bản nhạc không chỉ đơn giản là giá trị thứ hai của màu thanh cuộn - đây là những hạn chế thực sự, 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 kết hợp và cả hai bộ quy tắc di chuyển cùng nhau, mỗi bộ quy tắc nằm dưới nhận xét riêng, sẵn sàng dán vào biểu định kiểu nguyên trạng. Mọi thứ hiển thị và cập nhật trong trình duyệt của riêng bạn khi bạn kéo các nút điều khiển — không tải lên, không tài khoản, không cần quay vòng máy chủ và nó tiếp tục hoạt động ngoại tuyến sau khi trang được tải.