Cách thay đổi màu thanh địa chỉ trong Firefox 143
Cập nhật:ngày 29 tháng 9 năm 2025
Với mỗi bản cập nhật Firefox, Mozilla giới thiệu một số thay đổi về mặt thẩm mỹ, dù nhỏ hay lớn. Phần lớn, trong thập kỷ qua hoặc thậm chí lâu hơn, những thay đổi này chủ yếu mang tính phản công thái học. Điều này xảy ra với tất cả các trình duyệt, với cái gọi là giao diện "hiện đại", nhưng vì tôi chủ yếu sử dụng Firefox nên đây là nơi tôi tập trung vào. Thật vậy, tôi đã nhiều lần chỉ cho bạn cách điều chỉnh bố cục giao diện người dùng để tối ưu hóa độ tương phản và khả năng sử dụng trong kỷ nguyên hiện đại của những giao diện giả tối giản buồn tẻ, phẳng, vô hồn vốn không có chỗ trên máy tính để bàn.
Đến Firefox 143, tweak thanh địa chỉ không còn hoạt động nữa. Cụ thể là tôi đã thay đổi nền xám vô nghĩa thành màu trắng để có độ tương phản cao hơn giữa văn bản URL và khung vẽ mà nó được viết trên đó. Toàn bộ màu xám trên màu xám vô nghĩa chính xác là như vậy. Nhưng than ôi, Mozilla đã quyết định làm cho cuộc sống của tôi trở nên khó khăn hơn và dựa trên các email trong hộp thư đến của tôi, của bạn cũng vậy. Được rồi, chúng tôi sẽ khắc phục điều này. Hãy để tôi chỉ cho bạn đoạn mã bạn cần đưa vào CSS để điều chỉnh màu nền của thanh địa chỉ theo bất kỳ thứ gì bạn thích. Theo sau tôi.
Từ định danh đến lớp
Trước đây, như đã nêu trong phần hướng dẫn ở trên, phần khai báo trong tệp userChrome.css để thay đổi màu nền là:
#urlbar-nền {
màu nền:trắng !quan trọng;
đường viền:rgba rắn 1px(10, 132, 255, 0.3) !quan trọng;
Xin lưu ý việc lựa chọn màu nền cụ thể, màu đường viền và độ dày hoàn toàn là của tôi. Bạn có thể chọn bất kỳ cài đặt nào khác mà bạn thích. Vì mục đích của hướng dẫn này, ví dụ này là như vậy.
Chà, tôi phải kích hoạt tính năng gỡ lỗi trong Firefox, khởi chạy hộp công cụ của trình duyệt và kiểm tra các thành phần khác nhau để xem điều gì đã thay đổi. Hóa ra, sự thay đổi tuy nhỏ nhưng có ý nghĩa. Mozilla đã biến các khai báo thanh url thành một lớp. Vì vậy, tất cả những gì bạn cần làm là:
.urlbar-nền {
nền:trắng !quan trọng;
đường viền:rgba rắn 1px(130, 130, 130, 0,5) !quan trọng;
Về cơ bản, thay thế # bằng . đối với điều này và/hoặc bất kỳ khai báo nào khác liên quan đến thanh url mà bạn có thể có trong tệp CSS của mình. Khi bạn khởi chạy lại trình duyệt, các chỉnh sửa mong muốn của bạn sẽ có hiệu lực. Và đó là tất cả những gì cần làm để loại bỏ nền xám ngu ngốc.
Nhìn vào ví dụ trước đây và bây giờ. So sánh văn bản với độ tương phản của nền. Chuẩn rồi. Và dòng chữ màu xám đó cũng thật ngu ngốc. Và với dòng chữ màu xám nhạt trên nền màu xám, bạn đã phạm tội nặng về công thái học. Đúng vậy.
Kết luận
Ngày xửa ngày xưa, Mozilla đã cố gắng hết sức để làm cho URL trông giống một phần. Sau đó, sao chép Google, họ bắt đầu loại bỏ những thông tin hữu ích. Tiền tố giao thức, màu của ổ khóa chứng chỉ, màu văn bản và bây giờ là cả nền. Ý tưởng là để "ẩn" trường địa chỉ này khỏi loài vượn thông thường, vì loài vượn thông thường không hiểu Internet. Điều này không có tác dụng giáo dục hay giúp đỡ đại chúng mà còn phá hoại mọi nền tảng khoa học đã được thiết lập về khả năng sử dụng.
Nếu bạn không thích sử dụng trình duyệt của mình ở chế độ đơn sắc trầm sang trọng, bạn có thể thêm gia vị cho mọi thứ bằng màu sắc và cải thiện trải nghiệm của mình. Độ tương phản tốt hơn, ít mỏi mắt hơn, chú ý đến từng chi tiết hơn, nó phải như thế nào. May mắn thay, Firefox thực sự cho phép bạn làm điều này. Bạn có thể chỉnh sửa giao diện người dùng. Đây là lý do tại sao, bất chấp tất cả những điều vô nghĩa nhất này, cộng với thực tế là nó cho phép bạn sử dụng các tiện ích mở rộng Manifest V2 tuyệt vời như UBlock Origin (UBO), Firefox sẽ là trình duyệt chính và có lẽ là duy nhất của bạn, nếu có thể. Bất chấp tất cả những thất bại của nó và rất nhiều lỗi như vậy, đây vẫn là một trình duyệt thực sự ổn hiện có. Vì vậy, bạn đã được cảnh báo. Và bạn cũng biết cách sửa màu thanh địa chỉ. Nhiệm vụ đã hoàn thành.
Chúc mừng.