ข้อมูลอ้างอิงฟีเจอร์ CSS

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

ดูข้อมูลพื้นฐานได้ที่ดูและเปลี่ยน CSS

เลือกองค์ประกอบ

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

ในภาพหน้าจอ องค์ประกอบ h1 ที่ไฮไลต์เป็นสีน้ำเงินในแผนผัง DOM คือองค์ประกอบที่เลือก ทางด้านขวา สไตล์ขององค์ประกอบจะแสดงในแท็บสไตล์ ทางด้านซ้าย องค์ประกอบจะ ไฮไลต์ในวิวพอร์ต แต่เป็นเพราะเมาส์วางเหนือองค์ประกอบในแผนผัง DOM เท่านั้น

ดูบทแนะนำได้ที่ดู CSS ขององค์ประกอบ

การเลือกองค์ประกอบทำได้หลายวิธี ดังนี้

• ในวิวพอร์ต ให้คลิกขวาที่องค์ประกอบ แล้วเลือกตรวจสอบ
• ใน DevTools ให้คลิกเลือกองค์ประกอบ หรือกด Command+Shift+C (Mac) หรือ Control+Shift+C (Windows, Linux) แล้วคลิกองค์ประกอบใน วิวพอร์ต
• ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกองค์ประกอบในแผนผัง DOM
• ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เรียกใช้การค้นหา เช่น document.querySelector('p') ในคอนโซล คลิกขวาที่ผลลัพธ์ แล้วเลือกแสดงในแผงองค์ประกอบ

ดู CSS

ใช้แท็บองค์ประกอบ > รูปแบบ และคำนวณเพื่อดูกฎ CSS และวินิจฉัยปัญหา CSS

ไปยังส่วนต่างๆ ด้วยลิงก์

แท็บรูปแบบจะแสดงลิงก์ในที่ต่างๆ ไปยังที่อื่นๆ ซึ่งรวมถึงแต่ไม่จำกัดเพียงรายการต่อไปนี้

• ถัดจากกฎ CSS ไปยังสไตล์ชีตและแหล่งที่มาของ CSS ลิงก์ดังกล่าวจะเปิดแผงแหล่งที่มา หากมีการย่อสไตล์ชีต โปรดดูทำให้ไฟล์ที่ย่อแล้วอ่านได้
• ในส่วนรับค่ามาจาก ... ให้ไปที่องค์ประกอบระดับบนสุด
• ในvar()การเรียกใช้ ให้ประกาศคุณสมบัติที่กำหนดเอง
• ในanimationพร็อพเพอร์ตี้แบบย่อ ให้@keyframes
• ลิงก์ดูข้อมูลเพิ่มเติมในเคล็ดลับเครื่องมือของเอกสารประกอบ
• และอื่นๆ อีกมากมาย

ตัวอย่างของรายการเหล่านี้มีดังนี้

ลิงก์อาจมีรูปแบบแตกต่างกัน หากไม่แน่ใจว่าข้อความใดเป็นลิงก์ ให้ลองคลิกเพื่อดู

ดูเคล็ดลับเครื่องมือที่มีเอกสารประกอบ CSS, ความเฉพาะเจาะจง และค่าคุณสมบัติที่กำหนดเอง

องค์ประกอบ > รูปแบบจะแสดงเคล็ดลับเครื่องมือพร้อมข้อมูลที่เป็นประโยชน์เมื่อคุณวางเมาส์เหนือองค์ประกอบที่เฉพาะเจาะจง

ดูเอกสารประกอบ CSS

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

คลิกดูข้อมูลเพิ่มเติมเพื่อไปที่ข้อมูลอ้างอิง CSS ของ MDN เกี่ยวกับพร็อพเพอร์ตี้นี้

หากต้องการปิดเคล็ดลับเครื่องมือ ให้เลือก ไม่แสดง

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

ดูความเฉพาะเจาะจงของตัวเลือก

วางเมาส์เหนือตัวเลือกเพื่อดูเคล็ดลับเครื่องมือที่มีน้ำหนักความเฉพาะเจาะจง

ดูค่าของคุณสมบัติที่กำหนดเอง

วางเมาส์เหนือ --custom-property เพื่อดูค่าในเคล็ดลับเครื่องมือ

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

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

ดูทำความเข้าใจ CSS ในแท็บรูปแบบ

ดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริง

แท็บรูปแบบจะแสดงกฎทั้งหมดที่ใช้กับองค์ประกอบ รวมถึงการประกาศที่ ถูกลบล้าง หากไม่สนใจการประกาศที่ลบล้าง ให้ใช้แท็บคำนวณ เพื่อดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริงๆ

