ย้ายข้อมูลไปยังสี HD CSS

เอกสารนี้เป็นส่วนหนึ่งของคู่มือการใช้สี CSS ที่มีความคมชัดสูง

Adam Argyle

กลยุทธ์หลัก 2 ประการในการอัปเดตสีของโปรเจ็กต์เว็บเพื่อรองรับการแสดงผลแบบกว้างมีดังนี้

1. การเสื่อมสภาพอย่างนุ่มนวล: ใช้พื้นที่สีใหม่ แล้วปล่อยให้เบราว์เซอร์และระบบปฏิบัติการทราบว่าจะแสดงสีใดตามความสามารถในการแสดงผล

2. การเพิ่มประสิทธิภาพแบบต่อเนื่อง: ใช้ @supports และ @media เพื่อประเมินความสามารถของเบราว์เซอร์ของผู้ใช้ และหากเป็นไปตามเงื่อนไข ให้ใส่สีขอบเขตกว้าง

หากเบราว์เซอร์ไม่เข้าใจสี display-p3 ให้ทําดังนี้

color: red;
color: color(display-p3 1 0 0);

หากเบราว์เซอร์เข้าใจสีdisplay-p3 ให้ทําดังนี้

color: red;
color: color(display-p3 1 0 0);

แต่ละรูปแบบก็มีทั้งข้อดีและข้อเสีย มาดูข้อดีและข้อเสียแบบคร่าวๆ กัน

การเสื่อมสภาพอย่างนุ่มนวล

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

การเพิ่มประสิทธิภาพแบบต่อเนื่อง

• ข้อดี
  • ควบคุมได้มากขึ้นด้วยความคมชัดของสีที่มีการจัดการ
  • กลยุทธ์เสริมที่ไม่ส่งผลต่อสีปัจจุบัน
• ข้อเสีย
  • คุณต้องจัดการไวยากรณ์ของสี 2 แบบแยกกัน
  • คุณจะต้องจัดการขอบเขตสี 2 ช่วงสี

ตรวจสอบการรองรับขอบเขตและพื้นที่สี

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

การค้นหาการสนับสนุนขอบเขตสี

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

ตรวจสอบจาก CSS

คำถามด้านการสนับสนุนที่เจาะจงน้อยที่สุดคือคำค้นหาสื่อ dynamic-range ดังนี้

การสนับสนุนเบราว์เซอร์

• 98
• 98
• 100
• 13.1

แหล่งที่มา

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

คุณสามารถขอการสนับสนุนโดยประมาณหรือมากกว่านั้นได้โดยใช้คำค้นหาสื่อของ color-gamut ดังนี้

การสนับสนุนเบราว์เซอร์

• 58
• 79
• 110
• 10

แหล่งที่มา

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

มีคำค้นหาสื่อเพิ่มเติม 2 รายการในการตรวจสอบการสนับสนุน ได้แก่

1. @media (color)
2. @media (color-index)

ตรวจสอบจาก JavaScript

สำหรับ JavaScript ฟังก์ชัน window.matchMedia() สามารถเรียกใช้และผ่านคำค้นหาสื่อเพื่อการประเมิน

การสนับสนุนเบราว์เซอร์

• 9
• 12
• 6
• 5.1

แหล่งที่มา

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

สามารถคัดลอกรูปแบบข้างต้นสำหรับคำค้นหาสื่อที่เหลือ

การค้นหาการสนับสนุนพื้นที่สี

ตัวอย่างโค้ดต่อไปนี้จะตรวจสอบเบราว์เซอร์ของผู้ใช้และการเลือกพื้นที่สีที่จะใช้

ตรวจสอบจาก CSS

คุณสอบถามการสนับสนุนพื้นที่สีส่วนบุคคลได้โดยใช้คำค้นหา @supports ดังนี้

การสนับสนุนเบราว์เซอร์

• 28
• 12
• 22
• 9

แหล่งที่มา

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

ตรวจสอบจาก JavaScript

สำหรับ JavaScript ฟังก์ชัน CSS.supports() จะเรียกและส่งพร็อพเพอร์ตี้และคู่ค่าเพื่อดูว่าเบราว์เซอร์เข้าใจหรือไม่

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

การรวมฮาร์ดแวร์และการตรวจสอบการแยกวิเคราะห์เข้าด้วยกัน

ในระหว่างที่รอแต่ละเบราว์เซอร์ใช้ฟีเจอร์สีใหม่เหล่านี้ เป็นความคิดที่ดีที่จะตรวจสอบทั้งความสามารถของฮาร์ดแวร์และความสามารถในการแยกสี บ่อยครั้งที่ฉันใช้ในการเปลี่ยนสีเป็นความละเอียดสูง

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

แก้ไขข้อบกพร่องของสีด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้รับการอัปเดตและมีเครื่องมือใหม่ๆ เพื่อช่วยนักพัฒนาซอฟต์แวร์ในการสร้าง แปลง และแก้ไขข้อบกพร่องสี HD

อัปเดตตัวเลือกสีแล้ว

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

ขอบเขตของขอบเขต

มีการเพิ่มเส้นแบ่งขอบเขตขอบเขตโดยลากเส้นระหว่าง srgb กับ display-p3 gamut แสดงให้เห็นอย่างชัดเจนว่าภายในสีที่เลือกอยู่ในขอบเขตของสีใด

วิธีนี้จะช่วยให้ผู้เขียนแยกความแตกต่างระหว่างสี HD และสีที่ไม่ใช่ HD ได้ และจะมีประโยชน์อย่างยิ่งเมื่อทำงานกับฟังก์ชัน color() และพื้นที่สีใหม่ เนื่องจากสามารถสร้างสีได้ทั้งแบบที่ไม่ใช่ HD และ HD หากต้องการตรวจสอบว่าสีอยู่ในขอบเขตใด ให้ป๊อปอัปตัวเลือกสี แล้วดูได้เลย!

แปลงสี

เครื่องมือสำหรับนักพัฒนาเว็บสามารถแปลงสีระหว่างรูปแบบที่รองรับ เช่น hsl, hwb, rgb และ hex มาหลายปีแล้ว shift + click บนตัวอย่างสีสี่เหลี่ยมจัตุรัสในแผงรูปแบบเพื่อดำเนินการแปลงนี้ เครื่องมือสีใหม่ไม่เพียงแค่วนดู Conversion แต่ยังทำให้ได้กล่องโต้ตอบที่ผู้เขียนสามารถดูและเลือก Conversion ที่ต้องการได้

ขณะทำ Conversion คุณต้องทราบว่ามีการตัด Conversion ออกให้พอดีกับพื้นที่หรือไม่ ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บมีไอคอนคำเตือนเป็นสีที่แปลงแล้วเพื่อแจ้งเตือนคุณเกี่ยวกับการตัดคลิปนี้

ดูฟีเจอร์การแก้ไขข้อบกพร่อง CSS เพิ่มเติมในเครื่องมือสำหรับนักพัฒนาเว็บ

ขั้นตอนถัดไป

ความมีชีวิตชีวา การดัดแปลงและการประมาณค่าที่สอดคล้องกันมากขึ้น และการส่งโดยรวมมอบประสบการณ์ที่มีสีสันมากขึ้นให้แก่ผู้ใช้ของคุณ

อ่านแหล่งข้อมูลสีเพิ่มเติม จากคู่มือ