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

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

ตัวอย่างองค์ประกอบที่เลือก

ในภาพหน้าจอ 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 สั้นๆ ให้วางเมาส์เหนือชื่อพร็อพเพอร์ตี้ในแท็บรูปแบบ

เคล็ดลับเครื่องมือที่มีเอกสารประกอบเกี่ยวกับพร็อพเพอร์ตี้ CSS

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

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

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

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

วางเมาส์เหนือตัวเลือกในแท็บรูปแบบ ซึ่งรวมถึงตัวเลือกระดับบนสุดในกฎ CSS ที่ฝัง กฎที่ฝังที่รับค่ามา และกฎ @nested-declarations เพื่อดูเคล็ดลับเครื่องมือที่มีน้ำหนักความเฉพาะเจาะจง และไฮไลต์องค์ประกอบที่ตรงกันในวิวพอร์ต

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

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

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

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

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

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

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

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

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

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

แท็บ Computed

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

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

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

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

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

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

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

ดูส่วน &quot;รับค่ามาจาก...&quot; ของแท็บสไตล์

ดูกฎ At-rule ของ CSS

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

ดู @property At-rule

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

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

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

ดู @supports At-rule

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

ดู @supports at-rules

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

ดู @scope At-rule

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

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

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

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

กฎ @scope

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

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

ดู @font-palette-values At-rule

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

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

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

กฎ @font-palette-values

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

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

ดู @position-try At-rule

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

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

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

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

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

พร็อพเพอร์ตี้ position-try-options, ส่วน @position-try และองค์ประกอบที่มีแอตทริบิวต์เป้าหมายของป๊อปโอเวอร์

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

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

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

แผนภาพโมเดลกล่อง

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

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

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

การกรองแท็บรูปแบบ

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

การกรองพร็อพเพอร์ตี้ที่รับค่ามาในแท็บ &quot;คำนวณแล้ว&quot;

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

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

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

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

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

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

ก่อนและหลังเปิดตัวเลือก &quot;จำลองหน้าที่โฟกัส&quot;

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

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

เปิด/ปิดคลาสเทียม

วิธีเปิด/ปิดคลาสเทียม

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

การสลับสถานะจำลองการวางเมาส์เหนือองค์ประกอบ

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

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

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

ส่วน &quot;บังคับใช้สถานะเฉพาะขององค์ประกอบ&quot; ขององค์ประกอบ &quot;textarea&quot;

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

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

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

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

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

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

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

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

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

ดูส่วน &quot;รับค่า&quot; ของแท็บ &quot;สไตล์&quot;

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

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

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

ในแท็บรูปแบบ ให้ดูเลเยอร์ Cascade 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) ขณะที่ DevTools อยู่ในโฟกัสเพื่อเปิดเมนูคำสั่ง

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

    การเปิดแท็บความครอบคลุมจากเมนูคำสั่ง

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

    แท็บความครอบคลุม

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

    ภาพรวมของ 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 คัดลอกเมนูแบบเลื่อนลง 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 ที่ซับซ้อนมากขึ้น เช่น การไล่ระดับสีหรือเงาของกล่อง โดยไม่ต้องจำไวยากรณ์ที่แน่นอน หรือสร้างเลย์เอาต์ตารางกริดและ Flex อย่างรวดเร็วโดยอาศัยพร็อพเพอร์ตี้ที่เกี่ยวข้องหลายรายการ คุณสามารถเริ่มพิมพ์พร็อพเพอร์ตี้ CSS และใช้การเติมโค้ดให้สมบูรณ์ได้

การใช้การเติมโค้ดอัตโนมัติเพื่อเพิ่มพร็อพเพอร์ตี้ CSS

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

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

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

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

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

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

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

การลดค่าก็ใช้ได้เช่นกัน เพียงแทนที่คำว่าขึ้นที่กล่าวถึงก่อนหน้านี้ด้วยคำว่าลง

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

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

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

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

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

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

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

  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

การเพิ่มกฎสไตล์ใหม่

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

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

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

การเลือกสไตล์ชีต

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

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

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

กำลังสลับการประกาศ

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

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

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

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

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

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

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

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

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

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

วิธีเปิด Angle Clock

  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. ในแท็บรูปแบบ ให้มองหาไอคอน Ease สีม่วงข้างประกาศ transition-timing-function, animation-timing-function หรือพร็อพเพอร์ตี้แบบย่อ transition ไอคอนเครื่องมือแก้ไขการค่อยๆ เปลี่ยน
  3. คลิกไอคอนเพื่อเปิดเครื่องมือแก้ไขการเปลี่ยน เครื่องมือแก้ไขการค่อยๆ เปลี่ยน

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

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

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

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

    • ค่าที่กำหนดล่วงหน้าแบบเส้นตรง: elastic, bounce หรือ emphasized
    • ค่าที่กำหนดล่วงหน้าของ Cubic Bezier
คีย์เวิร์ดเกี่ยวกับเวลา ค่าที่กำหนดล่วงหน้า เบซิเยร์แบบลูกบาศก์
ค่อยๆ เข้า-ออก In Out, Sine 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)
Fast Out, Slow In cubic-bezier(0.4, 0, 0.2, 1)
เข้า ออก กลับ cubic-bezier(0.68, -0.55, 0.27, 1.55)
ค่อยๆ เข้า In, Sine 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)
ค่อยๆ ออก Out, Sine 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)
Linear Out, Slow In cubic-bezier(0, 0, 0.2, 1)
ออก กลับ cubic-bezier(0.18, 0.89, 0.32, 1.28)

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

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

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

    การลากจุดควบคุมของฟังก์ชันเชิงเส้น

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

    การลากจุดควบคุมของฟังก์ชันเบซิเยร์รูปลูกบาศก์

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

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

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

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

คัดลอกการเปลี่ยนแปลงประกาศ CSS

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

คัดลอกการเปลี่ยนแปลง CSS ทั้งหมด

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