ใหม่ใน Chrome 111

Adriana Jara

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

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

ดู Transitions API

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

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

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

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 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

เครื่องมือสำหรับนักพัฒนาเว็บแบบสีใหม่

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

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

ตัวอย่างการกำหนดสี CSS

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

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

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

กำลังแปลงสีระหว่างรูปแบบสี

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

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

แน่นอนว่ายังมีอีกมากมาย

  • CSS ได้เพิ่มฟังก์ชันตรีโกณมิติ หน่วยแบบอักษรระดับรูทเพิ่มเติม และตัวเลือกเทียมเสริมระดับลูกที่ n
  • Document Picture in Picture API อยู่ระหว่างช่วงทดลองใช้จากต้นทาง
  • ตอนนี้การดำเนินการ previousslide และ nextslide เป็นส่วนหนึ่งของ Media Session API แล้ว ดูเดโมได้ที่นี่

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

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

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

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

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