ผมใช้ Firefox เป็นเบราว์เซอร์หลัก ข้อเท็จจริง ผมตั้งใจใช้จนกว่าจะมีฝ่ายใดฝ่ายหนึ่งหายไป ข้อเท็จจริง แต่ผมพบว่า UI ใหม่ไร้ประโยชน์ ชื่อว่า Proton และมันเข้ามาใน Firefox หลายเดือนที่แล้ว เป็นระยะหนึ่งคุณสามารถปิดมันได้ด้วย toggle แต่ตอนนี้ ไม่มี toggle ให้ใช้แล้ว
เพื่อคืน UI layout ที่สมเหตุสมผลและมีประสิทธิภาพ ผมต้องทำการเปลี่ยนแปลงด้วยตนเองผ่านการแก้ไขไฟล์ CSS หลายไฟล์ การผจญภัยนี้รายละเอียดอยู่ในคู่มือของผมเกี่ยวกับการปิด Proton ผมทำให้แท็บมองเห็นชัดเจน เพิ่มสีให้แท็บคอนเทนเนอร์ จัดการ URL bar และอื่นๆ จนตอนนี้ทุกอย่างดี แต่ในเวอร์ชัน 97 ที่เพิ่งวางจำหน่าย ผมสังเกตว่าแท็บคอนเทนเนอร์ของผมมีปัญหาเล็กน้อย กฎ CSS ไม่ทำงานได้ดีเหมือนเดิม บทความนี้แสดงชุดการแก้ไขเล็กๆ ที่จำเป็นเพื่อทำให้อินเทอร์เฟซที่ปรับแต่งแล้วดูดีอีกครั้ง หากคุณใช้ tweak ป้องกัน Proton ของผมอยู่แล้ว ควรจะมีประโยชน์
รายละเอียดปัญหา
นี่คือสิ่งที่เกิดขึ้นใน Firefox 97 มีปัญหา 2 ประการ สำหรับแท็บคอนเทนเนอร์ที่ active ตัวไฮไลท์ขอบบนถูกบังบางส่วน ทำให้มองเห็น active tab ได้ยาก พื้นที่สีพื้นหลังของแท็บก็ลุกลิ้งออกมาด้านบนของแท็บบาร์เล็กน้อย ปัญหาที่สอง สำหรับ inactive tabs พื้นที่พื้นหลังลุกลิ้งออกมามาก และดู粗糙
ผมรับรู้เต็มที่ว่านี่เป็นปัญหาที่ผมทำเอง คือผมพยายามแก้ไขสิ่ง gìใน Firefox ซึ่งผมทำได้ แต่ตอนนี้มี artifacts เป็นผลลัพธ์ แต่ไม่เป็นไร เพราะนี่คือราคาที่ผมยอมจ่ายเพื่อมี UI ปกติ ที่มีคอนทราสต์ชัดเจนและแยกแท็บได้ง่าย ผมจะไม่รำคาญเกี่ยวกับ Proton อีก
วิธีแก้ไข
ตอนนี้ CSS ของผมสำหรับแท็บคอนเทนเนอร์เป็นดังนี้:
.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;
}
การแก้ไขมีดังนี้:
.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;
}
ขั้นแรก ผมแยกโค้ดเป็นหลายบล็อก เพราะเราต้องการ tweak ขอบบนที่แตกต่างกันสำหรับ active และ inactive container tabs เพื่อกำจัด padding ที่醜陋สำห active tabs เราเพียงแค่ต้องเพิ่ม padding 3px
สำห inactive tabs ที่ระบุโดย:
.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
เราต้องเปลี่ยนขอบบนให้เหมือนกับแท็บทั่วไป (ดูคู่มือสองฉบับก่อนหน้าของผม) แต่เพิ่มการประกาศ padding ด้วย นี่จะทำให้พื้นหลังแท็บ "สั้นลง" คือไม่ลุกลิ้งออกด้านบนของแท็บบาร์ และขอบจะตรงกับแท็บทั้งหมด ให้ลุกลักษณ์สม่ำเสมอที่ดี
และนี่คือทั้งหมด!
สรุป
ผมรับรู้ว่ามีปัญหาความสอดคล้องและต้นทุนการบำรุงรักษาสำห tweaks ของผม ผมไม่สามารถคาดการณ์ทุกการเปลี่ยนแปลงเล็กๆ ใน UI Firefox ได้ และอาจมี glitch เล็กน้อยเกิดขึ้นบ้าง แต่สิ่งเหล่านี้จะเป็นเรื่องเล็กน้อย และผมจะมี quick fixes สำหมัน ในขณะที่การใช้เบราว์เซอร์ที่มีลุกลักษณ์ไม่เหมาะสมตลอดเวลาคือ no-go สถานการณ์นี้ไม่สนุก แต่แม้กระนั้น Firefox ยังคงเป็นเบราว์เซอร์ที่ดีที่สุด และคุณควรใช้มัน เพื่อเหตุผลทางปฏิบัติและปรัชญา ไม่ว่าจะเป็น hipsterology
โดยรวม หากคุณเป็น nerd เพราะมาสมมติว่าไม่ใช่คุณจะไม่อยู่ที่นี่ และคุณชอบสิ่งต่างๆ ให้เรียบร้อย สะอาด อ่านง่าย Ergonomic และมีประสิทธิภาพ คุณคงได้เปลี่ยนลุกลักษณ์ Firefox UI ในเวอร์ชัน 91 ขึ้นไปแล้ว คุณอาจใช้ tweak บางส่วนของผมด้วย หากเป็นเช่นนั้น คุณมีรอบการขัดเงาใหม่ หากคุณพบปัญหาเล็กน้อยกับ Firefox 97 นั่นคือทั้งหมด ดูแลตัวเอง และเจอกันเร็วๆ นี้
ขอแสดงความนับถือ