1. เลือกองค์ประกอบ
2. ไปที่แท็บคำนวณในแผงองค์ประกอบ

เลือกช่องทําเครื่องหมายแสดงทั้งหมดเพื่อดูพร็อพเพอร์ตี้ทั้งหมด

ดูทำความเข้าใจ CSS ในแท็บ "คำนวณ"

ดูพร็อพเพอร์ตี้ CSS ตามลำดับตัวอักษร

ใช้แท็บคำนวณ ดูดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริง

ดูพร็อพเพอร์ตี้ CSS ที่รับช่วงมา

เลือกช่องทําเครื่องหมายแสดงทั้งหมดในแท็บคํานวณ ดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริง

หรือเลื่อนแท็บสไตล์ แล้วมองหาส่วนที่ชื่อ Inherited from <element_name>

ดูกฎ @ ของ CSS

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

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

ดู @property กฎ @

@property กฎ @ ของ CSS ช่วยให้คุณกำหนดพร็อพเพอร์ตี้ที่กำหนดเองของ CSS ได้อย่างชัดเจนและลงทะเบียนในสไตล์ชีตโดยไม่ต้องเรียกใช้ JavaScript

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

หากต้องการแก้ไข@propertyกฎ ให้ดับเบิลคลิกชื่อหรือค่าของกฎ

ดู @supports กฎ @

แท็บรูปแบบจะแสดงกฎ @ ของ CSS @supports หากมีการใช้กับองค์ประกอบ ตัวอย่างเช่น ตรวจสอบองค์ประกอบต่อไปนี้

หากเบราว์เซอร์รองรับฟังก์ชัน lab() องค์ประกอบจะเป็นสีเขียว แต่หากไม่รองรับจะเป็นสีม่วง

ดู @scope กฎ @

แท็บรูปแบบจะแสดงกฎ @ ของ @scopeCSS หากมีการใช้กับองค์ประกอบ

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

ดู@scopeกฎในตัวอย่างต่อไปนี้

1. ตรวจสอบข้อความในการ์ดในตัวอย่าง
2. ในแท็บรูปแบบ ให้ค้นหากฎ @scope

ในตัวอย่างนี้ กฎ @scope จะลบล้างการประกาศ CSS ทั่วโลก background-color สำหรับองค์ประกอบ <p> ทั้งหมดภายในองค์ประกอบที่มีคลาส card

หากต้องการแก้ไขกฎ @scope ให้ดับเบิลคลิก

ดู @font-palette-values กฎ @

@font-palette-values กฎ @ ของ CSS ช่วยให้คุณปรับแต่งค่าเริ่มต้นของพร็อพเพอร์ตี้ font-palette ได้ องค์ประกอบ > รูปแบบจะแสดงกฎ @ นี้ในส่วนเฉพาะ

ดูส่วน @font-palette-values ในตัวอย่างถัดไป

1. ตรวจสอบข้อความบรรทัดที่ 2 ในตัวอย่าง
2. ในสไตล์ ให้ค้นหาส่วน @font-palette-values

ในตัวอย่างนี้ ค่าจานสีแบบอักษร --New จะลบล้างค่าเริ่มต้นของแบบอักษรสี

หากต้องการแก้ไขค่าที่กำหนดเอง ให้ดับเบิลคลิกค่าดังกล่าว

ดู @position-try กฎ @

@position-try กฎ CSS พร้อมกับพร็อพเพอร์ตี้ position-try-options ช่วยให้คุณกำหนดตำแหน่งจุดยึดสำรองสำหรับองค์ประกอบได้ ดูข้อมูลเพิ่มเติมได้ที่เปิดตัว API การจัดตำแหน่งยึด CSS

องค์ประกอบ > รูปแบบจะแก้ไขและลิงก์รายการต่อไปนี้

• position-try-options ไปยังส่วน @position-try --name โดยเฉพาะ
• ค่าพร็อพเพอร์ตี้ position-anchor และอาร์กิวเมนต์ anchor() ขององค์ประกอบที่เกี่ยวข้องซึ่งมีแอตทริบิวต์ popovertarget

ตรวจสอบค่า position-try-options และส่วน @position-try ในตัวอย่างถัดไป

