CSS prefers-reduced-transparency

เพิ่มประสิทธิภาพและปรับเปลี่ยนสำหรับผู้ใช้ที่ต้องการ UI แบบทึบแสง

Adam Argyle

ตั้งแต่ Chrome 118 เป็นต้นไป ฟีเจอร์คิวรีสื่อใหม่ prefers-reduced-transparency จาก CSS Media Queries 5 จะพร้อมใช้งาน อินเทอร์เฟซแบบไม่ทึบอาจทำให้เกิดอาการปวดหัวหรือทำให้มองเห็นได้ยากสำหรับผู้ที่มีปัญหาด้านการมองเห็นประเภทต่างๆ ด้วยเหตุนี้ Windows, macOS และ iOS จึงมีค่ากำหนดของระบบที่สามารถลดหรือนำความโปร่งใสออกจาก UI ได้

เมื่อใช้คิวรี่สื่อใหม่นี้ในเบราว์เซอร์ CSS สามารถปรับอินเทอร์เฟซสำหรับผู้ใช้โดยระบุความต้องการลดความโปร่งใสได้ วิธีการมีดังนี้

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

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

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

กรณีการใช้งานเพื่อลดความโปร่งใส

ส่วนถัดไปจะแสดงช่วงเวลาและโอกาสในการลดความโปร่งใสอย่างมีความหมาย

คำอธิบายภาพแบบกึ่งโปร่งใสในรูปภาพ

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

โมดัล การแจ้งเตือน และป๊อปอัปที่โปร่งใส

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

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

กระจกน้ำแข็งเกาะแบบปรับอัตโนมัติ

รูปแบบการวางซ้อนรูปภาพอีกรูปแบบหนึ่งที่ได้รับความนิยมคือกระจกฝ้า ในตัวอย่างต่อไปนี้ รูปภาพด้านหลังคำบรรยายคือภาพสะท้อนของรูปภาพผลิตภัณฑ์ วิธีนี้มีข้อดี 2 ข้อคือ รูปภาพจะไม่ถูกครอบตัด และค่ากำหนดความสว่างหรือความมืดจะปรากฏในผลลัพธ์สุดท้ายมากขึ้น

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

ส่วนหัวของ Hero

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

ซึ่งแก้ไขได้ด้วยคำค้นหาสื่อ CSS 2 รายการ ได้แก่ prefers-reduced-motion และ Preferreds-reduced-transparency ในคําค้นหาสื่อแบบลดการเคลื่อนไหว คุณจะสามารถใช้ภาพเคลื่อนไหวแบบอินฟินิตี้ได้ก็ต่อเมื่อผู้ใช้มี "no-preference" สําหรับภาพเคลื่อนไหวแบบลดการเคลื่อนไหว ซึ่งจะส่งสัญญาณไปยังโค้ดว่าผู้ใช้รายนี้สามารถใช้ภาพเคลื่อนไหวได้

นอกจากนี้ ด้วย Query สื่อที่มีความโปร่งใสลดลง คุณยังสามารถลดความทึบแสงเพื่อให้สีการวางซ้อนเกือบ 100% ได้ ตอนนี้คุณอ่านข้อความได้ง่ายขึ้นแล้วโดยไม่ต้องเสียสมาธิกับการเคลื่อนไหวหรือคอนทราสต์ที่มีปัญหา

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

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

มุมมองแบบเพิ่มและแบบลบเกี่ยวกับค่ากําหนดของผู้ใช้

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

@media (prefers-reduced-transparency: no-preference) {
  …
}

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

แนวทางนี้ช่วยให้คุณนึกถึงประสบการณ์พื้นฐานที่มีประสิทธิภาพซึ่งมีความแข็งแกร่งในตัว จากนั้นให้เพิ่มประสบการณ์การใช้งานหากผู้ใช้อนุญาต

เครื่องมือสำหรับนักพัฒนาเว็บ

Chrome DevTools สามารถจำลองค่ากำหนดนี้เพื่อลดระดับความโปร่งใส (และอื่นๆ) ในแท็บการแสดงผล ในวิดีโอต่อไปนี้ ให้ดูวิธีสลับใช้ prefers-color-scheme และ prefers-reduced-transparency ในการค้นหาสื่อเพื่อแสดงการ์ดกระจกฝ้าในแบบต่างๆ ซึ่งได้แก่ แบบสว่าง แบบมืด แบบโปร่งใส และแบบลดระดับความโปร่งใส