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

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

ดูข้อมูลเบื้องต้นได้ที่หัวข้อดูและเปลี่ยน CSS

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

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

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

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

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

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

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

ดู CSS

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

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

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

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

ลิงก์ต่างๆ ที่ไฮไลต์

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

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

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

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

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

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

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

หากต้องการปิดเคล็ดลับเครื่องมือ ให้เลือก ช่องทำเครื่องหมาย Don't show

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

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

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

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

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

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

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

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

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

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

ดูเฉพาะ CSS ที่มีผลกับองค์ประกอบจริง

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

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

แท็บ "คํานวณแล้ว"

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

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

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

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

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

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

หรือจะเลื่อนแท็บสไตล์เพื่อค้นหาส่วนที่มีชื่อว่า Inherited from <element_name> ก็ได้

ดูส่วน &quot;รับค่าจาก...&quot; ของแท็บ รูปแบบ

ดูกฎ at ของ CSS

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

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

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

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

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

ดู @supports at-rules

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

ดูแอตทริบิวต์ @supports

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

ดู @scope at-rules

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

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

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

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

กฎ @scope

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

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

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

@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-rules

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

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

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

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

แผนภาพของ Box Model

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

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

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

การกรองแท็บสไตล์

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

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

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

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

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

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

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

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

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

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

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

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

วิธีสลับคลาส Pseudo

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

สลับซูโดสเตตที่วางเหนือองค์ประกอบ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูเลเยอร์ตามลำดับชั้น

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

หากต้องการดูเลเยอร์แบบ 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 (และ JavaScript) ที่ใช้และไม่ได้ใช้

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

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

    รายละเอียด CSS ที่ใช้และไม่ได้ใช้ทีละบรรทัด

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

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

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

คัดลอก 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 ลงในองค์ประกอบ

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

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

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

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

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

  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+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 บ่งบอกว่าผู้ใช้ต้องการใช้ธีมมืด
    • โหมดมืดอัตโนมัติ แสดงหน้าเว็บในโหมดมืดแม้ว่าคุณจะไม่ได้ใช้โหมดดังกล่าวก็ตาม นอกจากนี้ ยังตั้งค่า 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 ที่เกี่ยวข้อง

เปลี่ยนสีด้วยเครื่องมือเลือกสี

ดูตรวจสอบและแก้ไขข้อบกพร่องสี 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. เปลี่ยนคุณสมบัติเงา

    • Type (สำหรับ box-shadow เท่านั้น) ให้เลือก Outset หรือ Inset
    • ระยะห่างแนวนอนและแนวตั้ง ลากจุดสีน้ำเงินหรือระบุค่า
    • เบลอ ลากแถบเลื่อนหรือระบุค่า
    • การแพร่กระจาย (สําหรับ 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)
In Out, Cubic 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)

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

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

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

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

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

    การลากจุดควบคุมของฟังก์ชัน Cubic Bezier

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

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

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

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

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

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

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

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