1. ในการแสดงตัวอย่าง ให้เปิดเมนูย่อย นั่นคือคลิกบัญชีของคุณ แล้วคลิกหน้าร้าน
2. ตรวจสอบองค์ประกอบด้วย id="submenu" ในตัวอย่าง
3. ในรูปแบบ ให้ค้นหาพร็อพเพอร์ตี้ position-try-options แล้วคลิกค่าของพร็อพเพอร์ตี้นั้น --bottom แท็บรูปแบบจะนำคุณไปยังส่วน@position-tryที่เกี่ยวข้อง
4. คลิกลิงก์ค่า position-anchor หรืออาร์กิวเมนต์ anchor() เดียวกัน แผงองค์ประกอบจะเลือกองค์ประกอบที่มีแอตทริบิวต์ popovertarget ที่เกี่ยวข้อง และแท็บสไตล์จะแสดง CSS ขององค์ประกอบ

หากต้องการแก้ไขค่า ให้ดับเบิลคลิกค่าดังกล่าว

ดูรูปแบบกล่องขององค์ประกอบ

หากต้องการดูรูปแบบกล่องขององค์ประกอบ ให้ไปที่แท็บรูปแบบ แล้วคลิกปุ่ม แสดงแถบด้านข้างในแถบการดำเนินการ

หากต้องการเปลี่ยนค่า ให้ดับเบิลคลิกค่านั้น

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

ใช้ช่องตัวกรองในแท็บรูปแบบและคำนวณเพื่อค้นหาพร็อพเพอร์ตี้หรือค่า CSS ที่เฉพาะเจาะจง

หากต้องการค้นหาคุณสมบัติที่รับค่ามาในแท็บคำนวณด้วย ให้เลือกช่องทำเครื่องหมายแสดงทั้งหมด

หากต้องการไปยังแท็บคำนวณแล้ว ให้จัดกลุ่มพร็อพเพอร์ตี้ที่กรองแล้วในหมวดหมู่ที่ยุบได้โดยเลือกจัดกลุ่ม

จำลองหน้าที่โฟกัส

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

ลองจำลองหน้าที่โฟกัสในหน้าเดโมนี้

1. โฟกัสองค์ประกอบอินพุต องค์ประกอบอีกรายการจะปรากฏใต้รายการนั้น
2. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ ตอนนี้หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บจะอยู่ในโฟกัสแทนหน้าเว็บ องค์ประกอบจึงหายไปอีกครั้ง
3. ในองค์ประกอบ > รูปแบบ ให้คลิก :hov, ทำเครื่องหมาย check_box จำลองหน้าเว็บที่โฟกัส และตรวจสอบว่าได้เลือกองค์ประกอบอินพุตแล้ว ตอนนี้คุณสามารถตรวจสอบองค์ประกอบภายใต้องค์ประกอบนั้นได้แล้ว

นอกจากนี้ คุณยังดูตัวเลือกเดียวกันได้ในแผงการเรนเดอร์

ดูวิธีอื่นๆ ในการตรึงองค์ประกอบได้ที่ตรึงหน้าจอและตรวจสอบองค์ประกอบที่หายไป

สลับสถานะของคลาสเสมือน

วิธีสลับสถานะของคลาสเสมือน

1. เลือกองค์ประกอบ
2. ในแผงองค์ประกอบ ให้ไปที่แท็บสไตล์
3. คลิก :hov
4. เลือกสถานะจำลองที่ต้องการเปิด

ในตัวอย่างนี้ คุณจะเห็นว่าเครื่องมือสำหรับนักพัฒนาเว็บใช้ประกาศ background-color กับองค์ประกอบ แม้ว่าในความเป็นจริงแล้วจะไม่ได้วางเมาส์เหนือองค์ประกอบนั้นก็ตาม

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

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

นอกจากนี้ องค์ประกอบบางอย่างอาจมี Pseudo-Class ของตัวเอง เมื่อเลือกองค์ประกอบดังกล่าว แท็บรูปแบบจะแสดงส่วนบังคับใช้สถานะเฉพาะขององค์ประกอบ ซึ่งคุณสามารถขยายและเปิดคลาสจำลองที่เฉพาะเจาะจงกับองค์ประกอบได้

ดูบทแนะนำแบบอินเทอร์แอกทีฟได้ที่เพิ่มสถานะจำลองในคลาส

ดูองค์ประกอบเสมือนไฮไลต์ที่รับช่วงมา

