ตัวตรวจสอบ CSS – ตรวจไวยากรณ์ คุณสมบัติ และข้อผิดพลาด
ตัวตรวจสอบ CSS แยกวิเคราะห์ CSS ด้วย css-tree และรายงานข้อผิดพลาดไวยากรณ์พร้อมตำแหน่งบรรทัดและคอลัมน์ โดยตรวจต่อไปหลังเจอข้อผิดพลาดแรกเพื่อให้คุณพบปัญหาอื่น ๆ ได้ ทั้งยังทำเครื่องหมายชื่อคุณสมบัติที่ไม่มีในตารางสเปก CSS ว่าน่าจะพิมพ์ผิด โดยไม่สนใจคุณสมบัติแบบกำหนดเอง (--*) และคำนำหน้าผู้ขาย ตรวจทานจำนวนกฎ การประกาศ และ @-rule ควบคู่ไปกับผลลัพธ์
ตัวตรวจสอบ CSS เป็นเครื่องมือตรวจไวยากรณ์ CSS บนเบราว์เซอร์ที่แยกวิเคราะห์สไตล์ชีตด้วย css-tree รายงานข้อผิดพลาดไวยากรณ์พร้อมตำแหน่งบรรทัดและคอลัมน์ และตรวจต่อไปหลังเจอข้อผิดพลาดแรกเพื่อให้คุณทบทวนปัญหาเพิ่มเติมได้ เครื่องมือยังทำเครื่องหมายชื่อคุณสมบัติที่ไม่มีในตารางสเปก CSS ว่าน่าจะพิมพ์ผิด และแสดงจำนวนกฎ การประกาศ และ @-rule
ระหว่างการตรวจสอบ CSS จะถูกแยกวิเคราะห์และรายงานปัญหาไวยากรณ์พร้อมตำแหน่ง ชื่อคุณสมบัติที่ไม่มีในตารางสเปก CSS จะถูกทำเครื่องหมาย แต่คุณสมบัติแบบกำหนดเอง (--*) และคำนำหน้าผู้ขายจะไม่ถูกตรวจในขั้นตอนนี้ ตัวตรวจสอบจึงช่วยแยกแยะการสะกดผิดที่น่าจะเป็น ออกจากรูปแบบชื่อคุณสมบัติที่ออกแบบมาให้ข้าม
CSS อธิบายกฎและประกาศของสไตล์ ส่วนตัวตรวจสอบจะดูว่าสไตล์ชีตที่ให้มาสามารถแยกวิเคราะห์ได้หรือไม่ และชื่อคุณสมบัติปรากฏในตารางสเปก CSS หรือไม่ การใช้ตัวตรวจสอบ CSS ช่วยนักพัฒนาสืบหาข้อผิดพลาดก่อน CSS จะถึงตัวแยกวิเคราะห์ที่ล้มเหลวตอนรันไทม์ ตรวจสอบผลลัพธ์ที่สร้างขึ้น และหาปัญหาโดยไม่ต้องค้นหาทั้งไฟล์ด้วยมือ
ตัวตรวจสอบ CSS ทำงานในเบราว์เซอร์ของคุณทั้งหมด ข้อมูลที่คุณป้อนจะประมวลผลบนอุปกรณ์ของคุณเอง ไม่ได้ส่งไปยังเซิร์ฟเวอร์ ใช้งานออฟไลน์ได้เมื่อโหลดหน้าเสร็จแล้ว คุณจึงใช้ได้โดยไม่ต้องเชื่อมต่อหลังจากนั้น ใช้งานฟรี และนักพัฒนากับวิศวกร DevOps ใช้ตรวจสไตล์ชีตและดูผลการตรวจสอบได้
ขั้นตอนที่ 1: วางหรือลาก CSS ของคุณลงในเครื่องมือ ใส่สไตล์ชีตที่ต้องการตรวจสอบ
ขั้นตอนที่ 2: รันการตรวจ CSS เครื่องมือจะแยกวิเคราะห์อินพุตและรายงานข้อผิดพลาดไวยากรณ์ที่พบ
ขั้นตอนที่ 3: ทบทวนตำแหน่งข้อผิดพลาดที่รายงานแต่ละรายการ ใช้รายละเอียดบรรทัดและคอลัมน์เพื่อหาจุดที่เกี่ยวข้องใน CSS ของคุณ
ขั้นตอนที่ 4: ตรวจคำเตือนคุณสมบัติและจำนวน เครื่องมือทำเครื่องหมายชื่อคุณสมบัติที่ไม่รู้จัก และแสดงยอดรวมกฎ การประกาศ และ @-rule
กรณีการใช้งาน: ตรวจไฟล์ CSS ก่อนที่มันจะถึงตัวแยกวิเคราะห์แล้วล้มเหลวตอนรันไทม์ ตัวตรวจสอบช่วยให้คุณพบปัญหาไวยากรณ์ได้เร็วขึ้น
กรณีการใช้งาน: หาบรรทัดและคอลัมน์ของข้อผิดพลาดไวยากรณ์แทนการไล่หาด้วยมือ ทบทวนตำแหน่งที่รายงานเพื่อจำกัดขอบเขตการสืบค้น
กรณีการใช้งาน: ยืนยันว่าผลลัพธ์จากเครื่องมืออื่นเป็น CSS ที่ถูกต้อง ไม่ใช่แค่ข้อความที่ดูน่าเชื่อถือ ตัวแยกวิเคราะห์จะรายงานข้อผิดพลาดไวยากรณ์ที่พบ
กรณีการใช้งาน: มองหาชื่อคุณสมบัติที่น่าจะพิมพ์ผิดในสไตล์ชีต ตัวตรวจสอบทำเครื่องหมายชื่อที่ไม่มีในตารางสเปก CSS โดยไม่สนใจคุณสมบัติแบบกำหนดเองและคำนำหน้าผู้ขาย
กรณีการใช้งาน: ทบทวนจำนวนกฎ การประกาศ และ @-rule หลังสร้างหรือแก้ไข CSS ยอดรวมเหล่านี้ให้ภาพรวมเนื้อหาของสไตล์ชีตอย่างรวดเร็ว
กรณีการใช้งาน: ตรวจสไตล์ชีตที่ใช้คุณสมบัติแบบกำหนดเองหรือคุณสมบัติที่มีคำนำหน้าผู้ขาย การตรวจชื่อคุณสมบัติจะไม่สนใจรูปแบบเหล่านี้ จึงไม่ถูกทำเครื่องหมายว่าเป็นคุณสมบัติที่ไม่รู้จัก