แผงภาพรวม CSS

ใน DevTools ของโครม ให้เปิดแผงภาพรวม CSS ผ่าน Cmd+Shift+P → "ภาพรวม CSS" คลิก "จับภาพภาพรวม" เพื่อวิเคราะห์สไตล์ชีตทั้งหมดของหน้าปัจจุบัน แผงนี้จะสรุปสี แบบอักษร คิวรีสื่อ และการประกาศที่ไม่ได้ใช้งาน

ส่วนสีจะแสดงค่าทุกสีที่ใช้ใน CSS ของหน้า ได้แก่ สีแบบเลขฐานสิบหก สีแบบ rgb สีที่ตั้งชื่อ และจุดหยุดของการไล่ระดับสี โดยจัดกลุ่มตามประเภท เมื่อคลิกสีใดจะแสดงว่าองค์ประกอบและคุณสมบัติใดใช้สีนั้น ช่วยเปิดเผยความหลากหลายของสีที่ไม่ได้ตั้งใจและการกระจายตัวของชุดสี

ส่วนแบบอักษรจะแสดงการผสมผสานระหว่างแบบอักษร ขนาดแบบอักษร และน้ำหนักแบบอักษรทั้งหมดที่ใช้กับหน้า ส่วนนี้ช่วยให้เห็นแบบอักษรสำรอง เน้นความไม่สอดคล้องของลำดับขนาดตัวอักษร และแสดงว่าองค์ประกอบใดใช้การผสมผสานแต่ละแบบ

ส่วนคิวรีสื่อจะแสดงกฎ @media ทุกกฎ จุดแบ่งของแต่ละกฎ และจำนวนการประกาศภายในกฎนั้น ภาพรวมนี้ช่วยเปิดเผยความไม่สอดคล้องของจุดแบ่ง — บางทีมสะสมค่าจุดแบ่งที่แตกต่างกันเพียงเล็กน้อยไว้มากกว่า 15 ค่าในฐานโค้ดเดียว

ภาพรวม CSS จะแจ้งการประกาศที่ไม่เคยถูกนำไปใช้เนื่องจากข้อขัดแย้งด้านความจำเพาะหรือตัวเลือกที่ไม่ตรงกัน สิ่งนี้แตกต่างจากเครื่องมือตรวจสอบความครอบคลุม เพราะสามารถตรวจจับกฎที่ถูกเขียนทับเสมอได้โดยไม่ต้องมีการโต้ตอบของผู้ใช้เพื่อเปิดใช้งาน

แผงนี้จะเน้นสีข้อความที่ไม่ผ่านอัตราคอนทราสต์ระดับ WCAG AA หรือ AAA เมื่อเทียบกับพื้นหลัง เมื่อคลิกข้อผิดพลาดด้านคอนทราสต์ ระบบจะเลือกองค์ประกอบนั้นใน DOM ทำให้แก้ไขปัญหาด้านการช่วยการเข้าถึงได้ง่ายโดยไม่ต้องใช้เครื่องมือแยกต่างหาก

ใช้ภาพรวม CSS หลังการออกแบบใหม่ครั้งใหญ่ หรือเมื่อเริ่มทำงานกับฐานโค้ดที่มีอยู่ สรุปสีจะแสดงว่าการนำไปใช้งานเบี่ยงเบนจากโทเค็นการออกแบบไปมากเพียงใด ส่วนสรุปแบบอักษรจะแสดงความไม่สอดคล้องของรูปแบบตัวอักษรก่อนที่ผู้ใช้จะสังเกตเห็น

เรียกใช้ภาพรวม CSS กับหลายหน้าของแอปพลิเคชันเดียวกัน การเปรียบเทียบสรุปสีและแบบอักษรจะเปิดเผยความแตกต่างระหว่างหน้า เช่น คอมโพเนนต์ที่แสดงผลด้วยรูปแบบตัวอักษรหรือสีต่างจากคอมโพเนนต์เดียวกันในหน้าอื่น

ส่งออกข้อมูลสีจากภาพรวม CSS แล้วเปรียบเทียบกับชุดสีโทเค็นการออกแบบ สีที่มีอยู่ในภาพรวมแต่ไม่มีในชุดสีโทเค็นคือค่าที่ฝังตายตัว ซึ่งควรเปลี่ยนเป็นการอ้างอิงโทเค็นและลบออกในฐานะค่าที่แยกเดี่ยว

แสดงรายการจุดแบ่งจากภาพรวม CSS ระบุค่าที่ซ้ำกันและเกือบซ้ำกัน (768px, 769px, 770px จากนักพัฒนาคนละคน) รวมค่าเหล่านั้นเข้ากับลำดับจุดแบ่งของระบบการออกแบบ แล้วอัปเดตคิวรีสื่อทั้งหมดให้ใช้คุณสมบัติแบบกำหนดเองของ CSS หรือตัวแปร SCSS

ภาพรวม CSS วิเคราะห์สไตล์ชีตที่ลิงก์ไว้ ไม่ใช่สไตล์แบบอินไลน์หรือสไตล์รันไทม์ที่สร้างด้วย CSS และ JS คลาสแบบไดนามิกที่ JavaScript เพิ่มหลังการแสดงผลครั้งแรกอาจไม่ปรากฏ ควรใช้เครื่องมือตรวจสอบความครอบคลุมร่วมกับการตรวจสอบด้วยตนเอง เพื่อให้ครอบคลุมสไตล์แบบไดนามิกอย่างสมบูรณ์

ภาพรวม CSS ตรวจพบปัญหาด้านการช่วยการเข้าถึงประเภทใด

ภาพรวม CSS ให้การตรวจสอบระดับหน้าสำหรับสี แบบอักษร จุดแบ่งของคิวรีสื่อ และปัญหาคอนทราสต์ ใช้เครื่องมือนี้ตรวจจับการเบี่ยงเบนจากการออกแบบ การกระจายตัวของชุดสี ความไม่สอดคล้องของรูปแบบตัวอักษร และข้อผิดพลาดด้านการช่วยการเข้าถึง ก่อนที่ปัญหาเหล่านี้จะสะสมเป็นหนี้ทางเทคนิคที่แก้ไขได้ยากและมีค่าใช้จ่ายสูง