0Pricing
CSS Academy · บทเรียน

Prefers-Color-Scheme และ Prefers-Reduced-Motion

เคารพการตั้งค่าระบบของผู้ใช้สำหรับโหมดมืดและภาพเคลื่อนไหวที่ลดลง

Prefers-Color-Scheme และ Prefers-Reduced-Motion เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณลักษณะสื่อตามการตั้งค่าของผู้ใช้

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

prefers-color-scheme

ตรวจจับว่าผู้ใช้ตั้งค่า OS เป็นโหมดสว่างหรือโหมด dark:

<p>This page follows your OS color-scheme preference.</p>

การใช้โหมด dark อัตโนมัติ

วิธีใช้งานที่สะอาดและเป็นระเบียบที่สุดคือใช้ตัวแปร CSS ที่สลับค่าตามการตั้งค่า:

<p>Auto dark mode via CSS variables.</p>

prefers-reduced-motion

ผู้ใช้บางรายมีอาการคลื่นไส้หรือไม่สบายจากภาพเคลื่อนไหว คุณลักษณะสื่อ prefers-reduced-motion: reduce จะตรวจจับการตั้งค่าด้านการเข้าถึงนี้

<div class="box spun"></div>

การเคารพการตั้งค่าภาพเคลื่อนไหว

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

<div class="card">Card with motion-aware transition</div>

prefers-contrast

ตรวจจับว่าผู้ใช้ต้องการความเปรียบต่างที่สูงขึ้น (เพื่อการเข้าถึง) หรือต้องการความเปรียบต่างที่ต่ำลงหรือไม่ จากนั้นปรับตัวเลือกสีให้เหมาะสม:

<p>Contrast-aware text</p>

prefers-reduced-transparency

ผู้ใช้บางรายที่มีความบกพร่องทางการมองเห็นต้องการความโปร่งใสน้อยลง ควรลดเอฟเฟกต์ที่ใช้ backdrop-filter และ opacity:

<div class="glass-card">Glass card</div>

การเข้าถึงการตั้งค่าจาก JavaScript

ตรวจสอบการตั้งค่าเหล่านี้จาก JavaScript โดยใช้ window.matchMedia():

<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
  <script>
    const dark = window.matchMedia('(prefers-color-scheme: dark)');
    dark.addEventListener('change', e => {
      document.getElementById('demo').classList.toggle('dark-mode', e.matches);
    });
  </script>

การตั้งค่าระบบและการแทนที่ด้วยตนเอง

ให้ใช้การตั้งค่าระบบเป็นค่าเริ่มต้น และเปิดให้ผู้ใช้แทนที่การตั้งค่าด้วย toggle ได้ บันทึกการตั้งค่าที่แทนที่ไว้ใน localStorage และใช้คลาสกับ <html>:

<div class="theme dark">Manual dark override applied via class</div>

prefers-reduced-data

ตรวจจับว่าผู้ใช้เปิดโหมดประหยัดข้อมูลไว้หรือไม่ จากนั้นส่งรูปภาพขนาดเล็กลงหรืองดทรัพยากรที่ไม่จำเป็น:

<div class="hero">Hero banner</div>

การทดสอบใน DevTools

ใน Chrome DevTools แท็บการแสดงผลช่วยให้จำลองโหมด dark ภาพเคลื่อนไหวที่ลดลง และคุณลักษณะสื่ออื่น ๆ ตามการตั้งค่าได้โดยไม่ต้องเปลี่ยนการตั้งค่า OS

ตรวจสอบความเข้าใจอย่างรวดเร็ว

วิธีใดเหมาะที่สุดสำหรับการใช้โหมด dark อัตโนมัติที่รองรับ toggle สำหรับผู้ใช้ด้วย

สรุปทบทวน

prefers-color-scheme ช่วยเปิดโหมด dark อัตโนมัติ ควรปิดหรือลดความซับซ้อนของภาพเคลื่อนไหวด้วย prefers-reduced-motion เพื่อการเข้าถึง ควรใช้ทั้งสองอย่างร่วมกับตัวแปร CSS เพื่อให้โค้ดสะอาดและดูแลรักษาได้ง่าย และควรมีการแทนที่ด้วยตนเองเสมอ เพื่อให้ผู้ใช้ควบคุมการตั้งค่าของตนได้อย่างอิสระจาก OS

คำถามที่พบบ่อย

บทเรียน “Prefers-Color-Scheme และ Prefers-Reduced-Motion” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Prefers-Color-Scheme และ Prefers-Reduced-Motion” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Prefers-Color-Scheme และ Prefers-Reduced-Motion”

เคารพการตั้งค่าระบบของผู้ใช้สำหรับโหมดมืดและภาพเคลื่อนไหวที่ลดลง คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Prefers-Color-Scheme และ Prefers-Reduced-Motion” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป
  2. คิวรีความกว้าง ความสูง และแนวหน้าจอ
  3. Prefers-Color-Scheme และ Prefers-Reduced-Motion
  4. การรวมมีเดียคิวรีหลายรายการ
← กลับไปที่ CSS Academy