จำลองฟีเจอร์สื่อ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   • ไม่มีการจำลอง
   • color-gamut:srgb - ขอบเขตประมาณ sRGB หรือมากกว่า
   • color-gamut:p3 - ใกล้เคียงกับขอบเขตที่ระบุไว้ใน Display P3 Color Space ขึ้นไป
   • color-gamut:rec2020 - ประมาณช่วงที่ระบุใน Rec. 2020 ขึ้นไป