ค้นพบเวิร์กโฟลว์ใหม่ในข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่เกี่ยวข้องกับ การดูและการเปลี่ยน CSS
โปรดดูที่ดูและเปลี่ยน CSS เพื่อเรียนรู้ข้อมูลพื้นฐาน
เลือกองค์ประกอบ
คุณดูหรือเปลี่ยน CSS ขององค์ประกอบทีละองค์ประกอบได้ในแผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บ
ในภาพหน้าจอ องค์ประกอบ h1 ที่ไฮไลต์เป็นสีน้ำเงินในต้นไม้ DOM คือองค์ประกอบที่เลือก
ทางด้านขวา รูปแบบขององค์ประกอบจะแสดงในแท็บรูปแบบ ทางด้านซ้าย องค์ประกอบคือ
ที่ไฮไลต์ในวิวพอร์ต แต่เป็นเพียงเพราะเมาส์วางอยู่เหนือวิวพอร์ตใน DOM
ต้นไม้
โปรดดูบทแนะนำที่หัวข้อดู CSS ขององค์ประกอบ
การเลือกองค์ประกอบทำได้หลายวิธี ดังนี้
- ในวิวพอร์ต ให้คลิกขวาที่องค์ประกอบและเลือกตรวจสอบ
- คลิกเลือกองค์ประกอบในเครื่องมือสำหรับนักพัฒนาเว็บ
หรือกด Command+Shift+C (Mac) หรือ
Control+Shift+C (Windows, Linux) แล้วคลิกองค์ประกอบใน
วิวพอร์ต - คลิกองค์ประกอบในแผนผัง DOM ใน DevTools
- ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้เรียกใช้คำค้นหา เช่น
document.querySelector('p')ในคอนโซล ให้คลิกขวาที่ แล้วเลือกแสดงในแผงองค์ประกอบ
ดู CSS
ใช้องค์ประกอบ > รูปแบบและแท็บที่คำนวณแล้วเพื่อดูกฎ CSS และวินิจฉัยปัญหา CSS
นำทางด้วยลิงก์
แท็บรูปแบบแสดงลิงก์ในที่ต่างๆ เพื่อไปยังที่อื่นๆ ซึ่งรวมถึงแต่ไม่จำกัดเพียง
- ถัดจากกฎ CSS เพื่อไปยังสไตล์ชีตและแหล่งที่มาของ CSS ลิงก์ดังกล่าวจะเปิดแผงแหล่งที่มา หากมีการลดขนาดของสไตล์ชีต โปรดดูทำให้ไฟล์ที่ลดขนาดลงสามารถอ่านได้
- ในส่วนรับค่าจาก ... ไปยังองค์ประกอบหลัก
- ในการเรียก
var()ไปยังการประกาศพร็อพเพอร์ตี้ที่กำหนดเอง - ในพร็อพเพอร์ตี้ชวเลข
animationไปยัง@keyframes - ลิงก์ดูข้อมูลเพิ่มเติมในเคล็ดลับเครื่องมือเอกสารประกอบ
- และอื่นๆ อีกมากมาย
นี่เป็นบางส่วนที่ไฮไลต์:
ลิงก์อาจมีรูปแบบแตกต่างออกไป หากไม่แน่ใจว่าลิงก์ใดเป็นลิงก์หรือไม่ ให้ลองคลิกลิงก์เพื่อดูต่อ
ดูเคล็ดลับเครื่องมือที่มีเอกสารประกอบ CSS ความเจาะจง และค่าพร็อพเพอร์ตี้ที่กำหนดเอง
องค์ประกอบ > รูปแบบแสดงเคล็ดลับเครื่องมือพร้อมข้อมูลที่เป็นประโยชน์เมื่อคุณวางเมาส์เหนือองค์ประกอบที่เฉพาะเจาะจง
ดูเอกสารประกอบ CSS
หากต้องการดูเคล็ดลับเครื่องมือที่มีคำอธิบาย CSS สั้นๆ ให้วางเมาส์เหนือชื่อพร็อพเพอร์ตี้ในแท็บรูปแบบ
คลิกดูข้อมูลเพิ่มเติมเพื่อไปยังการอ้างอิง MN CSS ในพร็อพเพอร์ตี้นี้
หากต้องการปิดเคล็ดลับเครื่องมือ ให้เลือก 
ไม่แสดง
หากต้องการเปิดอีกครั้ง ให้ตรวจสอบ 
การตั้งค่า > ค่ากำหนด > องค์ประกอบ > 
แสดงเคล็ดลับเครื่องมือเอกสารประกอบ CSS
ดูข้อมูลที่เจาะจงของตัวเลือก
วางเมาส์เหนือตัวเลือกเพื่อดูเคล็ดลับเครื่องมือที่มีน้ำหนักความเจาะจง
ดูค่าของพร็อพเพอร์ตี้ที่กำหนดเอง
วางเมาส์เหนือ --custom-property เพื่อดูค่าในเคล็ดลับเครื่องมือ
ดู CSS ที่ไม่ถูกต้อง ลบล้าง ไม่ได้ใช้งาน และ CSS อื่นๆ
แท็บรูปแบบจะจดจำปัญหา CSS หลายประเภทและไฮไลต์ปัญหาเหล่านั้นด้วยวิธีที่ต่างกัน
ดูทำความเข้าใจ CSS ในแท็บรูปแบบ
ดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริงๆ
แท็บรูปแบบจะแสดงกฎทั้งหมดที่ใช้กับองค์ประกอบ รวมถึงการประกาศที่ ถูกลบล้างแล้ว เมื่อคุณไม่สนใจการประกาศที่ถูกลบล้าง ให้ใช้คอลัมน์ที่คำนวณ เพื่อดูเฉพาะ CSS ที่กำลังใช้กับองค์ประกอบ
- เลือกองค์ประกอบเดียว
- ไปที่แท็บคํานวณในแผงองค์ประกอบ
เลือกช่องทำเครื่องหมายแสดงทั้งหมดเพื่อดูพร็อพเพอร์ตี้ทั้งหมด
ดูทำความเข้าใจ CSS ในแท็บที่คำนวณ
ดูพร็อพเพอร์ตี้ CSS ตามลำดับตัวอักษร
ใช้แท็บที่คำนวณ โปรดดูหัวข้อดูเฉพาะ CSS ที่ใช้กับองค์ประกอบจริงๆ
ดูพร็อพเพอร์ตี้ CSS ที่รับช่วงมา
เลือกช่องทำเครื่องหมายแสดงทั้งหมดในแท็บคำนวณ โปรดดูที่ดูเฉพาะ CSS ที่ ใช้กับองค์ประกอบหนึ่งๆ
อีกวิธีหนึ่งคือการเลื่อนแท็บรูปแบบ และหาส่วนที่ชื่อ Inherited from <element_name>
ดูกฎ at ของ CSS
กฎคือคำสั่ง CSS ที่ให้คุณควบคุมลักษณะการทำงานของ CSS องค์ประกอบ > รูปแบบจะแสดงกฎ @ ต่อไปนี้ในส่วนเฉพาะ
ดูกฎที่ @property ข้อ
กฎ at ใน CSS ของ @property ช่วยให้คุณกำหนดคุณสมบัติที่กำหนดเองของ CSS ได้อย่างชัดแจ้ง และลงทะเบียนในสไตล์ชีตโดยไม่ต้องเรียกใช้ JavaScript ใดๆ
วางเมาส์เหนือชื่อของพร็อพเพอร์ตี้ดังกล่าวในแท็บรูปแบบเพื่อดูเคล็ดลับเครื่องมือที่มีค่า คำอธิบาย และลิงก์ไปยังการลงทะเบียนของพร็อพเพอร์ตี้ในส่วน @property ที่ยุบได้ที่ด้านล่างของแท็บรูปแบบ
หากต้องการแก้ไขกฎ @property ให้ดับเบิลคลิกชื่อหรือค่าของกฎ
ดูกฎที่ @supports ข้อ
แท็บรูปแบบจะแสดงกฎแอตทริบิวต์ @supports ของ CSS หากมีการใช้กับองค์ประกอบ ตัวอย่างเช่น ตรวจสอบองค์ประกอบต่อไปนี้
หากเบราว์เซอร์รองรับฟังก์ชัน lab() องค์ประกอบจะเป็นสีเขียว ไม่เช่นนั้นจะเป็นสีม่วง
ดูกฎที่ @scope ข้อ
แท็บรูปแบบจะแสดง CSS @scope ของกฎ หากมีการใช้กับองค์ประกอบ
กฎ @scope ใหม่เป็นส่วนหนึ่งของข้อกำหนดการ Cascading ของ CSS และการรับค่าระดับ 6 กฎเหล่านี้ช่วยให้คุณกำหนดขอบเขตสไตล์ CSS ได้ ซึ่งก็คือการใช้สไตล์กับองค์ประกอบที่เฉพาะเจาะจงอย่างชัดเจน
ดูกฎ @scope ในหน้าตัวอย่างต่อไปนี้
- ตรวจสอบข้อความในการ์ดในตัวอย่าง
- ในแท็บรูปแบบ ให้ค้นหากฎ
@scope
ในตัวอย่างนี้ กฎ @scope จะลบล้างการประกาศ CSS background-color ร่วมสำหรับองค์ประกอบ <p> ทั้งหมดภายในองค์ประกอบที่มีคลาส card
หากต้องการแก้ไขกฎ @scope ให้ดับเบิลคลิก
ดูกฎที่ @font-palette-values ข้อ
กฎแอตทริบิวต์ @font-palette-values สำหรับ CSS ช่วยให้คุณปรับแต่งค่าเริ่มต้นของพร็อพเพอร์ตี้ font-palette ได้ องค์ประกอบ > รูปแบบจะแสดงกฎ @ นี้ในส่วนเฉพาะ
ดูส่วน @font-palette-values ในหน้าตัวอย่างถัดไป:
- ตรวจสอบข้อความบรรทัดที่ 2 ในตัวอย่าง
- ในรูปแบบ ให้ค้นหาส่วน
@font-palette-values
ในตัวอย่างนี้ ค่าของชุดสีแบบอักษร --New จะลบล้างค่าเริ่มต้นของแบบอักษรสี
หากต้องการแก้ไขค่าที่กำหนดเอง ให้ดับเบิลคลิกค่าดังกล่าว
ดูกฎที่ @position-try ข้อ
กฎ CSS @position-try พร้อมด้วยพร็อพเพอร์ตี้ position-try-options ให้คุณกำหนดตำแหน่ง Anchor สำรองสำหรับองค์ประกอบได้ ดูข้อมูลเพิ่มเติมได้ในการแนะนำ CSS Anchor Positioning API
องค์ประกอบ > รูปแบบจะแก้ไขและลิงก์รายการต่อไปนี้
position-try-optionsของพร็อพเพอร์ตี้ลงในส่วน@position-try --nameเฉพาะ- ค่าพร็อพเพอร์ตี้
position-anchorและอาร์กิวเมนต์anchor()ไปยังองค์ประกอบที่สอดคล้องกันซึ่งมีแอตทริบิวต์popovertarget
ตรวจสอบค่า position-try-options และ @position-try ส่วนในตัวอย่างถัดไป
popover- ในตัวอย่าง ให้เปิดเมนูย่อย ซึ่งก็คือ คลิกบัญชีของคุณ แล้วคลิกหน้าร้าน
- ตรวจสอบองค์ประกอบด้วย
id="submenu"ในตัวอย่าง - ในรูปแบบ ให้ค้นหาพร็อพเพอร์ตี้
position-try-optionsแล้วคลิกค่า--bottomแท็บรูปแบบจะนำคุณไปยังส่วน@position-tryที่เกี่ยวข้อง - คลิกลิงก์ค่า
position-anchorหรืออาร์กิวเมนต์anchor()เดียวกัน แผงองค์ประกอบจะเลือกองค์ประกอบที่มีแอตทริบิวต์popovertargetที่สอดคล้องกัน และแท็บรูปแบบจะแสดง CSS ขององค์ประกอบ
หากต้องการแก้ไขค่า ให้ดับเบิลคลิกค่าดังกล่าว
ดูรูปแบบช่องขององค์ประกอบ
หากต้องการดูรูปแบบช่องขององค์ประกอบ ให้ไปที่แท็บรูปแบบ แล้วคลิกปุ่ม 
แสดงแถบด้านข้างในแถบการทำงาน
หากต้องการเปลี่ยนค่า ให้ดับเบิลคลิกค่านั้น
ค้นหาและกรอง CSS ขององค์ประกอบ
ใช้ช่องตัวกรองในแท็บรูปแบบและที่คำนวณเพื่อค้นหา CSS ที่เฉพาะเจาะจง พร็อพเพอร์ตี้หรือค่า
หากต้องการค้นหาพร็อพเพอร์ตี้ที่รับช่วงมาในแท็บคํานวณด้วย ให้เลือกช่องทําเครื่องหมายแสดงทั้งหมด
หากต้องการไปยังแท็บที่คำนวณแล้ว ให้จัดกลุ่มพร็อพเพอร์ตี้ที่กรองในหมวดหมู่ที่ยุบได้โดยการเลือกกลุ่ม
จำลองหน้าที่โฟกัส
หากคุณเปลี่ยนโฟกัสจากหน้าเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ องค์ประกอบการวางซ้อนบางอย่างจะซ่อนโดยอัตโนมัติหากมีการทริกเกอร์โดยโฟกัส ตัวอย่างเช่น รายการแบบเลื่อนลง เมนู หรือเครื่องมือเลือกวันที่ check_boxตัวเลือกจำลองหน้าที่โฟกัสจะช่วยให้คุณแก้ไขข้อบกพร่องขององค์ประกอบดังกล่าวได้เหมือนกับว่าองค์ประกอบนั้นอยู่ในโฟกัส
ลองจำลองหน้าที่โฟกัสในหน้าสาธิตนี้
- โฟกัสองค์ประกอบอินพุต มีองค์ประกอบอื่นปรากฏอยู่ด้านล่าง
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ ตอนนี้หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บอยู่ในโฟกัสแทนที่จะโฟกัสที่หน้าเว็บ ดังนั้นองค์ประกอบจะหายไปอีกครั้ง
- ในองค์ประกอบ > รูปแบบ คลิก :hov แล้วเลือกcheck_box จำลองหน้าที่โฟกัส และตรวจสอบว่าได้เลือกองค์ประกอบอินพุตแล้ว ตอนนี้คุณตรวจสอบองค์ประกอบที่อยู่ใต้องค์ประกอบนั้นได้แล้ว
คุณจะเห็นตัวเลือกเดียวกันนี้ในแผงการแสดงผลด้วย
สลับคลาสเทียม
วิธีสลับคลาสเทียม เช่น :active, :focus, :focus-within, :target, :hover, :visited หรือ focus-visible
- เลือกองค์ประกอบเดียว
- ในแผงองค์ประกอบ ให้ไปที่แท็บรูปแบบ
- คลิก :hov
- ตรวจสอบคลาสเทียมที่ต้องการเปิด
ในวิวพอร์ต คุณจะเห็นว่าเครื่องมือสำหรับนักพัฒนาเว็บใช้การประกาศ background-color กับองค์ประกอบ แม้ว่าจริงๆ แล้วองค์ประกอบจะไม่ได้วางเมาส์เหนือองค์ประกอบก็ตาม
ดูบทแนะนำแบบอินเทอร์แอกทีฟได้ที่เพิ่มองค์ประกอบสมมติลงในชั้นเรียน
ดูองค์ประกอบเทียมของไฮไลต์ที่รับช่วงมา
องค์ประกอบที่ไม่ระบุตัวบุคคลให้คุณจัดรูปแบบส่วนที่เฉพาะเจาะจงขององค์ประกอบได้ องค์ประกอบเทียมของไฮไลต์คือส่วนเอกสารที่มี "เลือกไว้" สถานะและจะจัดรูปแบบเป็น "ไฮไลต์" เพื่อระบุสถานะนี้ให้กับผู้ใช้ ตัวอย่างเช่น องค์ประกอบเทียมดังกล่าวคือ ::selection, ::spelling-error, ::grammar-error และ ::highlight
ตามที่ได้กล่าวไว้ในข้อกําหนด เมื่อรูปแบบหลายสไตล์ขัดแย้งกัน แบบ Cascade จะเป็นตัวกำหนดรูปแบบที่ชนะ
ดูองค์ประกอบเทียมของไฮไลต์ที่รับช่วงมาเพื่อให้เข้าใจการรับช่วงค่าและลำดับความสำคัญของกฎได้ดียิ่งขึ้น
-
ฉันรับรูปแบบองค์ประกอบเทียมของไฮไลต์ของผู้ปกครองมา เลือกฉัน
เลือกส่วนหนึ่งของข้อความด้านบน
ในแท็บรูปแบบ ให้เลื่อนลงเพื่อหาส่วน
Inherited from ::selection pseudo of...
ดูเลเยอร์แบบ Cascade
เลเยอร์การเรียงซ้อนช่วยให้ควบคุมไฟล์ CSS ได้อย่างชัดเจนยิ่งขึ้นเพื่อป้องกันความขัดแย้งของรูปแบบที่เจาะจง ซึ่งจะเป็นประโยชน์สำหรับฐานของโค้ดขนาดใหญ่ ระบบการออกแบบ และเมื่อจัดการสไตล์ของบุคคลที่สามในแอปพลิเคชัน
หากต้องการดูเลเยอร์แบบ Cascade ให้ตรวจสอบองค์ประกอบถัดไปและเปิดองค์ประกอบ > รูปแบบ
ในแท็บรูปแบบ ให้ดูเลเยอร์แบบ Cascade 3 เลเยอร์และรูปแบบ ดังนี้ page, component และ base
หากต้องการดูลำดับเลเยอร์ ให้คลิกชื่อเลเยอร์หรือปุ่ม 
สลับมุมมองเลเยอร์ CSS
เลเยอร์ page มีความจำเพาะสูงสุด พื้นหลังขององค์ประกอบจึงเป็นสีเขียว
ดูหน้าในโหมดการพิมพ์
วิธีดูหน้าในโหมดพิมพ์
- เปิดเมนูคำสั่ง
- เริ่มพิมพ์
Renderingแล้วเลือกShow Rendering - สำหรับเมนูแบบเลื่อนลงจำลอง CSS Media ให้เลือกพิมพ์
ดู CSS ที่ใช้และไม่ได้ใช้ด้วยแท็บการครอบคลุม
แท็บการครอบคลุมจะแสดง CSS ที่หน้าเว็บใช้จริงๆ
- กด Command+Shift+P (Mac) หรือ Control+Shift+P (Windows, Linux, ChromeOS) ขณะที่เครื่องมือสำหรับนักพัฒนาเว็บคือ ที่โฟกัสเพื่อเปิดเมนูคำสั่ง
เริ่มพิมพ์
coverage
เลือกแสดงการครอบคลุม แท็บความครอบคลุมจะปรากฏขึ้น
คลิก
โหลดซ้ำ
การโหลดหน้าซ้ำและแท็บการครอบคลุมจะแสดงภาพรวมของจำนวน CSS (และ JavaScript)
ที่ใช้จากแต่ละไฟล์ที่เบราว์เซอร์โหลดขึ้นมา
สีเขียวแสดงถึง CSS ที่ใช้ สีแดงแสดงถึง CSS ที่ไม่ได้ใช้
คลิกไฟล์ CSS เพื่อดูรายละเอียดทีละบรรทัดของ CSS ที่ไฟล์ใช้ในตัวอย่างด้านบน
ในภาพหน้าจอ เส้น 55-57 และ 65-67 ของ
devsite-google-blue.cssจะไม่มีการใช้งาน แต่จะใช้บรรทัดที่ 59 ถึง 63
บังคับใช้โหมดแสดงตัวอย่างก่อนพิมพ์
ดูบังคับให้เครื่องมือสำหรับนักพัฒนาเว็บอยู่ในโหมดแสดงตัวอย่างก่อนพิมพ์
คัดลอก CSS
คุณจะคัดลอกกฎ CSS, การประกาศ, คุณสมบัติ ค่า แยกกันได้จากเมนูแบบเลื่อนลงเดียวในแท็บรูปแบบ
นอกจากนี้ คุณยังคัดลอกพร็อพเพอร์ตี้ CSS ในไวยากรณ์ JavaScript ได้ด้วย ตัวเลือกนี้มีประโยชน์หากคุณใช้ไลบรารี CSS-in-JS
วิธีคัดลอก CSS
- เลือกองค์ประกอบเดียว
- ในองค์ประกอบ > ในแท็บรูปแบบ ให้คลิกขวาที่พร็อพเพอร์ตี้ CSS
เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากเมนูแบบเลื่อนลง
- คัดลอกการประกาศ คัดลอกพร็อพเพอร์ตี้และค่าในไวยากรณ์ 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 ลงในองค์ประกอบ
เนื่องจากลำดับของการประกาศส่งผลต่อวิธีจัดรูปแบบองค์ประกอบ คุณจึงเพิ่มการประกาศใน ได้หลายวิธีดังนี้
- เพิ่มการประกาศในบรรทัด เทียบเท่ากับการเพิ่มแอตทริบิวต์
styleลงใน HTML ขององค์ประกอบ - เพิ่มการประกาศลงในกฎรูปแบบ
คุณควรใช้เวิร์กโฟลว์ใด สำหรับสถานการณ์ส่วนใหญ่ คุณอาจต้องการใช้อินไลน์ ขั้นตอนการประกาศ การประกาศแบบอินไลน์มีความเฉพาะเจาะจงสูงกว่าการประกาศภายนอก ดังนั้นการประกาศในหน้า ทำให้มั่นใจได้ว่าการเปลี่ยนแปลงจะมีผลในองค์ประกอบตามที่คุณคาดไว้ ดูตัวเลือก ประเภทสำหรับข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลที่เฉพาะเจาะจง
ถ้าคุณกำลังแก้ไขข้อบกพร่องของสไตล์ขององค์ประกอบ และคุณต้องการทดสอบสิ่งที่เกิดขึ้นเมื่อ มีการกำหนดไว้ในที่ต่างๆ ให้ใช้เวิร์กโฟลว์อื่น
เพิ่มการประกาศแบบในหน้า
วิธีเพิ่มการประกาศในบรรทัด
- เลือกองค์ประกอบเดียว
- ในแท็บรูปแบบ ให้คลิกระหว่างวงเล็บเหลี่ยมของส่วน element.style เคอร์เซอร์ ช่วยให้คุณป้อนข้อความได้
- ป้อนชื่อพร็อพเพอร์ตี้และกด Enter
ป้อนค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นั้น แล้วกด Enter ใน DOM Tree คุณสามารถ เห็นว่ามีการเพิ่มแอตทริบิวต์
styleลงในองค์ประกอบ
ในภาพหน้าจอ ระบบได้นําพร็อพเพอร์ตี้
margin-topและbackground-colorไปใช้กับองค์ประกอบที่เลือก ในแผนผัง DOM คุณจะเห็นการประกาศที่แสดงในแอตทริบิวต์styleขององค์ประกอบ
เพิ่มการประกาศลงในกฎรูปแบบ
วิธีเพิ่มการประกาศลงในกฎรูปแบบที่มีอยู่
- เลือกองค์ประกอบเดียว
- ในแท็บรูปแบบ ให้คลิกระหว่างวงเล็บเหลี่ยมของกฎสไตล์ที่ต้องการเพิ่ม การประกาศดังกล่าว เคอร์เซอร์โฟกัสเพื่อให้คุณป้อนข้อความได้
- ป้อนชื่อพร็อพเพอร์ตี้และกด Enter
- ป้อนค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นั้น แล้วกด Enter
ในภาพหน้าจอ กฎรูปแบบจะได้รับการประกาศ border-bottom-style:groove ใหม่
เปลี่ยนชื่อหรือค่าของการประกาศ
ดับเบิลคลิกชื่อหรือค่าของประกาศเพื่อเปลี่ยน ดูเปลี่ยนค่าที่แจกแจงได้ด้วย แป้นพิมพ์ลัดสำหรับแป้นพิมพ์ลัดสำหรับการเพิ่มหรือลดค่าอย่างรวดเร็ว 0.1, 1 10 หรือ 100 หน่วย
เปลี่ยนค่าที่แจกแจงได้ด้วยแป้นพิมพ์ลัด
ขณะแก้ไขค่าแจกแจงของการประกาศ เช่น font-size คุณสามารถใช้แป้นพิมพ์ลัดต่อไปนี้เพื่อเพิ่มค่าตามจำนวนคงที่ได้
- Option+Up (Mac) หรือ Alt+Up (Windows, Linux) เพื่อ เพิ่มขึ้น 0.1
- ขึ้น เพื่อเปลี่ยนค่าทีละ 1 หรือ 0.1 หากค่าปัจจุบันอยู่ระหว่าง -1 ถึง 1
- Shift+ลูกศรขึ้น เพื่อเพิ่มทีละ 10
- Shift+Command+Up (Mac) หรือ Control+Shift+Page Up (Windows, Linux) เพื่อเพิ่มค่าขึ้น 100
การลดรูปก็ใช้ได้เช่นกัน เพียงแทนที่ Up แต่ละอินสแตนซ์ที่กล่าวไปก่อนหน้านี้ด้วย ลูกศรลง
เปลี่ยนค่าความยาว
คุณใช้เคอร์เซอร์เพื่อเปลี่ยนคุณสมบัติใดๆ ก็ตามที่มีความยาวได้ เช่น ความกว้าง ความสูง ระยะห่างจากขอบ ระยะขอบ หรือเส้นขอบ
วิธีเปลี่ยนหน่วยความยาว
- วางเมาส์เหนือชื่อหน่วยและสังเกตว่ามีการขีดเส้นใต้
คลิกชื่อหน่วยเพื่อเลือกหน่วยจากเมนูแบบเลื่อนลง
วิธีเปลี่ยนค่าความยาว
- วางเมาส์เหนือค่าหน่วย และสังเกตเห็นว่าเคอร์เซอร์เปลี่ยนเป็นลูกศร 2 หัวแนวนอน
ลากในแนวนอนเพื่อเพิ่มหรือลดค่า
หากต้องการปรับค่าทีละ 10 ให้กด Shift ค้างไว้ขณะลาก
เพิ่มคลาสให้กับองค์ประกอบ
วิธีเพิ่มคลาสลงในองค์ประกอบ
- เลือกองค์ประกอบในแผนผัง DOM
- คลิก .cls
- ป้อนชื่อชั้นเรียนในช่องเพิ่มชั้นเรียนใหม่
- กด Enter
จำลองค่ากำหนดธีมสว่างและธีมมืด รวมถึงเปิดใช้โหมดมืดอัตโนมัติ
หากต้องการสลับโหมดมืดอัตโนมัติหรือจำลองการตั้งค่าธีมสว่างหรือธีมมืดของผู้ใช้ ให้ทำดังนี้
- ในองค์ประกอบ > แท็บรูปแบบ ให้คลิก
สลับการจำลองการแสดงผลทั่วไป
เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง
- prefers-color-scheme: สว่าง ระบุว่าผู้ใช้ต้องการธีมสว่าง
- prefers-color-scheme: มืด ระบุว่าผู้ใช้ชอบธีมมืด
- โหมดมืดอัตโนมัติ แสดงหน้าในโหมดมืดแม้ว่าคุณจะไม่ได้ติดตั้งก็ตาม นอกจากนี้ ให้ตั้งค่า
prefers-color-schemeเป็นdarkโดยอัตโนมัติ
เมนูแบบเลื่อนลงนี้เป็นทางลัดสำหรับตัวเลือกจำลองฟีเจอร์สื่อ CSS prefers-color-scheme และเปิดใช้โหมดมืดอัตโนมัติของแท็บการแสดงผล
สลับชั้นเรียน
วิธีเปิดหรือปิดใช้คลาสในองค์ประกอบ
- เลือกองค์ประกอบในแผนผัง DOM
- เปิดส่วนคลาสองค์ประกอบ ดูหัวข้อเพิ่มคลาสลงในองค์ประกอบ ด้านล่างปุ่ม เพิ่มใหม่ ช่องคลาสคือคลาสทั้งหมดที่ใช้กับองค์ประกอบนี้
- สลับช่องทําเครื่องหมายข้างชั้นเรียนที่ต้องการเปิดหรือปิดใช้
เพิ่มกฎสไตล์
วิธีเพิ่มกฎรูปแบบใหม่
- เลือกองค์ประกอบเดียว
- คลิกกฎของรูปแบบใหม่
เครื่องมือสำหรับนักพัฒนาเว็บจะแทรก
กฎใหม่ที่อยู่ใต้กฎ element.style
ในภาพหน้าจอ เครื่องมือสำหรับนักพัฒนาเว็บจะเพิ่มกฎรูปแบบ h1.devsite-page-title หลังจากคลิกกฎของรูปแบบใหม่
เลือกสไตล์ชีตที่จะเพิ่มกฎ
เมื่อเพิ่มกฎรูปแบบใหม่ ให้คลิกกฎรูปแบบใหม่ค้างไว้
เพื่อเลือกสไตล์ชีต
เพื่อเพิ่มกฎสไตล์
เปิด/ปิดการประกาศ
วิธีเปิดหรือปิดการประกาศรายการเดียว
- เลือกองค์ประกอบเดียว
- ในแท็บรูปแบบ ให้วางเมาส์เหนือกฎที่กำหนดการประกาศ ช่องทำเครื่องหมายจะปรากฏถัดไป กับการประกาศแต่ละรายการ
- เลือกหรือล้างช่องทําเครื่องหมายข้างการประกาศ เมื่อล้างการประกาศ เครื่องมือสำหรับนักพัฒนาเว็บ ขีดฆ่าเพื่อทำเครื่องหมายในช่องเพื่อระบุว่าไม่มีการใช้งานแล้ว
ในภาพหน้าจอ พร็อพเพอร์ตี้ color สําหรับองค์ประกอบที่เลือกอยู่ในปัจจุบันจะถูกปิด
แก้ไของค์ประกอบเทียม ::view-transition ระหว่างภาพเคลื่อนไหว
โปรดดูส่วนที่เกี่ยวข้องในภาพเคลื่อนไหว
โปรดดูข้อมูลเพิ่มเติมที่การเปลี่ยนที่ราบรื่นและง่ายดายด้วย View Transitions API
จัดแนวรายการในตารางกริดและเนื้อหาด้วยเครื่องมือแก้ไขตารางกริด
ดูส่วนที่เกี่ยวข้องใน "ตรวจสอบตารางกริด CSS"
เปลี่ยนสีด้วยตัวเลือกสี
ดูตรวจสอบและแก้ไขข้อบกพร่องของสี HD และที่ไม่ใช่ HD ด้วยตัวเลือกสี
เปลี่ยนค่ามุมด้วยนาฬิกาปรับมุม
Angle Clock มี GUI สำหรับการเปลี่ยนแปลง <angle> ในค่าพร็อพเพอร์ตี้ CSS
วิธีเปิด Angle Clock
- เลือกองค์ประกอบที่มีการประกาศมุม
ในแท็บรูปแบบ ให้ค้นหาการประกาศ
transformหรือbackgroundที่ต้องการเปลี่ยนแปลง คลิกช่องแสดงตัวอย่างมุมข้างค่ามุม
นาฬิกาขนาดเล็กทางด้านซ้ายของ
-5degและ0.25turnจะเป็นตัวอย่างมุมคลิกตัวอย่างเพื่อเปิดนาฬิกาข้อมือ
เปลี่ยนค่ามุมโดยคลิกที่วงกลมนาฬิกาวัดมุม หรือเลื่อนเมาส์ไปยัง เพิ่ม / ลดค่ามุมทีละ 1
มีแป้นพิมพ์ลัดอื่นๆ ในการเปลี่ยนค่ามุม ดูข้อมูลเพิ่มเติมในแผงรูปแบบ แป้นพิมพ์ลัด
เปลี่ยนเงาของช่องและเงาข้อความด้วยเครื่องมือแก้ไขเงา
เครื่องมือแก้ไขเงามี GUI สำหรับการเปลี่ยนแปลงการประกาศ CSS text-shadow และ box-shadow
หากต้องการเปลี่ยนเงาด้วยเครื่องมือแก้ไขเงา ให้ทำดังนี้
เลือกองค์ประกอบที่มีการประกาศเงา เช่น เลือกองค์ประกอบถัดไป
ในแท็บรูปแบบ ให้มองหาไอคอนเงา
ข้างการประกาศ text-shadowหรือbox-shadow
คลิกไอคอนเงาเพื่อเปิดตัวแก้ไขแสงเงา
เปลี่ยนคุณสมบัติของเงา ดังนี้
- ประเภท (สำหรับ
box-shadowเท่านั้น) เลือก Outset หรือ Inset - ออฟเซ็ต X และ Y ลากจุดสีน้ำเงินหรือระบุค่า
- เบลอ ลากแถบเลื่อนหรือระบุค่า
- Spread (สำหรับ
box-shadowเท่านั้น) ลากแถบเลื่อนหรือระบุค่า
- ประเภท (สำหรับ
สังเกตการเปลี่ยนแปลงที่ใช้กับองค์ประกอบ
แก้ไขเวลาของภาพเคลื่อนไหวและการเปลี่ยนด้วยเครื่องมือแก้ไขการค่อยๆ เปลี่ยน
เครื่องมือแก้ไขการค่อยๆ เปลี่ยนมี GUI สำหรับการเปลี่ยนค่าของ transition-timing-function และ animation-timing-function
วิธีเปิดเครื่องมือแก้ไขการค่อยๆ เปลี่ยน
- เลือกองค์ประกอบที่มีการประกาศฟังก์ชันช่วงเวลา เช่น องค์ประกอบ
<body>ในหน้านี้ - ในแท็บรูปแบบ ให้มองหาไอคอน
สีม่วงข้างการประกาศ transition-timing-function,animation-timing-functionหรือพร็อพเพอร์ตี้ชวเลขtransition
- คลิกไอคอนเพื่อเปิดเครื่องมือแก้ไขการค่อยๆ เปลี่ยน ดังนี้
ใช้ค่าที่กำหนดล่วงหน้าเพื่อปรับเวลา
หากต้องการปรับเวลาในการคลิก ให้ใช้ค่าที่กำหนดล่วงหน้าในตัวแก้ไขการค่อยๆ เปลี่ยน ดังนี้
- ในเครื่องมือแก้ไขการค่อยๆ เปลี่ยน หากต้องการกำหนดค่าคีย์เวิร์ด ให้คลิกปุ่มเครื่องมือเลือกปุ่มใดปุ่มหนึ่ง
- เชิงเส้น
- ค่อยๆ เข้า-ออก
- ค่อยๆ เข้า
- ค่อยๆ ออก
- เชิงเส้น
ในตัวสลับค่าที่กำหนดล่วงหน้า ให้คลิกปุ่ม
หรือ 
เพื่อเลือกค่าที่กำหนดล่วงหน้าอย่างใดอย่างหนึ่งต่อไปนี้- ค่าที่กำหนดล่วงหน้าเชิงเส้น:
elastic,bounceหรือemphasized - ค่าที่กำหนดล่วงหน้าของ 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) |
| เข้า ยกกำลัง 2 | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
| เข้า ยกกำลัง 3 | 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) |
|
| ค่อยๆ ออก | ออก ไซน์ | cubic-bezier(0.39, 0.58, 0.57, 1) |
| ออก กำลังสอง | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
| ออก ลูกบาศก์ | 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) |
กำหนดค่าเวลาที่กำหนดเอง
หากต้องการกำหนดค่าที่กำหนดเองสำหรับฟังก์ชันเวลา ให้ใช้จุดควบคุมบนเส้นดังนี้
สำหรับฟังก์ชันเชิงเส้น ให้คลิกที่ใดก็ได้บนเส้นเพื่อเพิ่มจุดควบคุมและลากจุดดังกล่าว ดับเบิลคลิกเพื่อนำจุดออก
สำหรับฟังก์ชัน Cubic Bezier ให้ลากจุดควบคุมจุดใดจุดหนึ่ง
การเปลี่ยนแปลงใดๆ จะทริกเกอร์ภาพเคลื่อนไหวลูกบอลในการแสดงตัวอย่างที่ด้านบนของเครื่องมือแก้ไข
(ทดลอง) คัดลอกการเปลี่ยนแปลง CSS
เมื่อเปิดใช้การทดสอบนี้แล้ว แท็บรูปแบบจะไฮไลต์การเปลี่ยนแปลง CSS เป็นสีเขียว
หากต้องการคัดลอกการเปลี่ยนแปลงการประกาศ CSS รายการเดียว ให้วางเมาส์เหนือการประกาศที่ไฮไลต์ แล้วคลิกปุ่มคัดลอก 
หากต้องการคัดลอกการเปลี่ยนแปลง CSS ทั้งหมดในการประกาศพร้อมกัน ให้คลิกขวาที่การประกาศ แล้วเลือกคัดลอกการเปลี่ยนแปลง CSS ทั้งหมด
นอกจากนี้ คุณสามารถติดตามการเปลี่ยนแปลงที่คุณทำโดยใช้แท็บการเปลี่ยนแปลง