สิ่งใหม่ๆ ใน Chrome 121

Adriana Jara

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

  • เพิ่มเอกลักษณ์ให้กับข้อความด้วยภาพเคลื่อนไหวของ font-palette และการอัปเดต CSS อื่นๆ
  • มีการปรับปรุง Speculation Rules API
  • คุณลองใช้ Element Capture API ได้ในช่วงทดลองใช้จากต้นทาง
  • นอกจากนี้ยังมีอื่นๆ อีกมากมาย

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

การอัปเดต CSS

มาเริ่มกันที่การอัปเดต CSS

พร็อพเพอร์ตี้ scrollbar-color และ scrollbar-width พร้อมใช้งานแล้ว เครื่องมือเหล่านี้ช่วยให้คุณปรับแต่งแถบเลื่อนและเปลี่ยนอย่างที่คุณน่าจะคาดเดาได้ เช่น สีและความกว้าง

คุณสมบัติ font-palette ให้คุณเลือกชุดสีที่ต้องการแสดงผลแบบอักษรสี คุณสมบัตินี้รองรับภาพเคลื่อนไหวแล้ว ดังนั้นการสลับระหว่างจานสีจึงกลายเป็นการเปลี่ยนระหว่าง 2 จานสีที่เลือกไว้ได้อย่างราบรื่น

องค์ประกอบจำลอง ::spelling-error และ ::grammar-error ให้คุณปรับแต่งสีสำหรับข้อผิดพลาดด้านการสะกดและไวยากรณ์ ไฮไลต์คำที่สะกดผิดด้วยสีพื้นหลังหรือการตกแต่งอื่นๆ และใช้การตรวจตัวสะกดที่กำหนดเองโดยมีลักษณะที่ผสานรวมมากขึ้น