องค์ประกอบเสมือนช่วยให้คุณจัดรูปแบบส่วนที่เฉพาะเจาะจงขององค์ประกอบได้ ไฮไลต์ขององค์ประกอบเสมือนคือส่วนของเอกสารที่มีสถานะเป็น "เลือกแล้ว" และมีการจัดรูปแบบเป็น "ไฮไลต์" เพื่อระบุสถานะนี้ต่อผู้ใช้ เช่น ::selection, ::spelling-error, ::grammar-error และ ::highlight

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

หากต้องการทำความเข้าใจการรับค่าและการจัดลำดับความสำคัญของกฎได้ดียิ่งขึ้น คุณสามารถดูองค์ประกอบเสมือนของการไฮไลต์ที่รับค่าได้โดยทำดังนี้

1. ตรวจสอบข้อความด้านล่าง

   ฉันรับช่วงสไตล์ขององค์ประกอบเสมือนไฮไลต์ของพ่อแม่ เลือกฉัน

2. เลือกส่วนของข้อความด้านบน

3. ในแท็บสไตล์ ให้เลื่อนลงเพื่อหาส่วน Inherited from ::selection pseudo of...

ดูเลเยอร์แบบเรียงซ้อน

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

หากต้องการดูเลเยอร์แบบเรียงซ้อน ให้ตรวจสอบองค์ประกอบถัดไป แล้วเปิดองค์ประกอบ > รูปแบบ

ในแท็บรูปแบบ ให้ดูเลเยอร์แบบเรียงซ้อน 3 เลเยอร์และรูปแบบของเลเยอร์เหล่านั้น ได้แก่ page, component และ base

หากต้องการดูลำดับเลเยอร์ ให้คลิกชื่อเลเยอร์หรือปุ่ม สลับมุมมองเลเยอร์ CSS

เลเยอร์ page มีความเฉพาะเจาะจงสูงสุด ดังนั้นพื้นหลังขององค์ประกอบจึงเป็นสีเขียว

ดูหน้าในโหมดการพิมพ์

วิธีดูหน้าเว็บในโหมดการพิมพ์

1. เปิดเมนูคำสั่ง
2. เริ่มพิมพ์ Rendering แล้วเลือก Show Rendering
3. เลือก print ในเมนูแบบเลื่อนลงจำลองสื่อ CSS

ดู CSS ที่ใช้และไม่ได้ใช้ด้วยแท็บ Coverage

แท็บความครอบคลุมจะแสดง CSS ที่หน้าเว็บใช้จริง

1. กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) ขณะที่ DevTools อยู่ในโฟกัสเพื่อเปิดเมนูคำสั่ง

2. เริ่มพิมพ์ coverage

   

3. เลือกแสดงความครอบคลุม แท็บความครอบคลุมจะปรากฏขึ้น

   

4. คลิก โหลดซ้ำ หน้าเว็บจะโหลดซ้ำและแท็บความครอบคลุมจะแสดงภาพรวมของปริมาณ CSS (และ JavaScript) ที่ ใช้จากแต่ละไฟล์ที่เบราว์เซอร์โหลด

   

   สีเขียวแสดงถึง CSS ที่ใช้ สีแดงแสดงถึง CSS ที่ไม่ได้ใช้

5. คลิกไฟล์ CSS เพื่อดูรายละเอียดทีละบรรทัดของ CSS ที่ใช้ในการแสดงตัวอย่างด้านบน

   

   ในภาพหน้าจอ บรรทัดที่ 55-57 และ 65-67 ของ devsite-google-blue.css ไม่ได้ใช้ ในขณะที่บรรทัดที่ 59-63 มีการใช้งาน

บังคับใช้โหมดแสดงตัวอย่างก่อนพิมพ์

ดูบังคับให้เครื่องมือสำหรับนักพัฒนาเว็บเข้าสู่โหมดแสดงตัวอย่างก่อนพิมพ์

คัดลอก CSS

จากเมนูแบบเลื่อนลงเดียวในแท็บรูปแบบ คุณสามารถคัดลอกกฎ CSS, การประกาศ, พร็อพเพอร์ตี้, ค่าแยกกันได้

นอกจากนี้ คุณยังคัดลอกพร็อพเพอร์ตี้ CSS ในไวยากรณ์ JavaScript ได้ด้วย ตัวเลือกนี้มีประโยชน์หากคุณใช้ไลบรารี CSS-in-JS

วิธีคัดลอก CSS

1. เลือกองค์ประกอบ
2. ในแท็บองค์ประกอบ > รูปแบบ ให้คลิกขวาที่พร็อพเพอร์ตี้ CSS

3. เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากเมนูแบบเลื่อนลง

   • คัดลอกประกาศ คัดลอกพร็อพเพอร์ตี้และค่าในไวยากรณ์ CSS ดังนี้ css property: value;
   • คัดลอกพร็อพเพอร์ตี้ คัดลอกเฉพาะpropertyชื่อ
   • คัดลอกค่า คัดลอกเฉพาะ value
   • คัดลอกกฎ คัดลอกกฎ CSS ทั้งหมด css selector[, selector] { property: value; property: value; ... }
   • คัดลอกประกาศเป็น JS คัดลอกพร็อพเพอร์ตี้และค่าในไวยากรณ์ JavaScript ดังนี้ js propertyInCamelCase: 'value'
   • คัดลอกประกาศทั้งหมด คัดลอกพร็อพเพอร์ตี้และค่าทั้งหมดในกฎ CSS ดังนี้ css property: value; property: value; ...

   • คัดลอกประกาศทั้งหมดเป็น JS คัดลอกพร็อพเพอร์ตี้ทั้งหมดและค่าของพร็อพเพอร์ตี้ในไวยากรณ์ JavaScript ดังนี้ ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • คัดลอกการเปลี่ยนแปลง CSS ทั้งหมด คัดลอกการเปลี่ยนแปลงที่คุณทำในแท็บรูปแบบไปยังการประกาศทั้งหมด

   • ดูค่าที่คำนวณแล้ว นำคุณไปยังแท็บคำนวณ

เปลี่ยน CSS

ส่วนนี้แสดงวิธีทั้งหมดที่คุณสามารถเปลี่ยน CSS ในองค์ประกอบ > รูปแบบ

นอกจากนี้ คุณยังทำสิ่งต่อไปนี้ได้ด้วย

• ลบล้าง CSS ในการโหลดหน้าเว็บ
• บันทึก CSS ที่แก้ไขแล้วลงในแหล่งข้อมูลในเครื่องใน Workspace

เปลี่ยน CSS ด้วยการเติมโค้ดอัตโนมัติ

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

เพิ่มการประกาศ CSS ลงในองค์ประกอบ

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

• เพิ่มประกาศในบรรทัด เทียบเท่ากับการเพิ่มแอตทริบิวต์ style ลงใน HTML ขององค์ประกอบ
• เพิ่มการประกาศในกฎสไตล์

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

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

เพิ่มการประกาศในบรรทัด

วิธีเพิ่มการประกาศในบรรทัด

1. เลือกองค์ประกอบ
2. ในแท็บรูปแบบ ให้คลิกระหว่างวงเล็บของส่วน element.style เคอร์เซอร์ จะโฟกัสเพื่อให้คุณป้อนข้อความได้
3. ป้อนชื่อพร็อพเพอร์ตี้แล้วกด Enter

4. ป้อนค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นั้น แล้วกด Enter ในโครงสร้าง DOM คุณจะเห็นว่ามีการเพิ่มแอตทริบิวต์ style ลงในองค์ประกอบ

   

   ในภาพหน้าจอ ระบบได้ใช้พร็อพเพอร์ตี้ margin-top และ background-color กับองค์ประกอบที่เลือก ในโครงสร้าง DOM คุณจะเห็นการประกาศที่แสดงในแอตทริบิวต์ style ขององค์ประกอบ

เพิ่มการประกาศลงในกฎสไตล์

วิธีเพิ่มการประกาศลงในกฎสไตล์ที่มีอยู่

1. เลือกองค์ประกอบ
2. ในแท็บรูปแบบ ให้คลิกระหว่างวงเล็บของกฎรูปแบบที่ต้องการเพิ่ม การประกาศ เคอร์เซอร์จะโฟกัสเพื่อให้คุณป้อนข้อความได้
3. ป้อนชื่อพร็อพเพอร์ตี้แล้วกด Enter
4. ป้อนค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นั้น แล้วกด Enter

ในภาพหน้าจอ กฎรูปแบบจะได้รับการประกาศ border-bottom-style:groove ใหม่

เปลี่ยนชื่อหรือค่าการประกาศ

ดับเบิลคลิกชื่อหรือค่าของการประกาศเพื่อเปลี่ยน ดูเปลี่ยนค่าที่แจงนับได้ด้วย แป้นพิมพ์ลัดสำหรับแป้นพิมพ์ลัดเพื่อเพิ่มหรือลดค่าอย่างรวดเร็วทีละ 0.1, 1, 10 หรือ 100 หน่วย

เปลี่ยนค่าที่แจงนับได้ด้วยแป้นพิมพ์ลัด

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

