พื้นที่สีและฟังก์ชันใหม่ของ CSS ในเครื่องมือค้นหาหลักทั้งหมด

ตอนนี้เครื่องมือหลักทั้งหมดรองรับพื้นที่สีและฟังก์ชัน CSS ใหม่แล้ว ดูว่าสีเหล่านี้ช่วยเพิ่มความมีชีวิตชีวาให้กับการออกแบบได้อย่างไร

Rachel Andrew

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

เข้าถึงพื้นที่สีจาก CSS

เรามีฟังก์ชันหลายรายการที่ช่วยให้เข้าถึงสีในขอบเขตสี sRGB ได้ ซึ่งได้แก่ rgb(), hsl() และ hwb() ตอนนี้เบราว์เซอร์รองรับฟังก์ชัน color() ซึ่งเป็นวิธีที่เป็นมาตรฐานในการเข้าถึงสีภายในพื้นที่สี RGB ซึ่งรวมถึง sRGB, Display P3 และ Rec2020 คุณดูตัวอย่างได้ใน CSS ต่อไปนี้

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

การรองรับเบราว์เซอร์

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Safari: 15.

แหล่งที่มา

นอกจากนี้ ระบบยังรองรับฟังก์ชันต่างๆ ที่อนุญาตให้เข้าถึงพื้นที่สีอื่นนอกเหนือจาก sRGB โดยใช้ lch(), lab(), oklch() และ oklab()

การรองรับเบราว์เซอร์

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Safari: 15.

แหล่งที่มา

ดูข้อมูลเกี่ยวกับพื้นที่สีต่างๆ ทั้งหมดนี้ได้ในคู่มือสี CSS ความละเอียดสูง

ฟังก์ชัน color-mix()

นอกจากพื้นที่สีใหม่เหล่านี้แล้ว ตอนนี้เครื่องมือทั้งหมดยังรองรับฟังก์ชัน color-mix() ด้วย ฟังก์ชันนี้ช่วยให้คุณผสมสีหนึ่งเข้ากับอีกสีหนึ่งในพื้นที่สีใดก็ได้ ใน CSS ต่อไปนี้ สีน้ำเงิน 25% จะผสมกับสีขาวในพื้นที่สี srgb

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

การรองรับเบราว์เซอร์

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Safari: 16.2

แหล่งที่มา

ดูข้อมูลเพิ่มเติมเกี่ยวกับ color-mix()

ฟังก์ชันและพื้นที่สีใหม่เหล่านี้สัญญาว่าจะนำสีสันสดใสระดับ HD มาสู่เว็บ หากต้องการแรงบันดาลใจ ให้เริ่มต้นด้วยการสร้างการไล่ระดับสีที่สวยงามโดยใช้เครื่องมือสร้างการไล่ระดับสี HD ที่ gradient.style