สิ่งใหม่ๆ ใน 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

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

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

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

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

ชำระเงิน บันทึกสตรีมวิดีโอจากองค์ประกอบใดก็ได้สำหรับตัวอย่างโค้ด และลงทะเบียนทดลองใช้จากต้นทางของ ElementCapture

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

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

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

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

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

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

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

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

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

ขอโทษครับ Adriana Jara นะ ทันทีที่ Chrome 122 เปิดตัว ผมจะมาบอกว่ามีอะไรใหม่ใน Chrome