วิธีปรับแต่งมุมมอง Firefox Reader เพื่อให้อ่านง่ายขึ้น
Reader View เป็นคุณสมบัติยอดนิยมของเบราว์เซอร์ Firefox ที่ เปลี่ยนลักษณะที่ปรากฏ ของหน้าเว็บและ ทำให้อ่านง่ายขึ้น โดย ลบความยุ่งเหยิงภาพ เช่นรูปภาพโฆษณาส่วนหัวและแถบด้านข้าง อย่างไรก็ตามมุมมองผู้อ่านนั้นไม่มีให้บริการสำหรับทุกโฮมเพจ.
หากคุณลักษณะนี้พร้อมใช้งานสำหรับบางหน้าคุณจะพบไอคอนเพื่อเปิดใช้งานในรูปแบบของ ไอคอนหนังสือเล่มเล็ก ๆ แสดงทางด้านขวาของแถบที่อยู่.
มีตัวเลือกในตัวเล็กน้อยที่อนุญาตให้ผู้อ่านปรับแต่งรูปลักษณ์ของ มุมมองผู้อ่าน. เราจะดูตัวเลือกเหล่านั้นก่อนที่จะแสดงสิ่งที่คุณสามารถทำได้เพื่อปรับแต่งรูปลักษณ์ของมุมมองผู้อ่านให้มากขึ้น เพื่อการสาธิตฉันจะใช้บทความโดย National Geographic article.
ตัวเลือกที่สร้างไว้ล่วงหน้า
Firefox Reader View มาพร้อมกับตัวเลือกการปรับแต่งที่สร้างไว้ล่วงหน้าเช่นมืดแสงและซีเปีย ภูมิหลัง, ปรับ ขนาดตัวอักษร, และ serif และ sans-serif รูปแบบอักษร. คุณสามารถปรับแต่งชุดรูปแบบโดย การเอาชนะกฎ CSS ของตัวเลือกที่มีอยู่แล้วเหล่านี้.
ฉันใช้สกินดาร์คแบบอักษรเข้มและนี่หมายความว่าฉันจะต้องแทนที่คลาส CSS ที่เป็นเจ้าของในกรณีของฉัน .มืด และ .serif.
หากคุณต้องการปรับแต่งชุดรูปแบบอื่น (สกิน + แบบอักษร) คุณจะต้อง ใช้ตัวเลือก CSS ที่เหมาะสม. คุณสามารถตรวจสอบสิ่งเหล่านี้ด้วยความช่วยเหลือของเครื่องมือสำหรับนักพัฒนา Firefox โดยการกดปุ่ม F12.
สร้างไฟล์ CSS ที่กำหนดเอง
คุณต้องสร้างไฟล์ชื่อ userContent.css ข้างใน โครเมียม โฟลเดอร์ของ โฟลเดอร์โปรไฟล์ Firefox ของคุณ สำหรับการปรับแต่ง Reader View ของคุณ หากต้องการค้นหาโฟลเดอร์โปรไฟล์ Firefox ให้พิมพ์ เกี่ยวกับการสนับสนุน ลงในแถบ URL แล้วกด Enter.
คุณจะพบว่าตัวเองอยู่ในหน้าที่มี ข้อมูลทางเทคนิคที่เกี่ยวข้องกับการติดตั้ง Firefox ของคุณ. คลิกปุ่มแสดงโฟลเดอร์และจะเปิดโฟลเดอร์โปรไฟล์ของคุณ.
สร้างโฟลเดอร์ชื่อ โครเมียม ภายในโฟลเดอร์โปรไฟล์ของคุณ (หากคุณยังไม่มี) และไฟล์ที่เรียกว่า userContent.css ข้างใน โครเมียม โฟลเดอร์ เส้นทางของไฟล์มีลักษณะดังนี้:
… \ โปรไฟล์ \\ โครเมี่ยม \ userContent.css
เพิ่มกฎ CSS ที่กำหนดเอง
เมื่อคุณสร้างและเปิด userContent.css ในโปรแกรมแก้ไขรหัสถึงเวลาที่จะเพิ่มกฎ CSS ของคุณ ในการปรับแต่งการออกแบบของมุมมองผู้อ่านคุณจะต้อง กำหนดเป้าหมาย แท็กด้วยตัวเลือกที่เหมาะสม.
คุณสามารถใช้ตัวเลือกต่อไปนี้สำหรับตัวเลือกเริ่มต้นที่แตกต่างกัน:
/ * เมื่อเลือกพื้นหลังสีเข้ม * /: root [hasbrowserhandlers = "true"] body.dark / * เมื่อเลือกพื้นหลังแสง * /: root [hasbrowserhandlers = "true"] body.light / * เมื่อซีเปีย พื้นหลังถูกเลือก * /: root [hasbrowserhandlers = "true"] body.sepia / * เมื่อเลือกแบบอักษร serif * /: root [hasbrowserhandlers = "true"] body.serif / * เมื่อแบบอักษร sans-serif เป็น select * /: root [hasbrowserhandlers = "true"] body.sans-serif
คุณยังสามารถรวมคลาสเพื่อกำหนดเป้าหมายชุดค่าผสมที่เฉพาะเจาะจง.
/ * เมื่อเลือกพื้นหลังสีเข้มและแบบอักษร serif * /: root [hasbrowserhandlers = "true"] body.dark.serif / * เมื่อเลือกพื้นหลัง sepia และแบบอักษร sans-serif * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
ไม่ได้ใช้ ตัวเลือกทั่วไป : root [hasbrowserhandlers = "true"] เนื้อหา เพื่อกำหนดเป้าหมายการตั้งค่าทั้งหมดในครั้งเดียว มันจะทำงาน แต่มันจะ ยังมีผลกับหน้าเบราว์เซอร์อื่น ๆ, เช่น เกี่ยวกับ: newtab, เนื่องจากองค์ประกอบรากของมันยังมี hasbrowserhandlers คุณลักษณะ (ซึ่งใช้เพื่อทำเครื่องหมายตัวจัดการเหตุการณ์ของหน้า Firefox ภายในเช่น เกี่ยวกับ: หน้า).
นี่คือรหัสที่ฉันเพิ่มลงในของฉัน userContent.css. ฉันเปลี่ยนตระกูลแบบอักษรลักษณะแบบอักษรสีและขยายคอนเทนเนอร์ข้อความให้กว้างขึ้น คุณสามารถใช้กฎสไตล์อื่น ๆ ตามรสนิยมของคุณเอง.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "courier ใหม่" สำคัญ! : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! สำคัญ; สี: # BAE3DB! สำคัญ; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain แบบอักษร: ตัวเอียง! สำคัญ : root [hasbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2,: root [hasbrowserhandlers = "true"] body.dark.serif h3,: root [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 สี: # 06FEB0 สำคัญ! : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container ความกว้างสูงสุด: 50em! สำคัญ;
โปรดทราบว่ามันจำเป็นต้องใช้ !สำคัญ คำหลักใน userContent.css สำหรับกฎ CSS ทั้งหมด. เบราว์เซอร์เพิ่มค่าคุณสมบัติที่ผู้ใช้ระบุ ก่อนค่าที่ระบุโดยผู้เขียน (นักพัฒนาของหน้าเว็บที่กำหนดให้ที่นี่มุมมองผู้อ่าน) ดังนั้นค่าคุณสมบัติใด ๆ ที่ผู้ใช้ระบุไม่มี !สำคัญ คำหลักจะไม่ทำงานหากสไตล์ชีทที่ผู้เขียนระบุไว้ยังกำหนดเป้าหมายคุณสมบัติเดียวกันเนื่องจากจะถูกแทนที่.
ผลสุดท้าย
คุณสามารถดูการเปลี่ยนแปลงของธีม Reader View ของฉันด้านล่าง ใช้กฎ CSS ของคุณเองเพื่อปรับแต่งการออกแบบมุมมอง Firefox Reader ในแบบของคุณ.
ก่อน
หลังจาก
หากคุณต้องการดำน้ำลึกลงไปในการปรับแต่งชุดรูปแบบของเครื่องมือ Firefox ลองดูบทช่วยสอนก่อนหน้าของฉันเกี่ยวกับการปรับแต่งชุดรูปแบบเครื่องมือสำหรับนักพัฒนา Firefox.
