สิ่งที่จำเป็นต้องทราบมีดังนี้
- เพิ่มเอกลักษณ์ให้กับข้อความด้วยภาพเคลื่อนไหวของ
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 นั้นเป็นวิดีโอและส่งให้กับผู้เข้าร่วมระยะไกล
โปรดทราบว่าคุณสามารถใช้การจับภาพภูมิภาคเพื่อดำเนินการดังกล่าว แต่ในกรณีนี้หากมีเนื้อหาบางอย่าง เช่น รายการแบบเลื่อนลง ดึงมาที่ด้านบนของเนื้อหาที่เลือก เมนูแบบเลื่อนลงนั้นจะเป็นส่วนหนึ่งของการบันทึก
โดย Element Recording API จะแก้ปัญหานี้โดยให้คุณกำหนดเป้าหมายองค์ประกอบที่คุณต้องการแชร์
Checkout จับภาพสตรีมวิดีโอจากองค์ประกอบใดก็ได้เพื่อดูตัวอย่างโค้ดและลงทะเบียนทดลองใช้จากต้นทาง Elementจุ
และอีกมากมาย
แน่นอน ยังมีคำถามอีกมากมาย
ตอนนี้เมธอด
resizeBy()
และresizeTo()
ซึ่งเป็นส่วนหนึ่งของ Document Picture-in-Picture API ต่างต้องใช้ท่าทางสัมผัสของผู้ใช้คุณจะเปิดตัวเลือกตัวเลือกขององค์ประกอบ
<select>
ผ่านการเขียนโปรแกรมโดยใช้เมธอดshowPicker()
ของHTMLSelectElement
ได้scope_extensions
อยู่ในช่วงทดลองใช้จากต้นทาง จึงขยายลักษณะการทำงานของเว็บแอปให้รวมต้นทางอื่นๆ ได้ หากมีข้อตกลงระหว่างต้นทางหลักของเว็บแอปกับต้นทางที่เชื่อมโยง
อ่านเพิ่มเติม
ซึ่งจะกล่าวถึงไฮไลต์ที่สำคัญบางส่วนเท่านั้น ไปที่ลิงก์ต่อไปนี้เพื่อดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 121
- มีอะไรใหม่ใน Chrome DevTools (121)
- การเลิกใช้งานและการนำ Chrome 121 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 121
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ขอขอบคุณ คุณ Adriana Jara และทันทีที่มีการเปิดตัว Chrome 122 เราจะแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome