ประเภทสีและพื้นที่สีใหม่ของ CSS, ฟังก์ชันตรีโกณมิติของ CSS และ View Transitions API
การเปลี่ยนแปลงต่อไปนี้มีผลกับ Chrome เวอร์ชันเบต้าใหม่ล่าสุดสำหรับ Android, ChromeOS, Linux, macOS และ Windows เว้นแต่จะระบุไว้เป็นอย่างอื่น เรียนรู้เพิ่มเติมเกี่ยวกับฟีเจอร์ที่แสดงรายการไว้ที่นี่ผ่านลิงก์ที่ให้ไว้หรือจากรายการใน ChromeStatus.com Chrome 111 เป็นเวอร์ชันเบต้าตั้งแต่วันที่ 9 กุมภาพันธ์ 2023 คุณดาวน์โหลดเวอร์ชันล่าสุดได้จาก Google.com สำหรับเดสก์ท็อปหรือ Google Play Store ใน Android
CSS
ประเภทสีและการเว้นวรรค CSS ใหม่
ฟีเจอร์ทั้งหมดที่อธิบายไว้ในระดับสี CSS 4 พร้อมใช้งานแล้ว ซึ่งรวมถึง 4 ประเภทสีที่ไม่ขึ้นอยู่กับอุปกรณ์ (Labs, Oklab, lch และ Oklch), ฟังก์ชัน color() และพื้นที่สีที่ผู้ใช้กำหนดสำหรับการไล่ระดับสีและภาพเคลื่อนไหว
อ่านคู่มือสี CSS แบบความละเอียดสูงเพื่อเรียนรู้เกี่ยวกับประเภทสีและการเว้นวรรคใหม่เหล่านี้
ฟังก์ชัน color-mix()
ฟังก์ชันที่มีประโยชน์อย่างเหลือเชื่อของ color-mix() จาก CSS Color 5 ก็จัดส่งให้ด้วย ฟังก์ชันนี้ช่วยให้สามารถผสมเปอร์เซ็นต์ของสีหนึ่งกับสีอื่นในพื้นที่สีที่รองรับ ตัวอย่างต่อไปนี้จะผสม 10% ของ blue เป็น white ใน SRGB
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
ตัวเลือก CSS 4 Pseudo-Class :nth-child(an + b จาก S)
ขยาย :nth-child(an + b) และ :nth-last-child() เพื่อรับตัวเลือก เช่น :nth-child(3 of .c) คือ .c รายการที่ 3 ภายใต้รายการหลักที่ระบุ หากต้องการดูข้อมูลเพิ่มเติม โปรดอ่านโพสต์การควบคุมการเลือก :nth-child() ได้มากขึ้นด้วยไวยากรณ์ of S
หน่วยแบบอักษรรูทของ CSS
เพิ่มหน่วยแบบอักษรรูท: rex, rch, ric และ rlh ไปยังหน่วยแบบอักษรรูทที่มีอยู่ของ rem
ฟังก์ชันตรีโกณมิติ CSS
เพิ่มฟังก์ชันตรีโกณมิติ sin(), cos(), tan(), asin(), acos(), atan(), atan2() ในนิพจน์คณิตศาสตร์ CSS แล้ว
การค้นหาคอนเทนเนอร์สไตล์สำหรับคุณสมบัติที่กำหนดเองของ CSS
เพิ่มฟังก์ชัน style() ลงในกฎ @container เพื่อให้สามารถใช้รูปแบบที่อิงตามค่าที่คำนวณแล้วของพร็อพเพอร์ตี้ที่กำหนดเองขององค์ประกอบระดับบน
พร็อพเพอร์ตี้ baseline-source
พร็อพเพอร์ตี้ baseline-source ช่วยให้นักพัฒนาเว็บระบุได้ว่าช่องระดับอินไลน์ควรใช้เกณฑ์พื้นฐาน first หรือ last เพื่อจัดข้อความภายใน Linebox
API ของเว็บ
สตริงนโยบายสิทธิ์และสิทธิ์ของ window-management
Chrome 111 เพิ่ม window-management เป็นชื่อแทนสำหรับสิทธิ์ window-placement และสตริงนโยบายสิทธิ์ การดำเนินการนี้เป็นส่วนหนึ่งของความพยายามครั้งใหญ่ในการเปลี่ยนชื่อสตริงโดยการเลิกใช้งานและนำ window-placement ออกในท้ายที่สุด การเปลี่ยนแปลงคำศัพท์จะช่วยปรับปรุงอายุการใช้งานของข้อบ่งชี้เนื่องจาก Window Management API มีการพัฒนาเมื่อเวลาผ่านไป
Media Session API: การนำเสนอการทำงานของสไลด์
เพิ่มการดำเนินการ previousslide และ nextslide รายการลงใน Media Session API ที่มีอยู่
ArrayBuffer ที่ปรับขนาดได้ และ SharedArrayBuffer ที่เติบโตได้
ขยายตัวสร้าง ArrayBuffer เพื่อรับความยาวสูงสุดเพิ่มเติมที่อนุญาตให้เติบโตในตำแหน่งและการย่อบัฟเฟอร์ ในทำนองเดียวกัน จะมีการขยาย SharedArrayBuffer เพื่อเพิ่มระยะเวลาสูงสุดที่อนุญาตให้มีการเติบโตในตำแหน่ง
กฎการคาดเดา: คีย์นโยบาย URL ที่มา
ซึ่งจะขยายไวยากรณ์กฎการคาดเดาเพื่อให้นักพัฒนาแอปสามารถระบุนโยบาย URL ที่มาเพื่อใช้กับคำขอแบบคาดเดาที่ทริกเกอร์โดยกฎการคาดเดา ทั้งยังเป็นการเริ่มใช้ "นโยบาย URL ที่มาที่เข้มงวดเพียงพอ" อีกครั้ง
Shadow DOM การประกาศสตรีมมิง
วิธีนี้จะเพิ่มการสนับสนุนสำหรับสตรีมมิงโดยการแนบรากของเงาบนแท็กเปิด แทนที่จะเป็นแท็กปิดของเทมเพลต
ดู Transitions API
เปิดใช้การสร้างการเปลี่ยนที่สมบูรณ์แบบในแอปพลิเคชันหน้าเว็บเดียว (SPA) โดยการรวมมุมมองและการอนุญาตให้ DOM เปลี่ยนแปลงโดยไม่มีการทับซ้อนระหว่างสถานะต่างๆ ใช้การเปลี่ยนมุมมองเพื่อสร้างการเปลี่ยนที่กำหนดเอง หรือใช้ค่าเริ่มต้นครอสเฟดอย่างง่ายเพื่อปรับปรุงประสบการณ์ของผู้ใช้
โปรดอ่านบทความสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome เพื่อดูข้อมูลเพิ่มเติมและตัวอย่างการเปลี่ยนเพื่อช่วยให้คุณเริ่มต้นใช้งาน
ส่วนขยายการเขียนโค้ดวิดีโอที่รองรับการปรับขนาดของ WebRTC
ส่วนขยายนี้กำหนดวิธีการมาตรฐานสำหรับการเลือกระหว่างการกำหนดค่าการเขียนโค้ดวิดีโอที่รองรับการปรับขนาด (SVC) ที่เป็นไปได้ในแทร็กวิดีโอ WebRTC ขาออก
แอตทริบิวต์ของ WebXR enabledFeatures
แสดงผลชุดฟีเจอร์ที่เปิดใช้สำหรับ XRSession นี้ตามที่ระบุโดย XRSessionInit และฟีเจอร์โดยนัยที่จำเป็นตามข้อกำหนดสำหรับโหมดและฟีเจอร์ที่ระบุ สำหรับเซสชันที่ได้รับอนุญาต รายการนี้จะมี requiredFeatures ทั้งหมด แต่อาจเป็นส่วนหนึ่งของ optionalFeatures ฟีเจอร์ส่วนใหญ่มีทางเลือกในการตรวจสอบว่าได้ให้สิทธิ์หรือไม่ อย่างไรก็ตาม สำหรับฟีเจอร์บางอย่าง สัญญาณที่ระบุว่าฟีเจอร์หนึ่งๆ ได้รับการเปิดใช้งานหรือไม่นั้นอาจเกี่ยวข้องอย่างมากกับข้อมูลสำหรับฟีเจอร์ที่ยังไม่พร้อมให้บริการในขณะนี้ แทนที่จะเป็นการไม่มีข้อมูลเลย การค้นหา enabledFeatures คุณจะระบุได้ว่าควรแสดงคำแนะนำที่เป็นประโยชน์ (เช่น เพื่อปรับปรุงหรือเริ่มติดตาม) หรือไม่ หรือระบบจะไม่รองรับฟีเจอร์ใดในเซสชันปัจจุบันเลย
ช่วงทดลองใช้จากต้นทางอยู่ระหว่างดำเนินการ
ใน Chrome 111 คุณสามารถเลือกใช้การทดลองใช้ต้นทางใหม่ดังต่อไปนี้
การทดลองใช้การเลิกใช้งานเพื่อนำการข้าม CSP ของ connect-src ใน Web Payment API ออก
ปฏิเสธความสามารถของ Web Payment API ในการข้ามนโยบาย Connect-src CSP เมื่อดึงข้อมูลไฟล์ Manifest หลังจากการเลิกใช้งานนี้ นโยบาย Connect-src CSP ของเว็บไซต์จะต้องอนุญาต URL วิธีการชำระเงินที่ระบุในการเรียกใช้ PaymentRequest รวมถึง URL อื่นๆ ที่เชนวิธีการนั้นเชื่อมโยงเพื่อดึงข้อมูลไฟล์ Manifest
เราจะนำความสามารถในการข้ามนี้ออกจาก Chrome 111 โดยมีช่วงทดลองใช้จากต้นทางแบบย้อนกลับจาก 111 เป็น 113 สำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการเปิดใช้การข้ามอีกครั้งชั่วคราว หากต้องการเลือกใช้ฟีเจอร์นี้ ให้ลงทะเบียนการทดลองใช้การเลิกใช้งานแบบย้อนกลับสำหรับการข้าม connect-src CSP
การแสดงภาพซ้อนภาพในเอกสาร
Document Picture-in-Picture API เป็น API ใหม่เพื่อเปิดหน้าต่างแบบเปิดตลอดเวลาที่สามารถป้อนข้อมูลเนื้อหา HTML ที่กำหนดเอง ซึ่งเป็นการขยายจาก Picture-in-Picture API ที่มีอยู่ซึ่งอนุญาตให้ใส่ HTMLVideoElement ในหน้าต่าง PIP เท่านั้น วิธีนี้ช่วยให้นักพัฒนาเว็บมอบประสบการณ์ PIP ที่ดีขึ้นให้แก่ผู้ใช้ได้
อ่านเอกสารประกอบสำหรับการแสดงภาพซ้อนภาพในเอกสาร
ลงทะเบียนสำหรับช่วงทดลองใช้ฟีเจอร์การแสดงภาพซ้อนภาพในเอกสาร
การเลิกใช้งานและการนำออก
Chrome เวอร์ชันนี้แนะนำการเลิกใช้งานและการนำออกตามที่ระบุไว้ด้านล่าง ไปที่ ChromeStatus.com เพื่อดูรายการการเลิกใช้งานที่วางแผนไว้ การเลิกใช้งานปัจจุบัน และการนำออกก่อนหน้านี้
Chrome รุ่นนี้จะนำฟีเจอร์ 3 รายการออก
นำเครื่องมือการชำระเงินออก
PaymentInstruments คือ Web API ที่รองรับการติดตั้งแอปการชำระเงินโดยไม่ใช้ JIT (ดู https://w3c.github.io/payment-handler/) โดยออกแบบมาโดยสันนิษฐานว่าเบราว์เซอร์จะจัดเก็บรายละเอียดเครื่องมือการชำระเงินจริง ซึ่งไม่ถือว่าเป็นความจริง และเกิดการรั่วไหลของความเป็นส่วนตัวบางประการ เบราว์เซอร์ยังไม่ได้จัดส่งบนเบราว์เซอร์อื่นๆ และเราไม่เห็นความสนใจจากผู้ให้บริการเบราว์เซอร์รายอื่น ดังนั้น ระบบจึงเลิกใช้งาน API นี้และนำออก
นำการข้าม CSP connect-src รายการออกจาก Web Payment API
เลิกใช้งานความสามารถของ Web Payment API ในการข้ามนโยบาย connect-src CSP เมื่อดึงข้อมูลไฟล์ Manifest หลังจากการนำออกนี้ นโยบาย connect-src CSP ของเว็บไซต์จะต้องอนุญาต URL ของวิธีการชำระเงินที่ระบุในการเรียกใช้ PaymentRequest รวมถึง URL อื่นๆ ที่เมธอดเชื่อมโยงเพื่อดึงข้อมูลไฟล์ Manifest
ดูข้อมูลในส่วนช่วงทดลองใช้จากต้นทางสำหรับวิธีเลือกใช้ช่วงทดลองใช้การเลิกใช้งานเพื่อให้มีเวลามากขึ้นในการทำการเปลี่ยนแปลงที่จำเป็นเนื่องจากการนำออกนี้
ข้อมูลระบุตัวตนของผู้ขายในเหตุการณ์ canmakepayment
เหตุการณ์ Service Worker ของ canmakepayment ช่วยให้ผู้ขายทราบว่าผู้ใช้มีบัตรอยู่ในแอปการชำระเงินที่ติดตั้งไว้หรือไม่ ซึ่งใช้เพื่อส่งต่อต้นทางและข้อมูลที่กําหนดเองของผู้ขายไปยัง Service Worker จากต้นทางของแอปการชำระเงินโดยไม่มีการแจ้งเตือน การสื่อสารข้ามต้นทางนี้เกิดขึ้นในการสร้าง PaymentRequest ใน JavaScript, ไม่ต้องใช้ท่าทางสัมผัสของผู้ใช้ และไม่แสดงอินเทอร์เฟซผู้ใช้ ระบบนำข้อความข้อมูลเงียบนี้ออกจากเหตุการณ์ canmakepayment และ IS_READY_TO_PAY Intent ของ Android) แล้ว