CSS prefers-reduced-transparency

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

Adam Argyle

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

เมื่อใช้ Media Query ใหม่นี้ในเบราว์เซอร์ 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

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

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

นอกจากนี้ คุณยังลดระดับความทึบได้ด้วย Media 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 ในการค้นหาสื่อเพื่อแสดงการ์ดกระจกฝ้าในแบบต่างๆ ซึ่งได้แก่ แบบสว่าง แบบมืด แบบโปร่งใส และแบบลดระดับการโปร่งใส