ค้นหา CSS ที่ไม่ถูกต้อง ลบล้าง ไม่ได้ใช้งาน และ CSS อื่นๆ

Sofia Emelianova
Sofia Emelianova

คู่มือนี้จะถือว่าคุณคุ้นเคยกับการตรวจสอบ CSS ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ดูข้อมูลเบื้องต้นได้ที่หัวข้อดูและเปลี่ยน CSS

ตรวจสอบ CSS ที่คุณเขียน

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

สิ่งแรกที่ต้องทำคือตรวจสอบองค์ประกอบและตรวจสอบว่า CSS ใหม่มีผลกับองค์ประกอบจริง

บางครั้งคุณจะเห็น CSS ใหม่ในแผงองค์ประกอบ > สไตล์ แต่ CSS ใหม่จะเป็นข้อความสีซีด แก้ไขไม่ได้ ขีดฆ่า หรือมีไอคอนคำเตือนหรือคำแนะนำอยู่ข้างๆ

ทำความเข้าใจ CSS ในแผงสไตล์

แผงสไตล์จะจดจำปัญหา CSS หลายประเภทและไฮไลต์ปัญหาเหล่านั้นด้วยวิธีต่างๆ

ตัวเลือกที่ตรงกันและไม่ตรงกัน

แผงสไตล์จะแสดงตัวเลือกที่ตรงกันในข้อความปกติ และตัวเลือกที่ไม่ตรงกันในข้อความสีซีด

ตัวเลือกที่ตรงกันในข้อความปกติและตัวเลือกที่ไม่ตรงกันในข้อความสีซีด

ค่าและการประกาศที่ไม่ถูกต้อง

แผงสไตล์จะขีดฆ่าและแสดงไอคอนคำเตือน คำเตือน ข้างรายการต่อไปนี้

  • การประกาศ CSS ทั้งหมด (พร็อพเพอร์ตี้และค่า) เมื่อพร็อพเพอร์ตี้ CSS ไม่ถูกต้องหรือไม่ทราบ
  • เฉพาะค่าเมื่อพร็อพเพอร์ตี้ CSS ถูกต้องแต่ค่าไม่ถูกต้อง

ชื่อพร็อพเพอร์ตี้และค่าพร็อพเพอร์ตี้ไม่ถูกต้อง

แทนที่แล้ว

แผงสไตล์จะขีดฆ่าพร็อพเพอร์ตี้ที่ถูกลบล้างโดยพร็อพเพอร์ตี้อื่นๆ ตามลําดับการจัดเรียงแบบซ้อนทับ

ในตัวอย่างนี้ แอตทริบิวต์สไตล์ width: 300px; ในองค์ประกอบจะลบล้าง width: 100% ในคลาส .youtube

ไม่ได้ใช้งาน

แผงสไตล์จะแสดงเป็นข้อความสีซีดและวางไอคอนข้อมูล ข้อมูล ข้างพร็อพเพอร์ตี้ที่ถูกต้องแต่ไม่มีผลเนื่องจากพร็อพเพอร์ตี้อื่นๆ

พร็อพเพอร์ตี้สีซีดเหล่านี้ไม่ทำงานเนื่องจากตรรกะ CSS ไม่ใช่ลําดับการจัดเรียงแบบซ้อนทับ

การประกาศ CSS ที่ไม่ทำงานพร้อมคำแนะนำ

ในตัวอย่างนี้ พร็อพเพอร์ตี้ display: block; จะปิดใช้ justify-content และ align-items ที่ควบคุมเลย์เอาต์แบบ Flex หรือตารางกริด

รายการที่รับค่าและรายการที่ไม่รับค่า

แผงสไตล์จะแสดงพร็อพเพอร์ตี้ในส่วน Inherited from <element-name> ขึ้นอยู่กับการรับค่าเริ่มต้น ดังนี้

  • รายการที่รับค่าเริ่มต้นจะเป็นข้อความธรรมดา
  • รายการที่ไม่ได้รับค่าเริ่มต้นจะเป็นข้อความสีซีด

ส่วน &quot;รับค่ามาจาก body&quot; ที่แสดง CSS ที่รับค่ามาและไม่ได้รับค่ามา

ชวเลข

พร็อพเพอร์ตี้แบบสั้น (กระชับ) ช่วยให้คุณตั้งค่าพร็อพเพอร์ตี้ CSS หลายรายการพร้อมกันได้ และทำให้อ่านสไตล์ชีตได้ง่ายขึ้น อย่างไรก็ตาม เนื่องจากพร็อพเพอร์ตี้ดังกล่าวมีความยาวสั้น คุณจึงอาจพลาดพร็อพเพอร์ตี้แบบยาว (ที่แน่นอน) ซึ่งลบล้างพร็อพเพอร์ตี้ที่บอกเป็นนัยโดยพร็อพเพอร์ตี้แบบย่อ

แผงสไตล์จะแสดงพร็อพเพอร์ตี้แบบย่อเป็นรายการแบบเลื่อนลง เมนูแบบเลื่อนลง ที่มีพร็อพเพอร์ตี้ทั้งหมดที่ย่อไว้

พร็อพเพอร์ตี้แบบย่อที่มีรายการแบบเลื่อนลง