• Option+ขึ้น (Mac) หรือ Alt+ขึ้น (Windows, Linux) เพื่อ เพิ่มขึ้นทีละ 0.1
• ขึ้นเพื่อเปลี่ยนค่าทีละ 1 หรือทีละ 0.1 หากค่าปัจจุบันอยู่ระหว่าง -1 ถึง 1
• Shift+ขึ้นเพื่อเพิ่มทีละ 10
• Shift+Command+ขึ้น (Mac) หรือ Control+Shift+Page Up (Windows, Linux) เพื่อเพิ่มค่าทีละ 100

การลดค่าก็ใช้ได้เช่นกัน เพียงแทนที่อินสแตนซ์แต่ละรายการของ Up ที่กล่าวถึงก่อนหน้านี้ด้วย Down

เปลี่ยนค่าความยาว

คุณใช้เคอร์เซอร์เพื่อเปลี่ยนพร็อพเพอร์ตี้ที่มีความยาวได้ เช่น ความกว้าง ความสูง ระยะเว้นภายใน ขอบ หรือเส้นขอบ

วิธีเปลี่ยนหน่วยความยาว

1. วางเมาส์เหนือชื่อหน่วย แล้วสังเกตว่าชื่อมีขีดเส้นใต้

2. คลิกชื่อหน่วยเพื่อเลือกหน่วยจากเมนูแบบเลื่อนลง

วิธีเปลี่ยนค่าความยาว

1. วางเมาส์เหนือมูลค่าหน่วย แล้วสังเกตว่าเคอร์เซอร์เปลี่ยนเป็นลูกศรสองหัวแนวนอน

2. ลากในแนวนอนเพื่อเพิ่มหรือลดค่า

หากต้องการปรับค่าทีละ 10 ให้กด Shift ค้างไว้ขณะลาก

เพิ่มคลาสไปยังองค์ประกอบ

วิธีเพิ่มคลาสไปยังองค์ประกอบ

1. เลือกองค์ประกอบในแผนผัง DOM
2. คลิก .cls
3. ป้อนชื่อชั้นเรียนในช่องเพิ่มชั้นเรียนใหม่
4. กด Enter

จำลองค่ากำหนดธีมสว่างและธีมมืด รวมถึงเปิดใช้โหมดมืดอัตโนมัติ

หากต้องการสลับโหมดมืดอัตโนมัติหรือจำลองค่ากำหนดของธีมสว่างหรือมืดของผู้ใช้ ให้ทำดังนี้

1. ในแท็บองค์ประกอบ > รูปแบบ ให้คลิก สลับการจำลองการแสดงผลทั่วไป

2. เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง

   • prefers-color-scheme: light ระบุว่าผู้ใช้ต้องการใช้ธีมสว่าง
   • prefers-color-scheme: dark ระบุว่าผู้ใช้ต้องการธีมมืด
   • โหมดมืดอัตโนมัติ แสดงหน้าเว็บในโหมดมืดแม้ว่าคุณจะไม่ได้ใช้โหมดมืดก็ตาม นอกจากนี้ ยังตั้งค่า prefers-color-scheme เป็น dark โดยอัตโนมัติด้วย

เมนูแบบเลื่อนลงนี้เป็นทางลัดสำหรับตัวเลือกจำลองฟีเจอร์สื่อ CSS prefers-color-scheme และเปิดใช้โหมดมืดอัตโนมัติของแท็บการแสดงผล

สลับชั้นเรียน

วิธีเปิดหรือปิดใช้คลาสในองค์ประกอบ

1. เลือกองค์ประกอบในแผนผัง DOM
2. เปิดส่วนคลาสขององค์ประกอบ ดูหัวข้อเพิ่มคลาสในองค์ประกอบ ใต้ช่องเพิ่ม คลาสใหม่จะมีคลาสทั้งหมดที่ใช้กับองค์ประกอบนี้
3. สลับช่องทำเครื่องหมายข้างชั้นเรียนที่ต้องการเปิดหรือปิดใช้

เพิ่มกฎสไตล์

วิธีเพิ่มกฎรูปแบบใหม่

1. เลือกองค์ประกอบ
2. คลิกกฎสไตล์ใหม่ เครื่องมือสำหรับนักพัฒนาเว็บจะแทรก กฎใหม่ไว้ใต้กฎ element.style

ในภาพหน้าจอ DevTools จะเพิ่มh1.devsite-page-titleกฎสไตล์หลังจากคลิกกฎสไตล์ใหม่

