Firefox 91 đã được phát hành. Bạn có biết điều đó có nghĩa gì không? Nó có nghĩa là bạn không còn có thể tắt giao diện Proton qua about:config nữa. Tại sao điều này quan trọng, bạn hỏi? Vì Proton tệ. Cho những ai bối rối trước sự gay gắt của thông điệp sớm như vậy, hãy tóm tắt lại. Một thời gian trước, Mozilla thông báo sẽ thay đổi - lần nữa - giao diện Firefox. Lần này gọi là Proton.
Tôi đã cho bạn thấy cái này trông như thế nào - và nó không đẹp. Nhưng rồi, trở lại Firefox 89, Proton trở thành chính thức, bạn có thể chỉ cần bật tắt nó và tiếp tục cuộc sống thân yêu, tận hưởng năng suất và hiệu quả. Bây giờ, tuy nhiên, tùy chọn này không còn. Vì vậy nếu bạn không muốn chịu đựng những thứ vô dụng, độ tương phản thấp, hipsterology, tôi sẽ chỉ cho bạn tập các thay đổi để giảm thiểu hoặc loại bỏ các khía cạnh vô dụng của Proton, và quay lại duyệt web lành mạnh. Theo chân tôi.
Vấn đề đang gặp
Chúng ta đã nói về điều này, nhưng cần nói thêm. Nhìn cái thứ vô nghĩa, xám trên xám đó. Tab bắt đầu ở đâu? Kết thúc ở đâu? Nó có phải là tab không? Nhớ những tab màu người ta dùng trong cái thư mục lớn cũ những năm 80 và 90, để đánh dấu trang và những thứ? Bây giờ hãy tưởng tượng tab vô hình! Duh! ErGoNoMiCs!
Nguyên liệu
Có khá nhiều điều bạn có thể làm. Nhưng hãy bắt đầu chậm rãi. Đầu tiên, bạn cần hiểu bản chất công việc hôm nay. Vì các tweak cấu hình tích hợp không còn khả thi, chúng ta cần đi sâu. Bạn có thể thay đổi giao diện Firefox bằng một bộ quy tắc CSS tùy chỉnh, giống như chỉnh sửa trang web - thực tế, hầu hết trình duyệt hiện đại định dạng chính chúng như trang web. Tôi đã chỉ cho bạn cách làm này trong hướng dẫn Plasma & HD, hướng dẫn pinned tabs và hướng dẫn làm cho thanh URL trông hợp lý - đó là cơ sở cho công việc hôm nay.
Đầu tiên, bật tùy chọn sử dụng CSS tùy chỉnh do người dùng tạo. Mở tab mới, gõ about:config, sau đó tìm tùy chọn sau:
toolkit.legacyUserProfileCustomizations.stylesheets
Chuyển cài đặt này sang true. Sau đó, đến thư mục hồ sơ Firefox. Trong Windows, thường là:
C:\Users\"username"\AppData\Roaming\Mozilla\Firefox\"profile"
Trong Linux, thường là:
/home/"user"/.mozilla/firefox/"profile"
Trong thư mục này, tạo (nếu chưa tồn tại) thư mục tên chrome (chữ thường). Bên trong thư mục chrome, tạo (nếu chưa có) tệp văn bản rỗng tên userChrome.css (chú ý chữ hoa/thường). Chúng ta sẽ thêm một đống văn bản vào tệp này.
Quy tắc Proton
Bây giờ, chúng ta cần thêm một số quy tắc sẽ thay đổi hành vi Firefox. Phần tử gây phiền toái nhất là hành vi tab mới, với tab quá lớn, độ tương phản nhạt, và gần như không có sự phân tách giữa tab hoạt động, tab không hoạt động và dải thanh tab nền. Đây là nơi mọi thứ trở nên棘手, vì không có một bộ quy tắc CSS duy nhất bạn chỉ cần dùng. Một số lựa chọn:
- Hướng dẫn AskVG về khôi phục giao diện & UI cổ điển - hướng dẫn đơn giản nhất, và cơ sở cho công việc của tôi ở đây.
- Dự án GitHub khôi phục Proton về Photon compact.
- Dự án GitHub sửa đổi một số khía cạnh Proton.
- Dự án GitHub dùng giao diện cổ điển (chứa nhiều hơn Proton).
- Firefox 89 Proton UI interactive styler - cho phép thay đổi mọi thứ + xem trước trực tiếp.
Hãy bắt đầu với hướng dẫn AskVG. Trong userChrome.css, thêm mã sau:
.titlebar-color {
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
.tab-background {
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup > menu, menupopup > menuitem {
padding-block: 2px !important;
}
:root {
--arrowpanel-menuitem-padding: 2px !important;
}
Điều này sẽ cho giao diện khá ổn - tab hoạt động sẽ có đường viền, tab nền sẽ không. Tuy nhiên, bạn sẽ có độ tương phản tốt hơn Proton chuẩn. Tôi thấy điều này đầy đủ, nhưng sau đó quyết định làm thêm vài sửa đổi.
Đường viền tab nền
Nếu bạn muốn tab nền cũng có đường viền, bạn có thể thêm:
.tabbrowser-tab:not([selected="true"]) > .tab-stack > .tab-background {
border: 1px solid rgba(130, 130, 130, 0.5) !important;
}
Điều này sẽ đặt tab nền với đường viền xám nhạt 1px solid ở 50% độ trong suốt. Bạn có thể dùng bất kỳ màu hoặc giá trị trong suốt nào bạn thích. Cũng lưu ý rằng mệnh đề này rất tương tự như một mệnh đề được định nghĩa trong đoạn mã AskVG, và bạn thực sự có thể kết hợp các quy tắc để tạo phần mã CSS nhỏ gọn hơn. Tuy nhiên, nếu bạn không chắc chắn phải làm gì, chỉ cần thêm các dòng bổ sung riêng biệt. Không có xung đột, vì các quy tắc được xếp lớp.
Đường viền tab tiền cảnh
Tương tự, bạn có thể tinh chỉnh tab hoạt động nữa, cho OCD:
.tabbrowser-tab[selected="true"] .tab-background {
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
}
Màu nhấn tab
Bạn có thể làm cho tab hoạt động nổi bật và dễ thấy, để phân biệt với các tab khác:
.tabbrowser-tab[selected="true"] .tab-background {
border-top: 3px solid #3daee9 !important;
Bạn chỉ cần thêm dòng bổ sung vào định nghĩa trên, nếu thích. Trong ví dụ của tôi, tôi đặt màu nhấn khớp với màu scheme desktop. Mã màu #3daee9 là màu nhấn được Plasma desktop dùng trong ví dụ này. Bạn có thể dùng màu nhấn hệ thống - như được định nghĩa trong quy tắc CSS titlebar:
border-top: 3px solid -moz-accent-color-foreground !important;
Chiều cao thanh tab
Nếu bạn muốn tab nhỏ hơn - tương tự chế độ compact cũ, bạn có thể thêm các quy tắc sau:
.toolbar-items, .tabbrowser-tab {
max-height: 38px;
}
:root[uidensity=touch] .toolbar-items, .tabbrowser-tab {
max-height: 45px;
}
Bạn có thể sửa giá trị thành bất cứ gì bạn thích, ví dụ max-height: 28px; hoặc tương tự. Mệnh đề touch là tùy chọn. Chọn bất kỳ mật độ (chiều cao) nào phù hợp với bạn.
Màu tab container
Firefox 91 cũng làm tab container trông nhạt nhòa và khó phân biệt với tab thường. Vì vậy tôi quyết định thêm chút màu [sic]. Có nhiều lựa chọn, và đến lúc này, bạn nên cảm thấy thoải mái hơn với việc thực hiện các thay đổi cần thiết. Tôi chọn tab được tô màu đầy đủ khớp với màu container, cộng với đường viền đẹp, để quỷ OCD của tôi không cần thức giấc:
.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;
}
Mỗi tab dùng màu nhận dạng riêng (được định nghĩa bởi mệnh đề var), đường viền dưới khớp màu nhận dạng để tab hòa quyện đẹp vào thanh tab, và đường viền bên giống tab thường. Tôi thử nhiều lựa chọn. Ví dụ, tôi thử cả opacity 20% và 80%. Tóm lại:
Và bây giờ, Firefox của bạn trông tốt hơn rất nhiều! Ví dụ điên rồ khác:
Thẩm mỹ thêm
Còn rất nhiều thứ bạn có thể làm. Tôi thậm chí tinh chỉnh nút zoom trong thanh địa chỉ, vì padding bị lệch một chút, và chúng ta không thể có pixel lẻ, phải không. Nhưng chúng ta nên kết thúc ở đây, trên nốt cao.
#urlbar-zoom-button {
padding-top: 0px !important;
}
Kết luận
Xong. Hôm nay, tôi đã chỉ cho bạn cách đảo ngược một số thay đổi UI "hiện đại" vô dụng được đưa vào Firefox 91. Solange Firefox có ghi đè CSS tùy chỉnh, vẫn còn hy vọng. Việc phải chiến đấu với phần mềm của mình không vui, nhưng ít nhất bạn có tùy chọn loại bỏ những thứ low-IQ và duy trì năng suất, hiệu quả. Với các quy tắc CSS nêu trên, Firefox 91, và quan trọng hơn, Firefox 91 ESR, có thể trông tương đối ổn và dùng được trong tương lai có thể thấy trước.
Sẽ xảy ra gì một hai năm tới? Ai biết. Tôi vẫn tin Firefox nên là trình duyệt mặc định của bạn, dù toàn bộ thứ ngốc nghếch được đống vào nó bởi đội Mozilla, nhưng tôi không chắc mình có thể duy trì lập trường đó bao lâu. Tại một thời điểm, Firefox có thể đạt mức độ xấu xí và vô dụng ngang ngửa đối thủ. Tôi không biết tôi sẽ làm gì lúc đó, vì tôi không muốn dùng Internet khi trình duyệt dựa trên Chromium là lựa chọn duy nhất. Nghỉ Web? Đó có thể là giải pháp. Vâng, chúng ta không cần đối mặt với lựa chọn khó khăn hôm nay. CSS tweak xong. Trí tuệ 1, hipsterology 0. Kết thúc.
Chúc vui.