การมาสก์ CSS สำหรับ SVG ได้รับการปรับปรุงใหม่ โดยเป็นการติดตามผลการรองรับมาสก์ CSS ที่ได้รับการปรับปรุงใน Chrome 120 โดยเพิ่มการรองรับมาสก์แบบใหม่ให้กับ SVG (มาสก์หลายรายการ รวมถึง mask-mode, mask-composite, mask-position และ mask-repeat) นอกจากนี้ ระบบยังรองรับมาสก์ SVG ระยะไกล (เช่น มาสก์: url(masks.svg#star)) ด้วย

การแก้ไข: เวอร์ชันก่อนหน้าของบทความนี้กล่าวถึงการเพิ่มการรองรับเงื่อนไข supports() ใน @import ซึ่งแต่ไม่ใช่กรณีนี้ การเปลี่ยนแปลงนี้จะรวมอยู่ใน Chrome 122

การอัปเดต Speculation Rules API

เว็บไซต์สามารถใช้ Speculation Rules API เพื่อแจ้ง Chrome ว่าจะแสดงผลหน้าใดล่วงหน้าผ่านการเขียนโปรแกรม ซึ่งช่วยสร้างประสบการณ์ของผู้ใช้ที่ดียิ่งขึ้นด้วยการลดเวลาในการไปยังส่วนต่างๆ ของหน้าเว็บ

ตอนนี้ API มีการรองรับกฎเอกสารแล้ว ซึ่งเป็นส่วนขยายของไวยากรณ์กฎการคาดเดาที่ช่วยให้เบราว์เซอร์รับรายการ URL สำหรับการโหลดแบบคาดเดาจากองค์ประกอบในหน้าเว็บได้ กฎของเอกสารอาจมีเกณฑ์ที่สามารถใช้ลิงก์เหล่านี้ได้ เมื่อใช้ร่วมกับช่อง "eagerness" ใหม่ คุณจะดึงลิงก์ล่วงหน้าหรือการแสดงผลล่วงหน้าโดยอัตโนมัติในหน้าเว็บได้ทันทีเมื่อวางเมาส์เหนือช่องหรือเมื่อวางเมาส์ลงได้

ต่อไปนี้คือตัวอย่างกฎของเอกสาร

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

การเปลี่ยนแปลงที่แยกต่างหากช่วยให้ระบุกฎการคาดเดาโดยใช้ส่วนหัวการตอบกลับ HTTP Speculation- Rules ส่วนหัวเป็นทางเลือกในการใช้องค์ประกอบ <script> ในบรรทัด ค่าของส่วนหัวนี้ต้องเป็น URL ที่ชี้ไปยังทรัพยากรข้อความที่มีประเภท MIME "application/speculationrules+json" ระบบจะเพิ่มกฎทรัพยากรลงในชุดกฎของเอกสาร

นอกจากนี้ คำแนะนำของ No-Vary-Search ยังช่วยให้การดึงข้อมูลล่วงหน้าแบบคาดเดาตรงกัน แม้ว่าพารามิเตอร์การค้นหาของ URL จะเปลี่ยนไปก็ตาม ส่วนหัวการตอบกลับ HTTP No-Vary-Search จะประกาศว่าบางส่วนของคำค้นหา URL หนึ่งๆ จะถูกละเว้นเพื่อวัตถุประสงค์ในการจับคู่ได้ สามารถประกาศว่าลําดับของคีย์พารามิเตอร์การค้นหาไม่ควรป้องกันการจับคู่ พารามิเตอร์การค้นหาหนึ่งๆ ไม่ควรป้องกันการจับคู่ หรือพารามิเตอร์การค้นหาที่รู้จักบางรายการเท่านั้นที่ควรทําให้ข้อมูลไม่ตรงกัน

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงเหล่านี้ได้ที่ การปรับปรุง Speculation Rules API

ช่วงทดลองใช้ Element Capture API จากต้นทาง

Element Capture API มีให้บริการในช่วงทดลองใช้จากต้นทาง API นี้ช่วยให้คุณสามารถจับภาพและบันทึกองค์ประกอบ HTML ที่ต้องการ โดยจะเปลี่ยนการบันทึกทั้งแท็บให้เป็นการบันทึกต้นไม้ย่อย DOM ที่เฉพาะเจาะจง โดยบันทึกเฉพาะองค์ประกอบที่สืบทอดโดยตรงขององค์ประกอบเป้าหมาย กล่าวคือ แอปนี้จะครอบตัดและนำทั้งเนื้อหาที่บดบังและบดบังออก

ตัวอย่างของที่ Element Capture API มีประโยชน์ ได้แก่ แอปการประชุมทางวิดีโอที่ให้คุณฝังแอปพลิเคชันของบุคคลที่สามใน iframe ได้ ในสถานการณ์นี้ คุณอาจต้องการบันทึก iframe นั้นเป็นวิดีโอและส่งให้กับผู้เข้าร่วมระยะไกล

ภาพหน้าจอของการโทรการประชุมทางวิดีโอใน Chrome
Elad ใช้แอปพลิเคชันของบุคคลที่สามในการประชุมทางวิดีโอกับ François

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

จับภาพหน้าจอของรายการแบบเลื่อนลงแล้ว
รายการแบบเลื่อนลงของ Elad จะแสดงอยู่ที่ด้านบนของเนื้อหาที่ François ได้รับ

โดย Element Recording API จะแก้ปัญหานี้โดยให้คุณกำหนดเป้าหมายองค์ประกอบที่คุณต้องการแชร์

ภาพหน้าจอขององค์ประกอบเป้าหมายที่ไม่มีรายการแบบเลื่อนลงในมุมมอง
François ไม่เห็นรายการแบบเลื่อนลงจาก Elad

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

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

แน่นอน ยังมีคำถามอีกมากมาย

  • ตอนนี้เมธอด resizeBy() และ resizeTo() ซึ่งเป็นส่วนหนึ่งของ Document Picture-in-Picture API ต่างต้องใช้ท่าทางสัมผัสของผู้ใช้

  • คุณจะเปิดตัวเลือกตัวเลือกขององค์ประกอบ <select> ผ่านการเขียนโปรแกรมโดยใช้เมธอด showPicker() ของ HTMLSelectElement ได้

  • scope_extensions อยู่ในช่วงทดลองใช้จากต้นทาง จึงขยายลักษณะการทำงานของเว็บแอปให้รวมต้นทางอื่นๆ ได้ หากมีข้อตกลงระหว่างต้นทางหลักของเว็บแอปกับต้นทางที่เชื่อมโยง

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

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

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

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

ขอขอบคุณ คุณ Adriana Jara และทันทีที่มีการเปิดตัว Chrome 122 เราจะแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome