Firefox 91 đã được phát hành. Bạn có biết nó có nghĩa là gì không? Điều đó có nghĩa là bạn không còn có thể tắt giao diện Proton thông qua about:config nữa. Tại sao vấn đề này, bạn yêu cầu? Bởi vì Proton hút. Đối với những người bối rối về mức độ kịch liệt trong thông điệp của tôi ngay từ đầu trong bài đánh giá, hãy tóm tắt lại. Cách đây không lâu, Mozilla đã thông báo rằng họ sẽ thay đổi - một lần nữa - giao diện người dùng Firefox. Khoảng thời gian này, nó được gọi là Proton.
Tôi đã cho bạn thấy thứ này trông như thế nào - và nó không đẹp. Nhưng sau đó, trở lại Firefox 89, Proton đã trở thành chính thức, bạn có thể chỉ cần tắt nó đi và tiếp tục cuộc sống thân yêu của mình, tận hưởng năng suất và hiệu quả. Tuy nhiên, bây giờ, đây không còn là một lựa chọn nữa. Vì vậy, nếu bạn không muốn chịu đựng những kiến thức vô bổ, có độ tương phản thấp, tôi sẽ chỉ cho bạn tập hợp các thay đổi mà bạn có thể sử dụng để giảm thiểu hoặc loại bỏ các khía cạnh vô ích của Proton và quay lại trình duyệt lành mạnh. Theo tôi.
Vấn đề hiện tại
Chúng ta đã nói về điều này, nhưng chúng ta cần nói thêm. Hãy nhìn vào thứ vô dụng, màu xám trên màu xám vô nghĩa. Một tab bắt đầu từ đâu? Nó kết thúc ở đâu? Nó thậm chí là một tab? Hãy nhớ những tab màu mà mọi người đã sử dụng trong các thư mục lớn cũ của chúng vào những năm 80 và 90, để đánh dấu các trang và những thứ khác? Bây giờ hãy tưởng tượng các tab vô hình! Tât nhiên! ErGoNoMiC!
Thành phần
Có khá nhiều điều bạn có thể làm. Nhưng hãy bắt đầu từ từ. Đầu tiên, bạn cần hiểu bản chất của công việc ngày nay. Vì các tinh chỉnh cấu hình tích hợp không còn khả thi nên chúng ta cần đi sâu. Bạn có thể thay đổi giao diện của Firefox bằng cách sử dụng một bộ quy tắc CSS tùy chỉnh, giống như người ta sẽ chỉnh sửa một trang Web - thực tế, hầu hết các trình duyệt hiện đại đều có phong cách giống như các trang Web. Tôi đã chỉ cho bạn cách thực hiện việc này trong hướng dẫn về Plasma &HD, hướng dẫn về tab được ghim và hướng dẫn về cách làm cho thanh URL trông lành mạnh - đó là cơ sở cho công việc của chúng tôi ngày hôm nay.
Trước tiên, hãy bật các tùy chọn để sử dụng ghi đè CSS tùy chỉnh do người dùng tạo. Mở một tab mới, nhập about:config, sau đó tìm kiếm tùy chọn sau:
toolkit.legacyUserProfileCustomizations.stylesheets
Chuyển cài đặt này thành true. Sau đó, vào thư mục hồ sơ Firefox của bạn. Trong Windows, thông thường:
C:\Users\"tên người dùng"\AppData\Roaming\Mozilla\Firefox\"hồ sơ"
Và trong Linux, điển hình là:
/home/"user"/.mozilla/firefox/"profile"
Trong thư mục này, tạo (nếu chưa có) thư mục có tên chrome (chữ thường). Bên trong thư mục chrome, tạo (nếu nó không tồn tại) một tệp văn bản trống có tên userChrome.css (lưu ý chữ thường/chữ hoa). Chúng tôi sẽ thêm một loạt 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 của Firefox. Yếu tố gây khó chịu nhất là hành vi tab mới, với các tab quá lớn, độ tương phản nhợt nhạt và hầu như không có sự tách biệt giữa các tab đang hoạt động và không hoạt động cũng như dải thanh tab nền. Đây là lúc mọi thứ trở nên phức tạp, bởi vì không có một bộ quy tắc CSS dứt khoát nào mà bạn có thể sử dụng. Một số tùy chọn:
- Hướng dẫn AskVG về cách khôi phục giao diện &giao diện người dùng cổ điển - hướng dẫn đơn giản nhất và là cơ sở cho công việc của tôi tại đây.
- Dự án GitHub để hoàn nguyên Proton thành Photon nhỏ gọn.
- Dự án GitHub để sửa đổi một số khía cạnh của Proton.
- Dự án GitHub sử dụng giao diện cổ điển (chứa nhiều thứ hơn Proton).
- Trình tạo kiểu tương tác giao diện người dùng Firefox 89 Proton - cho phép bạn 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, hãy thêm đoạn mã sau:
.titlebar-color {
color:-moz-accent-color-foreground;
màu nền:-moz-accent-color;
}
.tab-background {
bán kính đường viền:0px 0px !quan trọng;
lề-dưới:0px !quan trọng;
}
.tabbrowser-tab:not([selected="true"]):not([multisered="true"]) .tab-background {
background- màu:trộn màu (tính bằng srgb, màu hiện tại 5%, trong suốt);
}
menupopup>
menu, menupopup>
menuitem {
padding-block:2px !quan trọng;
}
:root {
--arrowpanel-menuitem-padding:2px !quan trọng;
}
Điều này sẽ mang lại cho bạn vẻ ngoài khá đẹp mắt - tab đang hoạt động sẽ có viền, nền thì không. Tuy nhiên, bạn sẽ có độ tương phản tốt hơn Proton tiêu chuẩn. Tôi thấy điều này là thỏa đáng, nhưng sau đó quyết định thực hiện thêm một vài sửa đổi.
Đường viền tab nền
Nếu bạn muốn các tab nền cũng có đường viền, thì bạn có thể thêm như sau:
.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 các tab nền với đường viền liền 1px màu xám nhạt được đặt ở độ trong suốt 50%. Bạn có thể sử dụng bất kỳ giá trị màu sắc hoặc độ trong suốt nào mà bạn thích. Ngoài ra, xin lưu ý rằng điều khoản này rất giống với điều khoản được xác định trong đoạn mã AskVG và bạn thực sự có thể kết hợp các quy tắc để tạo ra một phần mã nhỏ hơn, gọn hơn trong tệp CSS. 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 một cách riêng biệt. Không có xung đột vì các quy tắc được phân lớp.
Đường viền tab nền trước
Tương tự, bạn cũng có thể điều chỉnh tab đang hoạt động vì OCD:
.tabbrowser-tab[đã chọn="true"] .tab-background {
border-left:1px solid rgba(130, 130, 130, 0.5) !quan trọng;
border-right:1px solid rgba(130, 130, 130, 0.5) !important;
}
Màu nhấn của tab
Bạn có thể đảm bảo rằng tab đang hoạt động được đánh dấu và hiển thị để phân biệt với các tab khác:
.tabbrowser-tab[đã chọn="true"] .tab-background {
border-top:3px solid #3daee9 !quan trọng;
Bạn chỉ có thể thêm dòng bổ sung vào định nghĩa ở trên, nếu muốn. Trong ví dụ của tôi, tôi đặt màu nhấn phù hợp với bảng màu của màn hình nền. Mã màu #3daee9 là màu nhấn được sử dụng bởi màn hình Plasma trong ví dụ cụ thể này. Bạn có thể sử dụng màu nhấn của hệ thống - như được xác định trong quy tắc CSS của thanh tiêu đề:
border-top:3px solid -moz-accent-color-foreground !important;
Chiều cao thanh tab
Nếu bạn muốn làm cho các tab nhỏ hơn - tương tự như chế độ thu gọn cũ, thì 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 đổi các giá trị thành bất kỳ giá trị nào bạn thích, ví dụ:chiều cao tối đa:28px; hoặc tương tự. Mệnh đề liên lạc 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 vùng chứa
Firefox 91 cũng làm cho các tab chứa trông nhạt nhẽo và khó phân biệt với các tab thông thường. Vì vậy, tôi quyết định giới thiệu một chút màu sắc [sic]. Có rất nhiều lựa chọn và bây giờ, bạn sẽ cảm thấy thoải mái hơn một chút khi thực hiện những thay đổi cần thiết. Tôi đã chọn các tab có màu sắc phù hợp với màu của hộp chứa, cộng với các đường viền đẹp mắt, để những con quỷ OCD của tôi không cần phải thức tỉnh:
.tabbrowser-tab[usercontextid] .tab-background {
nền:var(--identity-tab-color) !quan trọng;
border-left:1px solid rgba(130, 130, 130, 0.5) !important;
border-right:1px solid rgba(130, 130, 130, 0.5) !important;
đường viền dưới cùng:var(--identity-tab-color) !important;
độ mờ:0,8 !quan trọng;
}
Mỗi tab sử dụng màu nhận dạng riêng (được xác định bởi mệnh đề var), đường viền dưới cùng khớp với màu nhận dạng để tab hòa trộn độc đáo vào thanh tab và các đường viền bên giống như các tab thông thường. Tôi đã thử các tùy chọn khác nhau. Chẳng hạn, tôi đã thử cả hai tùy chọn độ mờ 20% và 80%. Để hóm hỉnh:
Và bây giờ, Firefox của bạn trông đẹp hơn rất nhiều! Một ví dụ nhỏ thú vị khác:
Mỹ phẩm bổ sung
Còn rất nhiều việc bạn có thể làm. Tôi thậm chí còn điều chỉnh nút thu phóng trong thanh địa chỉ, vì phần đệm hơi bị tắt và chúng tôi không thể có bất kỳ pixel giả mạo nào, bây giờ chúng tôi có thể. Nhưng chúng ta nên kết thúc ở đây, trên một lưu ý cao.
#urlbar-zoom-button {
padding-top:0px !quan trọng;
}
Kết luận
Chúng ta đi thôi. Hôm nay, tôi đã có thể chỉ cho bạn cách hoàn tác một số thay đổi giao diện người dùng "hiện đại" vô dụng được đưa vào Firefox 91. Chừng nào Firefox còn ghi đè CSS, thì vẫn còn hy vọng. Thật không vui khi phải chiến đấu với phần mềm của bạn, nhưng ít nhất bạn có tùy chọn để loại bỏ những thứ có IQ thấp và duy trì năng suất và hiệu quả của mình. Với các quy tắc CSS nêu trên, Firefox 91 và quan trọng hơn là Firefox 91 ESR có thể trông tương đối ổn và có thể sử dụng được trong tương lai gần.
Điều gì sẽ xảy ra một hoặc hai năm kể từ bây giờ? Ai biết. Tôi vẫn tin rằng Firefox nên là trình duyệt mặc định của bạn, bất chấp tất cả những điều hoàn toàn vô nghĩa đã được nhóm Mozilla đưa vào đó, nhưng tôi không chắc mình có thể duy trì vị trí đó trong bao lâu nữa. Đến một lúc nào đó, Firefox có thể đạt đến mức độ xấu xí và vô dụng của các đối thủ. Tôi không biết mình sẽ làm gì sau đó vì tôi không muốn sử dụng Internet khi trình duyệt dựa trên Chromium là lựa chọn duy nhất của tôi. Thoát khỏi Web? Đó có thể là một giải pháp. Chà, hôm nay chúng ta không cần phải đối mặt với sự lựa chọn khó khăn đó. Chỉnh sửa CSS được thực hiện. Thông minh 1, hipsterology 0. Kết thúc.
Chúc mừng.