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

ค้นพบเวิร์กโฟลว์ใหม่ในข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับฟีเจอร์เครื่องมือสำหรับนักพัฒนาเว็บใน 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 ที่กำลังใช้กับองค์ประกอบ

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

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

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

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

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

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

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

อีกวิธีหนึ่งคือการเลื่อนแท็บรูปแบบ และหาส่วนที่ชื่อ Inherited from <element_name>

ดูกฎ at ของ CSS

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

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

ดูกฎที่ @property ข้อ

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

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

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

ดูกฎที่ @supports ข้อ

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

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

ดูกฎที่ @scope ข้อ

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

กฎ @scope ใหม่เป็นส่วนหนึ่งของข้อกำหนดการ Cascading ของ 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 ข้อ

กฎ 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 ส่วนในตัวอย่างถัดไป

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 จำลองหน้าที่โฟกัส และตรวจสอบว่าได้เลือกองค์ประกอบอินพุตแล้ว ตอนนี้คุณตรวจสอบองค์ประกอบที่อยู่ใต้องค์ประกอบนั้นได้แล้ว

คุณจะเห็นตัวเลือกเดียวกันนี้ในแผงการแสดงผลด้วย

สลับคลาสเทียม

วิธีสลับคลาสเทียม เช่น :active, :focus, :focus-within, :target, :hover, :visited หรือ focus-visible

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

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

ดูบทแนะนำแบบอินเทอร์แอกทีฟได้ที่เพิ่มองค์ประกอบสมมติลงในชั้นเรียน

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

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

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

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

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

   ฉันรับรูปแบบองค์ประกอบเทียมของไฮไลต์ของผู้ปกครองมา เลือกฉัน

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

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

ดูเลเยอร์แบบ Cascade

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

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

ในแท็บรูปแบบ ให้ดูเลเยอร์แบบ Cascade 3 เลเยอร์และรูปแบบ ดังนี้ page, component และ base

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

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

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

วิธีดูหน้าในโหมดพิมพ์

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

ดู CSS ที่ใช้และไม่ได้ใช้ด้วยแท็บการครอบคลุม

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

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

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 ที่แก้ไขแล้วลงในแหล่งที่มาในเครื่องในพื้นที่ทำงาน

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

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

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

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

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

เพิ่มการประกาศแบบในหน้า

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

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

4. ป้อนค่าที่ถูกต้องสำหรับพร็อพเพอร์ตี้นั้น แล้วกด Enter ใน DOM Tree คุณสามารถ เห็นว่ามีการเพิ่มแอตทริบิวต์ 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+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 แต่ละอินสแตนซ์ที่กล่าวไปก่อนหน้านี้ด้วย ลูกศรลง

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

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

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

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

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

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

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

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

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

เพิ่มคลาสให้กับองค์ประกอบ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ในภาพหน้าจอ เครื่องมือสำหรับนักพัฒนาเว็บจะเพิ่มกฎรูปแบบ h1.devsite-page-title หลังจากคลิกกฎของรูปแบบใหม่

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

เมื่อเพิ่มกฎรูปแบบใหม่ ให้คลิกกฎรูปแบบใหม่ค้างไว้ เพื่อเลือกสไตล์ชีต เพื่อเพิ่มกฎสไตล์

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีเปิด Angle Clock

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

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

   

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

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

   

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

5. มีแป้นพิมพ์ลัดอื่นๆ ในการเปลี่ยนค่ามุม ดูข้อมูลเพิ่มเติมในแผงรูปแบบ แป้นพิมพ์ลัด

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

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

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

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

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

   

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

   

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

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

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

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

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

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

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

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

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

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

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

   • ค่าที่กำหนดล่วงหน้าเชิงเส้น: 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 ทั้งหมด

นอกจากนี้ คุณสามารถติดตามการเปลี่ยนแปลงที่คุณทำโดยใช้แท็บการเปลี่ยนแปลง