ในตัวอย่างนี้ พร็อพเพอร์ตี้ที่ตัดให้สั้นลง 2 ใน 4 รายการถูกลบล้าง

แก้ไขไม่ได้

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

  • user agent stylesheet - สไตล์ชีตเริ่มต้นของ Chrome

    CSS จากสไตล์ชีต User Agent

  • แอตทริบิวต์ HTML ที่เกี่ยวข้องกับสไตล์ในองค์ประกอบ เช่น ความสูง ความกว้าง สี ฯลฯ คุณสามารถแก้ไขแอตทริบิวต์เหล่านี้ในลําดับชั้น DOM ซึ่งจะอัปเดต CSS ในแผงสไตล์ แต่ในทางกลับกันไม่ได้

    ในตัวอย่างนี้ แอตทริบิวต์ height="48" ในองค์ประกอบ <svg> มีการตั้งค่าเป็น 50 ซึ่งจะอัปเดตพร็อพเพอร์ตี้ที่เกี่ยวข้องในส่วน svg[Attributes Style] ในแผงสไตล์

ตรวจสอบองค์ประกอบที่ยังคงมีการจัดสไตล์ไม่ตรงกับที่คุณคิด

หากต้องการหาสาเหตุของปัญหา คุณอาจต้องตรวจสอบสิ่งต่อไปนี้

แผงองค์ประกอบ > สไตล์จะแสดงชุดกฎ CSS ที่ตรงกันทุกประการตามที่เขียนไว้ในสไตล์ชีตต่างๆ ในทางกลับกัน แผงองค์ประกอบ > ที่คำนวณจะแสดงค่า CSS ที่แก้ไขแล้วซึ่ง Chrome ใช้เพื่อแสดงผลองค์ประกอบ

  • CSS ที่มาจากการสืบทอด
  • ผู้ชนะ Cascade
  • พร็อพเพอร์ตี้แบบเต็ม (แม่นยำ) ไม่ใช่แบบย่อ (กระชับ)
  • ค่าที่คำนวณแล้ว เช่น font-size: 14px แทนที่จะเป็น font-size: 70%

ทําความเข้าใจ CSS ในแผงผลลัพธ์

แผงที่คำนวณแล้วยังแสดงพร็อพเพอร์ตี้ต่างๆ แตกต่างกันด้วย

ประกาศและรับช่วง

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

พร็อพเพอร์ตี้ที่ประกาศ

หากต้องการดูการประกาศในแผงสไตล์ ให้วางเมาส์เหนือพร็อพเพอร์ตี้ที่ขยายแล้วคลิกปุ่มลูกศร ลูกศรขวา

ปุ่มลูกศรข้างพร็อพเพอร์ตี้

หากต้องการดูประกาศในแผงแหล่งที่มา ให้คลิกลิงก์ไปยังไฟล์ต้นฉบับ

ลิงก์ไปยังไฟล์ต้นฉบับ

สำหรับพร็อพเพอร์ตี้ที่มีแหล่งที่มาหลายแห่ง แผงที่คำนวณแล้วจะแสดงรายการที่ชนะตามลําดับชั้นก่อน

พร็อพเพอร์ตี้ที่มีแหล่งที่มาหลายแห่ง

รันไทม์

แผงที่คำนวณแล้วจะแสดงค่าของพร็อพเพอร์ตี้ที่คำนวณ ณ รันไทม์เป็นข้อความสีซีด

ค่าพร็อพเพอร์ตี้ที่คำนวณเมื่อรันไทม์

ในตัวอย่างนี้ Chrome ได้คํานวณข้อมูลต่อไปนี้สําหรับองค์ประกอบ <ul>

  • width สัมพันธ์กับ <div> ซึ่งเป็นรายการหลัก
  • height สัมพันธ์กับองค์ประกอบย่อย 2 รายการ ได้แก่ องค์ประกอบ <li>

ไม่ได้รับค่ามาและที่กําหนดเอง

หากต้องการให้แผงที่คำนวณแล้วแสดงพร็อพเพอร์ตี้ทั้งหมดและค่าของพร็อพเพอร์ตี้ ให้เลือก ช่องทำเครื่องหมาย แสดงทั้งหมด พร็อพเพอร์ตี้ทั้งหมดมีดังนี้

หากต้องการแบ่งรายการใหญ่ๆ นี้ออกเป็นหมวดหมู่ ให้เลือก ช่องทำเครื่องหมาย Group

พร็อพเพอร์ตี้ทั้งหมดที่จัดกลุ่ม

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

ค้นหารายการที่ซ้ำกัน

หากต้องการตรวจสอบที่พักที่เฉพาะเจาะจงและที่พักที่อาจซ้ำกัน ให้พิมพ์ชื่อที่พักนั้นในกล่องข้อความตัวกรอง ซึ่งทำได้ทั้งในแผงสไตล์และค่าที่คำนวณแล้ว

กล่องข้อความตัวกรองในแผงรูปแบบและแผงรูปแบบที่คำนวณแล้ว

ดูค้นหาและกรอง CSS ขององค์ประกอบ

ค้นหา CSS ที่ไม่ได้ใช้

ดูความครอบคลุม: ค้นหา JavaScript และ CSS ที่ไม่ได้ใช้