ย้ายข้อมูลไปยังสี 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 ครั้ง ทำให้ Cascade โดยจะกลับไปใช้สีก่อนหน้าที่เข้าใจได้

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

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

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

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

คำถามเกี่ยวกับการสนับสนุนขอบเขตสี

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

ตรวจสอบจาก CSS

คำถามสนับสนุนที่เฉพาะเจาะจงน้อยที่สุดคือ dynamic-range คิวรี่สื่อ:

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

คุณสามารถสอบถามฝ่ายสนับสนุนหรือมากกว่านั้นผ่าน color-gamut คิวรี่สื่อ:

@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() สามารถเรียกใช้และส่งผ่านข้อความค้นหาสื่อสำหรับการประเมินได้

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:

@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 ทำให้เห็นชัดเจนว่าสีที่เลือกอยู่ภายในขอบเขตใด

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

แปลงสี

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

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

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

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

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

อ่านเพิ่มเติมเกี่ยวกับแหล่งข้อมูลสี จากคำแนะนำ