ตรวจสอบกฎ CSS ที่ชนะด้วย Render จริงใช้ browser engine ตรวจสอบว่ากฎ CSS ใดชนะจริงๆ

ทำไมต้อง 'เรนเดอร์จริง' ไม่ใช่แค่คำนวณตามทฤษฎี?

เครื่องมือคำนวณ specificity ของ CSS ส่วนใหญ่บนอินเทอร์เน็ตทำเพียงนำ selector ของคุณไปแทนค่าในสูตรแล้วให้คะแนนออกมา เช่น #main p ได้คะแนน (1,0,1) ส่วน .card.active ได้คะแนน (0,2,0) แต่สิ่งที่เบราว์เซอร์จริงตัดสินเมื่อกฎหลายข้อขัดแย้งกันนั้น ยังขึ้นอยู่กับการสืบทอดคุณสมบัติ (inheritance) ลำดับของ cascade, !important และวิธีที่คุณสมบัติเดียวกันถูกเขียนไว้ในกฎแต่ละข้อด้วย — สิ่งเหล่านี้เครื่องคำนวณตามทฤษฎีมองข้ามไปทั้งหมด เครื่องมือนี้ใช้วิธีที่แตกต่างออกไป คือนำ HTML และ CSS ที่คุณวางไปเรนเดอร์จริงในหน้า iframe ที่ซ่อนอยู่ เพื่อให้เบราว์เซอร์ประมวลผลสไตล์จริง แล้วอ่านผลลัพธ์ที่แท้จริงกลับมาด้วย getComputedStyle() สิ่งที่คุณเห็นคือสิ่งที่เบราว์เซอร์ตัดสินจริง ไม่ใช่ตัวเลขที่คำนวณบนกระดาษ

คะแนน (a, b, c) เทียบกันอย่างไรจริงๆ — ตัวอย่างแบบละเอียด

Specificity ของ CSS เขียนเป็นตัวเลขสามหลัก (a, b, c): a คือจำนวน ID selector, b คือจำนวน class/attribute/pseudo-class selector, c คือจำนวน element/pseudo-element selector การเทียบกันทำงานเหมือนการเทียบหลักตัวเลข — ฝั่งที่มีค่า 'a' สูงกว่าชนะทันที และจะเทียบ 'b' ต่อก็เมื่อ 'a' เท่ากันเท่านั้น ตัวอย่างเช่น #main p ได้คะแนน (1,0,1) ในขณะที่ .card .title.active ได้คะแนน (0,3,0) — #main p ยังชนะอยู่ดี เพราะ 1 > 0 ในหลัก 'a' แม้อีกฝั่งจะซ้อน class ถึงสามตัวก็ตาม ถ้าสองกฎมี specificity เท่ากันเป๊ะ เบราว์เซอร์จะใช้กฎที่ถูกกำหนดไว้ทีหลังในไฟล์ CSS — นี่คือเหตุผลที่ลำดับการเขียนโค้ดก็มีความสำคัญ ส่วน !important เป็นสิ่งเดียวที่สามารถล้ม specificity ได้ทั้งหมด กฎที่มี specificity ต่ำกว่าแต่มี !important จะชนะกฎที่มี specificity สูงกว่าแต่ไม่มี !important (ยกเว้นว่าอีกฝั่งก็มี !important เหมือนกัน กรณีนั้น specificity จะกลับมาเป็นตัวตัดสินอีกครั้ง)

ควรใช้เครื่องมือนี้เมื่อไหร่?

สถานการณ์คลาสสิกคือ 'ผมเขียนกฎ CSS นี้แล้ว แต่หน้าจอไม่เปลี่ยนแปลงเลย' — ซึ่งมักหมายความว่ามีกฎอื่นที่มี specificity สูงกว่า (หรือมี !important) กำลังทับกฎของคุณอยู่ วาง HTML+CSS ที่ขัดแย้งกันลงไป ใส่ selector ของ element ที่คุณกำลังไล่ปัญหา เครื่องมือจะแสดงกฎทั้งหมดที่ตรงกันพร้อมคะแนน specificity ของแต่ละกฎ และให้เอนจินเบราว์เซอร์จริงบอกคุณว่ากฎใดชนะจริง — ไม่ต้องเดาอีกต่อไปว่าชั้นไหนของ cascade เป็นผู้ชนะ

เครื่องมือนี้เรนเดอร์อยู่ภายใน iframe ที่ถูกแยกกักไว้ ไม่มีการโหลดฟอนต์ รูปภาพ หรือรัน JavaScript จากภายนอก และไม่รองรับ Shadow DOM หรือสไตล์ CSS-in-JS ที่ถูกแทรกเข้ามาแบบไดนามิก — โปรดวางเฉพาะ HTML/CSS แบบ static เพื่อให้ได้ผลลัพธ์ที่ถูกต้อง