เอกสารนี้เป็นส่วนหนึ่งของคู่มือสีของ CSS ความละเอียดสูง
มี 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 คำสำหรับตรวจสอบการสนับสนุน ดังนี้
ตรวจสอบจาก 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 ถูกตัดเพื่อให้พอดีกับ พื้นที่ทำงาน ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บมีไอคอนคำเตือนเป็นสีที่แปลงแล้วซึ่งจะแจ้งเตือนคุณ ในการสร้างคลิปนี้
![ภาพหน้าจอของการตัดขอบเขตของเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งมีไอคอนคำเตือนอยู่ข้างสี](https://developer.chrome.com/static/docs/css-ui/migrate-hd-color/image/devtools-informing.png?authuser=19&hl=th)
สำรวจฟีเจอร์การแก้ไขข้อบกพร่อง CSS ในเครื่องมือสำหรับนักพัฒนาเว็บเพิ่มเติม
ขั้นตอนถัดไป
ความสดใหม่ การปรับแต่งและการประมาณค่าที่สอดคล้องกัน และให้ มีสีสันมากขึ้นแก่ผู้ใช้
อ่านเพิ่มเติมเกี่ยวกับแหล่งข้อมูลสี จากคำแนะนำ