ใหม่ใน Chrome 111

Adriana Jara

สิ่งที่จำเป็นต้องทราบมีดังนี้

  • สร้างทรานซิชันที่ดูดีในแอปแบบหน้าเดียวด้วย View Transitions API
  • ยกระดับสีไปอีกขั้นด้วยการรองรับ CSS Color Level 4
  • สำรวจเครื่องมือใหม่ในแผงสไตล์เพื่อใช้ประโยชน์จากฟังก์ชันการทำงานใหม่ๆ ของสี
  • นอกจากนี้ยังมีอีกมากมาย

ฉันชื่อ Adriana Jara มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 111

View Transitions API

การสร้างการเปลี่ยนที่ราบรื่นบนเว็บเป็นงานที่ซับซ้อน View Transitions API มีไว้เพื่อช่วยให้การสร้างทรานซิชันที่ดูดียิ่งขึ้นได้ง่ายขึ้นด้วยการจับภาพมุมมองและอนุญาตให้ DOM เปลี่ยนแปลงได้โดยไม่ทับซ้อนกันระหว่างสถานะต่างๆ

ทรานซิชันที่สร้างด้วย View Transition API ลองใช้เว็บไซต์เดโม - ต้องใช้ Chrome 111 ขึ้นไป

การเปลี่ยนมุมมองเริ่มต้นคือการเปลี่ยนภาพแบบ Cross Fade โดยข้อมูลโค้ดต่อไปนี้จะใช้ประสบการณ์นี้

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

เมื่อเรียก .startViewTransition() แล้ว API จะบันทึกสถานะปัจจุบันของหน้าเว็บ

เมื่อดำเนินการเสร็จแล้ว ระบบจะเรียก callback ที่ส่งไปยัง .startViewTransition() ซึ่ง DOM จะเปลี่ยนแปลงในส่วนนี้ จากนั้น API จะบันทึกสถานะใหม่ของหน้าเว็บ

โปรดทราบว่า API เปิดตัวสําหรับแอปหน้าเว็บเดียว (SPA) แต่รองรับรูปแบบอื่นๆ ด้วย

API นี้มีรายละเอียดมากมาย ดูข้อมูลเพิ่มเติมได้ในบทความที่มีตัวอย่างและรายละเอียด หรือดูเอกสารประกอบเกี่ยวกับการเปลี่ยนมุมมองใน MDN

CSS Color Level 4

เมื่อใช้สี CSS ระดับ 4 ตอนนี้ CSS จะรองรับจอแสดงผลความละเอียดสูง โดยระบุสีจากช่วงสี HD ในขณะเดียวกันก็เสนอพื้นที่สีที่มีความเชี่ยวชาญ

กล่าวโดยย่อคือ คุณจะมีสีให้เลือกมากขึ้น 50% คุณคิดว่า 16 ล้านสีฟังดูเยอะมาก เราคิดเหมือนกัน

ชุดรูปภาพจะแสดงการเปลี่ยนระหว่างขอบเขตสีที่กว้างและแคบ ซึ่งแสดงให้เห็นความสดของสีและผลลัพธ์ของสี
ลองใช้ด้วยตัวคุณเอง

การติดตั้งใช้งานนี้รวมถึงฟังก์ชัน color() ซึ่งสามารถใช้กับพื้นที่สีใดก็ได้ที่ระบุสีด้วยแชแนล R, G และ B color() จะใช้พารามิเตอร์พื้นที่สีก่อน ตามด้วยชุดค่าช่องสำหรับ RGB และอัลฟ่าบางส่วน (ไม่บังคับ)

ต่อไปนี้คือตัวอย่างการใช้ฟังก์ชันสีกับพื้นที่สีต่างๆ

.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);
}

โปรดอ่านเอกสารประกอบเพิ่มเติมในบทความนี้เพื่อใช้ประโยชน์จากสีความละเอียดสูงโดยใช้ CSS อย่างเต็มที่

เครื่องมือสำหรับงานสีแบบใหม่

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีฟีเจอร์ใหม่เพื่อรองรับข้อกำหนดเฉพาะระดับ 4 ของสี css

ตอนนี้แผงสไตล์รองรับพื้นที่สีใหม่ 12 รายการและช่วงสีใหม่ 7 รายการที่ระบุไว้ในข้อกำหนด ต่อไปนี้คือตัวอย่างคำจำกัดความสี CSS ที่มี color(), lch(), oklab() และ color-mix()

ตัวอย่างคําจํากัดความสี CSS

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

นอกจากนี้ เครื่องมือเลือกสียังรองรับพื้นที่สีใหม่ทั้งหมดพร้อมฟีเจอร์เพิ่มเติม เช่น คลิกตัวอย่างสีของ color(display-p3 1 0 1) นอกจากนี้ เรายังได้เพิ่มเส้นขอบของช่วงสีเพื่อแยกความแตกต่างระหว่างช่วงสี sRGB กับ Display P3 เพื่อให้เข้าใจช่วงสีของสีที่เลือกได้ชัดเจนยิ่งขึ้น เส้นขอบของช่วงสี

เครื่องมือเลือกสียังรองรับการเปลี่ยนสีระหว่างรูปแบบสีต่างๆ ด้วย

กำลังแปลงสีในรูปแบบสี

ดูข้อมูลเพิ่มเติมเกี่ยวกับสีสำหรับการแก้ไขข้อบกพร่องและฟีเจอร์ใหม่อื่นๆ ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้จากโพสต์นี้

และอีกมากมาย

แถมยังมีอีกมากมาย

อ่านเพิ่มเติม

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 111 ได้ที่ลิงก์ด้านล่าง

สมัครใช้บริการ

หากต้องการติดตามข่าวสารล่าสุด โปรดติดตามช่อง YouTube ของนักพัฒนาซอฟต์แวร์ Chrome แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่

ฉันชื่อ Adriana Jara และทันทีที่ Chrome 112 เปิดตัว ฉันจะมาแจ้งให้คุณทราบว่ามีอะไรใหม่ใน Chrome