Tôi sử dụng Firefox làm trình duyệt chính. Thực tế. Tôi định dùng cho đến khi một trong hai không còn. Thực tế. Nhưng tôi thấy kiểu giao diện mới vô nghĩa. Kiểu đó gọi là Proton, và nó xuất hiện trong Firefox vài tháng trước. Một thời gian, bạn có thể tắt nó bằng một công tắc, nhưng bây giờ, không còn công tắc nào nữa.
Để lấy lại bố cục UI hợp lý, hiệu quả, tôi đã phải can thiệp thủ công vào Firefox thông qua một loạt thay đổi tệp CSS. Cuộc phiêu lưu thú vị này được chi tiết trong các hướng dẫn của tôi về cách vô hiệu hóa Proton. Tôi làm cho các tab hiển thị rõ hơn, thêm màu cho tab container, sửa thanh URL, và nhiều hơn nữa. Cho đến nay mọi thứ tốt, nhưng rồi, ở phiên bản 97, vừa phát hành gần đây, tôi nhận thấy tab container của tôi hơi bị lỗi. Các quy tắc CSS không còn hoạt động tốt như trước. Bài viết này trình bày một tập hợp các sửa nhỏ cần thiết để giao diện đã chỉnh sửa của tôi trông đẹp lại. Nếu bạn đã dùng các tweak chống Proton của tôi, thì điều này sẽ hữu ích.
Vấn đề chi tiết
Đây là điều xảy ra trong Firefox 97. Hai vấn đề. Đối với tab container đang hoạt động, đường viền trên (top-border highlight) bị che một phần, làm khó thấy tab đang hoạt động. Khu vực màu nền của tab cũng lòi ra một chút phía trên thanh tab. Vấn đề thứ hai là, đối với các tab không hoạt động, khu vực nền lòi ra khá nhiều, trông thô kệch.
Tôi hoàn toàn nhận thức rằng đây là vấn đề tự gây ra, vì tôi đã thử giải quyết cái gì đó trong Firefox, mà tôi đã làm được, nhưng bây giờ cóartifact (lỗi hiển thị) như kết quả. Nhưng không sao, vì đó là cái giá tôi sẵn sàng trả để có UI bình thường, với độ tương phản tốt, rõ ràng và phân tách tab dễ dàng. Tôi sẽ không lặp lại lời than phiền về Proton nữa.
Giải pháp
Lúc này, CSS của tôi cho tab container như sau:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
border-bottom: var(--identity-tab-color) !important;
border-top: 3px solid red !important;
opacity: 0.8 !important;
}
Các sửa chữa như sau:
.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
border-bottom: var(--identity-tab-color) !important;
opacity: 0.8 !important;
}
.tabbrowser-tab[usercontextid] .tab-background {
border-top: 3px solid red !important;
padding-top: 3px !important;
}
.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
border-top: 1px solid rgba(130, 130, 130, 0.5) !important;
padding-top: 3px !important;
}
Đầu tiên, tôi chia mã thành عدة khối, vì chúng ta cần tweak khác nhau cho đường viền trên của tab container hoạt động và không hoạt động. Để loại bỏ padding xấu xí cho tab hoạt động, chúng ta chỉ cần thêm padding 3px.
Đối với tab không hoạt động, được xác định bởi:
.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
Chúng ta cần thay đổi đường viền trên để giống hệt các tab thường (xem hai hướng dẫn trước của tôi) nhưng cũng thêm khai báo padding. Điều này sẽ làm cho nền tab "ngắn lại", tức là không lòi ra phía trên thanh tab, và đường viền sẽ khớp với tất cả các tab khác, cho giao diện đồng nhất đẹp mắt.
Và đó là tất cả!
Kết luận
Tôi nhận ra rằng có vấn đề về tính nhất quán và chi phí bảo trì cho các tweak của tôi. 毕竟, tôi không thể dự đoán được mọi thay đổi nhỏ trong UI Firefox, và có thể sẽ có những lỗi nhỏ xảy raoccasionally. Nhưng những lỗi đó sẽ nhỏ, và tôi sẽ có giải pháp nhanh, trong khi dùng trình duyệt với giao diện dưới tối ưu suốt ngày là không thể chấp nhận. Đây không phải tình huống vui vẻ, nhưng dù sao, Firefox vẫn là trình duyệt tốt nhất, và bạn nên dùng nó, vì lý do thực tế và triết lý, bất chấp cái gọi là hipsterology.
Dù sao, nếu bạn là nerd, vì thật ra nếu không bạn cũng không ở đây, và bạn thích mọi thứ gọn gàng, sạch, dễ đọc, công thái học, và hiệu quả, thì bạn đã thay đổi giao diện Firefox từ phiên bản 91 trở đi. Bạn thậm chí có thể đang dùng một số tweak của tôi. Nếu vậy, bạn có một vòng làm mới, phòng khi gặp một vài rắc rối nhỏ với Firefox 97. Đó là tất cả. Giữ gìn, và hẹn gặp lại sớm.
Chúc vui.