Cách tùy chỉnh Chế độ xem Firefox Reader để dễ đọc hơn
Reader View là một tính năng phổ biến của trình duyệt Firefox, đó là thay đổi ngoại hình của một trang web và làm cho nó dễ đọc hơn bởi loại bỏ sự lộn xộn thị giác chẳng hạn như hình ảnh, quảng cáo, tiêu đề và thanh bên. Tuy nhiên, Reader View không có sẵn cho tất cả các trang chủ.
Nếu tính năng này khả dụng cho một trang nhất định, bạn sẽ tìm thấy biểu tượng để bật tính năng này trong hình dạng của một biểu tượng cuốn sách nhỏ hiển thị bên phải thanh địa chỉ.
Có một vài tùy chọn tích hợp cho phép người đọc tùy chỉnh giao diện của Chế độ xem độc giả. Chúng tôi sẽ xem xét các tùy chọn đó trước khi cho bạn thấy những gì bạn có thể làm để cá nhân hóa giao diện của Chế độ đọc. Đối với mục đích demo, tôi sẽ sử dụng một bài viết của bài báo National Geographic.
Tùy chọn dựng sẵn
Firefox Reader View đi kèm với một vài tùy chọn tùy chỉnh được xây dựng sẵn như tối, sáng và nâu đỏ nguồn gốc, điều chỉnh cỡ chữ, và serif và sans-serif kiểu chữ. Bạn có thể tùy chỉnh chủ đề bằng cách ghi đè các quy tắc CSS trong số các tùy chọn có sẵn này.
Tôi sử dụng một làn da tối với phông chữ serif và điều này có nghĩa là tôi sẽ cần ghi đè các lớp CSS thuộc, trong trường hợp của tôi .tối và .serif.
Nếu bạn muốn tùy chỉnh một biến thể chủ đề khác (skin + font), bạn sẽ cần phải sử dụng các bộ chọn CSS thích hợp. Bạn có thể kiểm tra chúng với sự trợ giúp của Công cụ dành cho nhà phát triển Firefox bằng cách nhấn F12.
Tạo tệp CSS tùy chỉnh
Bạn cần tạo một tập tin gọi là userContent.css bên trong chrome thư mục của thư mục hồ sơ Firefox của bạn cho các tùy chỉnh Reader View của bạn. Để tìm thư mục hồ sơ Firefox của bạn, nhập về: hỗ trợ vào thanh URL và nhấn Enter.
Bạn sẽ thấy mình trên một trang có chứa dữ liệu kỹ thuật liên quan đến cài đặt Firefox của bạn. Nhấp vào nút Hiển thị thư mục và nó sẽ mở thư mục Hồ sơ của bạn.
Tạo một thư mục gọi là chrome trong Thư mục hồ sơ của bạn (nếu bạn chưa có) và một tệp có tên userContent.css bên trong chrome thư mục. Đường dẫn tệp trông như thế này:
Hồ sơ \ Hồ sơ \\ chrome \ userContent.css
Thêm quy tắc CSS tùy chỉnh
Khi bạn đã tạo và mở userContent.css trong trình chỉnh sửa mã, đã đến lúc thêm quy tắc CSS của bạn. Để tùy chỉnh thiết kế của Chế độ xem, bạn cần phải nhắm mục tiêu gắn thẻ với các bộ chọn phù hợp.
Bạn có thể sử dụng các bộ chọn sau cho các tùy chọn mặc định khác nhau:
/ * Khi nền tối được chọn * /: root [hasbrowserhandlers = "true"] body.dark / * Khi nền sáng được chọn * /: root [hasbrowserhandlers = "true"] body.light / * Khi sepia nền được chọn * /: root [hasbrowserhandlers = "true"] body.sepia / * Khi phông chữ serif được chọn * /: root [hasbrowserhandlers = "true"] body.serif / * Khi phông chữ sans-serif là đã chọn * /: root [hasbrowserhandlers = "true"] body.sans-serif
Bạn cũng có thể kết hợp các lớp để nhắm mục tiêu kết hợp cài đặt cụ thể.
. ] body.sans-serif.sepia
Không được dùng bộ chọn chung : root [hasbrowserhandlers = "true"] để nhắm mục tiêu tất cả các cài đặt cùng một lúc. Nó sẽ làm việc, nhưng nó sẽ cũng ảnh hưởng đến các trang trình duyệt khác, nhu la về: newtab, vì các yếu tố gốc của chúng cũng mang hasbrowserhandlers thuộc tính (được sử dụng để đánh dấu các trình xử lý sự kiện của các trang Firefox bên trong, chẳng hạn như trong khoảng: trang).
Đây là mã tôi đã thêm vào userContent.css. Tôi đã thay đổi họ phông chữ, kiểu phông chữ, màu sắc và mở rộng vùng chứa văn bản. Bạn có thể sử dụng bất kỳ quy tắc phong cách nào khác theo sở thích của riêng bạn.
/ ** userContent.css ****** / TÌM HIỂU /: root [hasbrowserhandlers = "true"] body.dark.serif ,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "chuyển phát nhanh mới"! quan trọng; : root [hasbrowserhandlers = "true"] body.dark.serif nền-màu: # 13131F! quan trọng; màu: # BAE3DB! quan trọng; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: italic! Quan trọng; : root [hasbrowserhandlers = "true"] body.dark.serif h1 ,: root [hasbrowserhandlers = "true"] body.dark.serif h2, root root [hasbrowserhandlers = "true"] body.dark.serif h4 ,: root [hasbrowserhandlers = "true"] body.dark.serif h5 color: # 06FEB0! quan trọng; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! quan trọng; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! quan trọng;
Lưu ý rằng cần phải sử dụng !quan trọng từ khóa trong userContent.css cho tất cả các quy tắc CSS. Trình duyệt thêm các giá trị thuộc tính do người dùng chỉ định trước các giá trị được chỉ định bởi tác giả (nhà phát triển của trang web cụ thể, ở đây là Chế độ xem Reader). Do đó, bất kỳ giá trị thuộc tính do người dùng chỉ định mà không có !quan trọng từ khóa sẽ không hoạt động nếu biểu định kiểu do tác giả chỉ định cũng nhắm mục tiêu vào cùng một thuộc tính, vì nó sẽ bị ghi đè.
Kết quả cuối cùng
Bạn có thể thấy những thay đổi của chủ đề Reader View của tôi bên dưới. Sử dụng các quy tắc CSS của riêng bạn để tùy chỉnh thiết kế Chế độ xem Firefox Reader được cá nhân hóa của riêng bạn.
Trước
Sau
Nếu bạn muốn tìm hiểu sâu hơn về tùy chỉnh chủ đề của các công cụ Firefox, hãy xem hướng dẫn trước đây của tôi về tùy chỉnh chủ đề Firefox Developer Tools.
