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

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

โปรดดูที่ดูและเปลี่ยน CSS เพื่อเรียนรู้พื้นฐาน

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

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

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

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

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

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

ดู CSS

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

นำทางด้วยลิงก์

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

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

ตัวอย่างไฮไลต์มีดังนี้

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

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

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

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

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

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

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

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

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

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

ดูค่าของพร็อพเพอร์ตี้ที่กำหนดเอง

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

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

แท็บรูปแบบรับรู้ปัญหา CSS ได้หลายประเภทและไฮไลต์ปัญหาเหล่านั้นในรูปแบบต่างๆ

ดูทำความเข้าใจ CSS ในแท็บสไตล์

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

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

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

เลือกช่องทำเครื่องหมายแสดงทั้งหมดเพื่อดูคุณสมบัติทั้งหมด

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

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

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

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

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

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

ดูกฎ At-rules ของ CSS

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

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

ดูกฎที่กฎ @property รายการ

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

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

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

ดูกฎที่กฎ @supports รายการ

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

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

ดูกฎที่กฎ @scope รายการ

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

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

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

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

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

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

ดูกฎที่กฎ @font-palette-values รายการ

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

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

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

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

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

ดูโมเดลกล่องขององค์ประกอบ

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

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

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

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

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

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

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

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

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

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

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

สลับคลาส Pseudo

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

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

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

ดูบทแนะนำแบบอินเทอร์แอกทีฟได้ในเพิ่ม Pseudostate ในชั้นเรียน

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

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

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

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

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

   ฉันสืบทอดสไตล์ไฮไลต์องค์ประกอบเทียมของระดับบนสุด เลือกฉัน!

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

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

ดูเลเยอร์การเรียงซ้อน

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

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

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

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

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

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

หากต้องการดูหน้าในโหมดการพิมพ์ ให้ทำดังนี้

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

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

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

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

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

   

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

   

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

   

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

5. คลิกไฟล์ CSS เพื่อดูรายละเอียดทีละบรรทัดเกี่ยวกับ 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+Up เพื่อเพิ่มครั้งละ 10
• Shift+Command+Up (Mac) หรือ Control+Shift+Page Up (Windows, Linux) เพื่อเพิ่มค่าขึ้น 100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รายการแบบเลื่อนลงนี้เป็นทางลัดสำหรับตัวเลือกจำลองฟีเจอร์สื่อ CSSprefers-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

นาฬิกา Angle มี GUI สำหรับการเปลี่ยน <angle> ในค่าคุณสมบัติ CSS

หากต้องการเปิดนาฬิกา Angle ให้ทำดังนี้

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

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

   

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

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

   

4. เปลี่ยนค่ามุมโดยคลิกที่วงกลมนาฬิกา Angle หรือเลื่อนเมาส์เพื่อเพิ่ม / ลดค่ามุมลง 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. ในเครื่องมือแก้ไขการค่อยๆ เปลี่ยน หากต้องการตั้งค่าค่าคีย์เวิร์ด ให้คลิกปุ่มเครื่องมือเลือกใดปุ่มหนึ่งต่อไปนี้
   • เชิงเส้น
   • ค่อยๆ เข้า-ออก
   • ค่อยๆ เข้า
   • ค่อยๆ ออก

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

   • ค่าที่กำหนดล่วงหน้าแบบเชิงเส้น: elastic, bounce หรือ emphasized
   • ค่าที่กำหนดล่วงหน้าของเบซิเยร์รูปลูกบาศก์:

คีย์เวิร์ดตามระยะเวลา	ค่าที่กำหนดล่วงหน้า	เบซิเยร์รูปลูกบาศก์
ค่อยๆ เข้า-ออก	ขาเข้า ไซน์	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)
	ใน ค่ากำลังสอง	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	ใน ลูกบาศก์	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)

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

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

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

  

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

  

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

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

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

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

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

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