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 รายการ ดังนี้ ต้องการลดการเคลื่อนไหว และต้องการความโปร่งใสที่ลดลง ภายในคำค้นหาสื่อที่มีการเคลื่อนไหวน้อยลง คุณจะสามารถ ใช้ภาพเคลื่อนไหวอนันต์เฉพาะเมื่อผู้ใช้ "ไม่ต้องการ" สำหรับราคาที่ลดลง ซึ่งส่งสัญญาณไปยังโค้ดว่าผู้ใช้รายนี้สามารถเคลื่อนไหวได้

นอกจากนี้ ด้วยคำสืบค้นสื่อที่มีความโปร่งใสลดลง คุณยังสามารถลด ความทึบแสง ดังนั้นสีการวางซ้อนเกือบ 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) {
  …
}

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถจำลองค่ากำหนดนี้เพื่อลดความโปร่งใส (และ เพิ่มเติม) ในแท็บการแสดงผล ในวิดีโอต่อไปนี้ ดูวิธีเปิด/ปิด Preferred-color-scheme และ Preferreds-reduced-transparency คำค้นหาสื่อเพื่อแสดงแสง สีเข้ม ความโปร่งใส และความโปร่งใสที่ลดลง การ์ดกระจกน้ำแข็งเกาะ