เลือกสไตล์ชีตที่จะเพิ่มกฎ

เมื่อเพิ่มกฎรูปแบบใหม่ ให้คลิกและกดกฎรูปแบบใหม่ เพื่อเลือกชีตสไตล์ ที่จะเพิ่มกฎรูปแบบ

เปิด/ปิดการประกาศ

วิธีเปิดหรือปิดการประกาศรายการเดียว

1. เลือกองค์ประกอบ
2. ในแท็บรูปแบบ ให้วางเมาส์เหนือกฎที่กำหนดการประกาศ ช่องทำเครื่องหมายจะปรากฏข้าง การประกาศแต่ละรายการ
3. เลือกหรือยกเลิกการเลือกช่องทําเครื่องหมายข้างประกาศ เมื่อล้างการประกาศแล้ว DevTools จะขีดทับเพื่อระบุว่าการประกาศนั้นไม่ได้ใช้งานอีกต่อไป

ในภาพหน้าจอ ระบบจะปิดพร็อพเพอร์ตี้ color สำหรับองค์ประกอบที่เลือกในปัจจุบัน

แก้ไข::view-transitionองค์ประกอบเสมือนระหว่างภาพเคลื่อนไหว

ดูส่วนที่เกี่ยวข้องในภาพเคลื่อนไหว

ดูข้อมูลเพิ่มเติมได้ที่การเปลี่ยนผ่านที่ราบรื่นและง่ายดายด้วย View Transitions API

จัดแนวรายการตารางกริดและเนื้อหาของรายการด้วยเครื่องมือแก้ไขตารางกริด

ดูส่วนที่เกี่ยวข้องในตรวจสอบตารางกริด CSS

เปลี่ยนสีด้วยตัวเลือกสี

ดูตรวจสอบและแก้ไขข้อบกพร่องของสี HD และสีที่ไม่ใช่ HD ด้วยตัวเลือกสี

เปลี่ยนค่ามุมด้วยนาฬิกามุม

Angle Clock มี GUI สำหรับเปลี่ยน <angle>s ในค่าพร็อพเพอร์ตี้ CSS

วิธีเปิดนาฬิกามุม

1. เลือกองค์ประกอบที่มีการประกาศมุม

2. ในแท็บรูปแบบ ให้ค้นหาประกาศ transform หรือ background ที่ต้องการเปลี่ยน คลิกช่องแสดงตัวอย่างมุมข้างค่ามุม

   

   นาฬิกาขนาดเล็กทางด้านซ้ายของ -5deg และ 0.25turn คือตัวอย่างมุม

3. คลิกตัวอย่างเพื่อเปิดนาฬิกามุม

   

4. เปลี่ยนค่ามุมโดยคลิกวงกลมนาฬิกามุม หรือเลื่อนเมาส์เพื่อ เพิ่ม / ลดค่ามุมทีละ 1

5. มีแป้นพิมพ์ลัดเพิ่มเติมสำหรับเปลี่ยนค่ามุม ดูข้อมูลเพิ่มเติมได้ในแป้นพิมพ์ลัดของบานหน้าต่างรูปแบบ

เปลี่ยนเงาของกล่องและข้อความด้วยตัวแก้ไขเงา

Shadow Editor มี GUI สำหรับการเปลี่ยนประกาศ CSS ของ text-shadow และ box-shadow

วิธีเปลี่ยนเงาด้วยเครื่องมือแก้ไขเงา

1. เลือกองค์ประกอบที่มีการประกาศเงา เช่น เลือกองค์ประกอบถัดไป

2. ในแท็บสไตล์ ให้มองหาไอคอนเงา ข้างประกาศ text-shadow หรือ box-shadow

   

3. คลิกไอคอนเงาเพื่อเปิดตัวแก้ไขเงา

   

4. เปลี่ยนคุณสมบัติของเงา

   • ประเภท (สำหรับ box-shadow เท่านั้น) เลือกเริ่มต้นหรือแทรก
   • ออฟเซ็ต X และ Y ลากจุดสีน้ำเงินหรือระบุค่า
   • เบลอ ลากแถบเลื่อนหรือระบุค่า
   • สเปรด (สำหรับ box-shadow เท่านั้น) ลากแถบเลื่อนหรือระบุค่า

5. สังเกตการเปลี่ยนแปลงที่ใช้กับองค์ประกอบ

แก้ไขเวลาของภาพเคลื่อนไหวและการเปลี่ยนฉากด้วยเครื่องมือแก้ไขการค่อยๆ เปลี่ยน

