จำลองฟีเจอร์สื่อ CSS

Sofia Emelianova

จำลองฟีเจอร์สื่อต่างๆ ของ CSS ด้วยการอ้างอิงตัวเลือกการจำลองนี้ในแท็บการแสดงผล

จำลองฟีเจอร์สื่อ CSS prefers-color-scheme

ฟีเจอร์สื่อ CSS ของ prefers-color-scheme จะระบุว่าผู้ใช้ชอบรูปแบบสีสว่างหรือมืด

หากต้องการจำลองเงื่อนไขนี้ ให้ทำดังนี้

1. เปิดแท็บการแสดงผลในหน้า prefers-color-scheme

2. ในส่วนจำลองฟีเจอร์สื่อ CSS prefers-color-scheme ให้เลือกรายการใดรายการหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง

   • ไม่มีการจําลอง
   • prefers-color-scheme:light
   • prefers-color-scheme:dark

3. โหลดหน้าเว็บซ้ำ เช่น

จำลองประเภทสื่อ CSS (เปิดใช้การแสดงตัวอย่างก่อนพิมพ์)

การค้นหาสื่อสำหรับพิมพ์จะควบคุมลักษณะที่หน้าเว็บของคุณจะปรากฏเมื่อพิมพ์

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

1. เปิดแท็บการแสดงผล แล้วเลือกพิมพ์ในส่วนจำลองประเภทสื่อ CSS

   

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

จำลองฟีเจอร์สื่อ CSS forced-colors

ฟีเจอร์สื่อของ CSS forced-colors จะระบุว่า User Agent เปิดใช้โหมดสีแบบบังคับหรือไม่ ตัวอย่างโหมดสีที่บังคับคือโหมดคอนทราสต์สูงของ Windows

หากต้องการจำลองเงื่อนไขนี้ ให้ทำดังนี้

1. เปิดแท็บการแสดงผล

2. ในส่วนจำลองฟีเจอร์สื่อ CSS forced-colors ให้เลือกรายการใดรายการหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง

   • ไม่มีการจำลอง
   • forced-colors:active
   • forced-colors:none

โดยมีการจำลอง forced-colors:active ดังต่อไปนี้

จำลองฟีเจอร์สื่อ CSS prefers-contrast

prefers-contrast ฟีเจอร์สื่อ CSS จะระบุว่าผู้ใช้ขอให้แสดงเนื้อหาเว็บด้วยค่าคอนทราสต์ที่สูงกว่า ต่ำกว่า หรือเฉพาะเจาะจงหรือไม่

วิธีจําลองเงื่อนไขนี้

1. เปิดแท็บการแสดงผล

2. ในส่วนจำลองฟีเจอร์สื่อ CSS prefers-contrast ให้เลือกรายการใดรายการหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง

   • ไม่มีการจําลอง
   • prefers-contrast:more
   • prefers-contrast:less
   • prefers-contrast:custom

จำลองฟีเจอร์สื่อ CSS prefers-reduced-motion

prefers-reduced-motion ฟีเจอร์สื่อ CSS จะระบุว่าผู้ใช้ได้ขอให้ลดปริมาณการเคลื่อนไหวในหน้าเว็บหรือไม่

วิธีจําลองเงื่อนไขนี้

1. เปิดแท็บการแสดงผลในการสาธิตนี้ แล้วลองเลื่อนเพื่อดูภาพเคลื่อนไหวต่างๆ
2. เลือก prefers-reduced-motion:reduce ในส่วนจำลองฟีเจอร์สื่อ CSS prefers-reduced-motion
3. ลองเลื่อนอีกครั้ง

จำลองฟีเจอร์สื่อ CSS prefers-reduced-transparency

prefers-reduced-transparency ฟีเจอร์สื่อ CSS จะระบุว่าผู้ใช้ขอให้ลดเอฟเฟกต์เลเยอร์แบบโปร่งใสหรือโปร่งแสงที่ใช้ในอุปกรณ์หรือไม่

ฟีเจอร์ prefers-reduced-transparency พร้อมใช้งานใน Chrome 118 และให้คุณปรับเนื้อหาเว็บตามค่ากำหนดที่ผู้ใช้เลือกเพื่อลดความโปร่งใสในระบบปฏิบัติการ เช่น การตั้งค่าลดความโปร่งใสใน macOS

วิธีจําลองเงื่อนไขนี้

1. เปิดแท็บการแสดงผล
2. เลือก prefers-reduced-transparency: reduce ในส่วนจำลองฟีเจอร์สื่อ CSS prefers-reduced-transparency
3. ตรวจสอบว่าหน้าเว็บแสดงอย่างถูกต้อง

จำลองฟีเจอร์สื่อ CSS color-gamut

color-gamut ฟีเจอร์สื่อ CSS จะระบุช่วงสีที่ User Agent และอุปกรณ์เอาต์พุตรองรับ

วิธีจําลองเงื่อนไขนี้

1. เปิดแท็บการแสดงผล

2. ในส่วนจำลองฟีเจอร์สื่อ CSS color-gamut ให้เลือกรายการใดรายการหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง

   • ไม่มีการจําลอง
   • color-gamut:srgb - ช่วงสี sRGB ประมาณ 90% ขึ้นไป
   • color-gamut:p3 - ช่วงสีประมาณที่ระบุไว้ในพื้นที่สี Display P3 ขึ้นไป
   • color-gamut:rec2020 - ช่วงสีประมาณที่ระบุไว้ใน Rec. 2020 ขึ้นไป