เอกสารนี้เป็นส่วนหนึ่งของคู่มือการใช้สี 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 ครั้ง ซึ่งจะทำให้การเรียงซ้อนสำรองเป็นสีก่อนหน้าที่เข้าใจได้
การเพิ่มประสิทธิภาพแบบต่อเนื่อง
- ข้อดี
- ควบคุมได้มากขึ้นด้วยความคมชัดของสีที่มีการจัดการ
- กลยุทธ์เสริมที่ไม่ส่งผลต่อสีปัจจุบัน
- ข้อเสีย
- คุณต้องจัดการไวยากรณ์ของสี 2 แบบแยกกัน
- คุณจะต้องจัดการขอบเขตสี 2 ช่วงสี
ตรวจสอบการรองรับขอบเขตและพื้นที่สี
เบราว์เซอร์ช่วยให้ตรวจสอบการรองรับขอบเขตที่กว้างขึ้นและการรองรับไวยากรณ์สีจาก CSS และ JavaScript อย่างไรก็ตาม เราไม่ทำให้มีเฉดสีเช่นนี้เลย แต่เราได้ให้คำตอบทั่วไปไว้เพื่อรักษาความเป็นส่วนตัวของผู้ใช้ แต่เรามีการรองรับพื้นที่สีแบบที่แน่นอน เนื่องจากไม่ได้มีแค่ความสามารถของฮาร์ดแวร์ของผู้ใช้อย่างขอบเขต
การค้นหาการสนับสนุนขอบเขตสี
ตัวอย่างโค้ดต่อไปนี้จะตรวจสอบช่วงสีของผู้ใช้ที่เข้าชมบนจอแสดงผล
ตรวจสอบจาก 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 gamut แสดงให้เห็นอย่างชัดเจนว่าภายในสีที่เลือกอยู่ในขอบเขตของสีใด
วิธีนี้จะช่วยให้ผู้เขียนแยกความแตกต่างระหว่างสี 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=6&hl=th)
ดูฟีเจอร์การแก้ไขข้อบกพร่อง CSS เพิ่มเติมในเครื่องมือสำหรับนักพัฒนาเว็บ
ขั้นตอนถัดไป
ความมีชีวิตชีวา การดัดแปลงและการประมาณค่าที่สอดคล้องกันมากขึ้น และการส่งโดยรวมมอบประสบการณ์ที่มีสีสันมากขึ้นให้แก่ผู้ใช้ของคุณ
อ่านแหล่งข้อมูลสีเพิ่มเติม จากคู่มือ