CSS prefers-reduced-transparency

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

Adam Argyle

จาก Chrome 118 ฟีเจอร์คิวรี่สื่อใหม่ prefers-reduced-transparency จาก CSS Media Query 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%;
  }
}

ส่วนหัวหลัก

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

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

นอกจากนี้ ด้วยการลดความโปร่งใสของคิวรี่สื่อ คุณสามารถลดความทึบแสงเพื่อให้สีการวางซ้อนกลายเป็นเกือบ 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 สามารถจำลองค่ากำหนดนี้เพื่อลดความโปร่งใส (และอื่นๆ) ในแท็บการแสดงผล ในวิดีโอต่อไปนี้ ดูวิธีสลับคำค้นหาสื่อ “สีที่ต้องการ” และ “ลดความโปร่งใส” เพื่อแสดงค่าความโปร่งแสงของตัวแปรสีอ่อน มืด โปร่งใส และความโปร่งใสที่ลดลงของการ์ดกระจกฝ้า