เครื่องมือแก้ไขการค่อยๆ เปลี่ยนมี GUI สำหรับเปลี่ยนค่าของ transition-timing-function และ animation-timing-function

วิธีเปิดเครื่องมือแก้ไขการเปลี่ยนค่า

1. เลือกองค์ประกอบที่มีการประกาศฟังก์ชันการกำหนดเวลา เช่น องค์ประกอบ <body> ในหน้านี้
2. ในแท็บรูปแบบ ให้มองหาไอคอน สีม่วงข้างประกาศ transition-timing-function, animation-timing-function หรือพร็อพเพอร์ตี้แบบย่อ transition
3. คลิกไอคอนเพื่อเปิดเครื่องมือแก้ไขการเปลี่ยน

ใช้ค่าที่กำหนดล่วงหน้าเพื่อปรับเวลา

หากต้องการปรับช่วงเวลาด้วยการคลิก ให้ใช้ค่าที่กำหนดล่วงหน้าในเครื่องมือแก้ไขการค่อยๆ เปลี่ยน

1. ในเครื่องมือแก้ไขการค่อยๆ เปลี่ยน ให้คลิกปุ่มตัวเลือกปุ่มใดปุ่มหนึ่งต่อไปนี้เพื่อตั้งค่าคีย์เวิร์ด
   • เชิงเส้น
   • ค่อยๆ เข้า-ออก
   • ค่อยๆ เข้า
   • ease-out

2. ในตัวสลับค่าที่กำหนดล่วงหน้า ให้คลิกปุ่ม หรือ เพื่อเลือกค่าที่กำหนดล่วงหน้าต่อไปนี้

   • ค่าที่กำหนดล่วงหน้าแบบเชิงเส้น: elastic, bounce หรือ emphasized
   • ค่าที่กำหนดล่วงหน้าของ Cubic Bezier

คีย์เวิร์ดช่วงเวลา	ค่าที่กำหนดล่วงหน้า	Cubic Bezier
ค่อยๆ เข้า-ออก	เข้า ออก ไซน์	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	เข้า ออก กำลังสอง	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	เข้าออก ลูกบาศก์	cubic-bezier(0.65, 0.05, 0.36, 1)
	ออกเร็ว เข้าช้า	cubic-bezier(0.4, 0, 0.2, 1)
	เข้า ออก กลับ	cubic-bezier(0.68, -0.55, 0.27, 1.55)
ค่อยๆ เข้า	อิน ไซน์	cubic-bezier(0.47, 0, 0.75, 0.72)
	ใน, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	ใน Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	เข้า กลับ	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	ออกอย่างรวดเร็ว เข้าอย่างเชิงเส้น	cubic-bezier(0.4, 0, 1, 1)
ค่อยๆ ออก	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	ออก กำลังสอง	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	ออกเชิงเส้น เข้าช้า	cubic-bezier(0, 0, 0.2, 1)
	ออก กลับ	cubic-bezier(0.18, 0.89, 0.32, 1.28)

กำหนดค่าช่วงเวลาที่กำหนดเอง

หากต้องการตั้งค่าที่กำหนดเองสำหรับฟังก์ชันการจับเวลา ให้ใช้จุดควบคุมในบรรทัด

• สำหรับฟังก์ชันเชิงเส้น ให้คลิกที่ใดก็ได้บนเส้นเพื่อเพิ่มจุดควบคุมแล้วลาก ดับเบิลคลิกเพื่อนำจุดออก

  

• สำหรับฟังก์ชันเบซิเยร์รูปลูกบาศก์ ให้ลากจุดควบคุมจุดใดจุดหนึ่ง

  

การเปลี่ยนแปลงใดๆ จะทําให้เกิดภาพเคลื่อนไหวของลูกบอลในตัวอย่างที่ด้านบนของเครื่องมือแก้ไข

(ทดลอง) คัดลอกการเปลี่ยนแปลง CSS

เมื่อเปิดใช้การทดสอบนี้ แท็บรูปแบบจะไฮไลต์การเปลี่ยนแปลง CSS เป็นสีเขียว

หากต้องการคัดลอกการเปลี่ยนแปลงการประกาศ CSS รายการเดียว ให้วางเมาส์เหนือการประกาศที่ไฮไลต์ แล้วคลิกปุ่ม คัดลอก

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

นอกจากนี้ คุณยังติดตามการเปลี่ยนแปลงที่ทำได้ด้วยแท็บการเปลี่ยนแปลง