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

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

Rachel Andrew

ตอนนี้ CSS รองรับพื้นที่สีที่ช่วยให้เราเข้าถึงสีนอก gamut ของ 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.
  • ขอบ: 111
  • Firefox: 113
  • Safari: 15.

แหล่งที่มา

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

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

  • Chrome: 111.
  • ขอบ: 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.
  • ขอบ: 111
  • Firefox: 113
  • Safari: 16.2

แหล่งที่มา

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

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