ใหม่ใน Chrome 110

Adriana Jara

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

  • เพิ่มสไตล์ที่กำหนดเองลงในองค์ประกอบภาพในภาพด้วย:picture-in-picture Pseudo Class ใหม่
  • ตั้งค่าลักษณะการเริ่มการทำงานของเว็บแอปด้วย launch_handler ในไฟล์ Manifest
  • ใช้แอตทริบิวต์ credentialless ใน iFrame เพื่อฝังเนื้อหาของบุคคลที่สามที่ไม่ได้ตั้งค่านโยบายเครื่องมือฝังแบบข้ามต้นทาง
  • และยังมีอีกมากมาย

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

คลาสจำลอง :picture-in-picture

Picture-in-Picture API ช่วยให้เว็บไซต์สร้างหน้าต่างวิดีโอแบบลอยที่แสดงอยู่ด้านบนเสมอเพื่อให้ผู้ใช้บริโภคสื่อต่อไปได้ขณะโต้ตอบกับเนื้อหาอื่นๆ

ตอนนี้คุณสามารถเพิ่มสไตล์ให้กับองค์ประกอบเพื่อปรับปรุงประสบการณ์การใช้งานได้ด้วย :picture-in-picture คลาสจำลอง CSS

ข้อมูลโค้ดด้านล่างแสดงวิธีใช้คลาสภาพในภาพเพื่อเพิ่มข้อความลงในคอนเทนเนอร์วิดีโอซึ่งจะเตือนผู้ใช้ว่าวิดีโอกำลังเล่นอยู่

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

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

ลองใช้ตัวอย่างและปรับปรุงประสบการณ์การใช้งานวิดีโอแบบภาพซ้อนภาพ

สมาชิกไฟล์ Manifest ของ launch_handler

Launch Handler API ช่วยให้คุณควบคุมวิธีเปิดเว็บแอปได้ เช่น จะใช้หน้าต่างที่มีอยู่หรือหน้าต่างใหม่ และระบบจะไปยัง URL การเปิดหรือไม่

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

ตอนนี้เว็บแอปสามารถปรับแต่งลักษณะการเริ่มต้นได้ด้วยการใช้launch_handlerองค์ประกอบของไฟล์ Manifest

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

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless iframe

หนึ่งในความท้าทายที่ใหญ่ที่สุดของการแยกแหล่งที่มาหลายแห่งคือ iframe แบบข้ามแหล่งที่มาทั้งหมดต้องใช้ COEP และ CORP เบราว์เซอร์จะไม่โหลด iframe ที่ไม่มีส่วนหัวเหล่านั้น

แอตทริบิวต์ credentialless จะช่วยฝัง iframe ของบุคคลที่สามที่ไม่ได้ตั้งค่าส่วนหัวเหล่านี้

เมื่อใช้ credentialless ระบบจะโหลด iframe จากบริบทอื่นที่ว่างเปล่า โดยเฉพาะอย่างยิ่ง โฆษณาจะโหลดโดยไม่มีคุกกี้ iframe เริ่มต้นด้วยคุกกี้เปล่า

ในทํานองเดียวกัน API พื้นที่เก็บข้อมูล เช่น LocalStorage, CacheStorage และอื่นๆ จะโหลดและจัดเก็บข้อมูลในพาร์ติชันชั่วคราวใหม่ ระบบจะล้างพื้นที่เก็บข้อมูลทั้งหมดนี้เมื่อระบบยกเลิกการโหลดเอกสารระดับบนสุด ซึ่งจะช่วยให้นำข้อจำกัด COEP ออกได้

ดูข้อมูลเพิ่มเติมในบทความนี้เพื่อใช้ credentialless เพื่อโหลดเนื้อหาของบุคคลที่สามลงใน iframe อย่างปลอดภัย

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

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

ตอนนี้เรานำ Web SQL ออกจากบริบทที่ไม่ปลอดภัยแล้ว

พร็อพเพอร์ตี้ initial-letter ของ CSS มีวิธีตั้งค่าจำนวนบรรทัดตัวอักษรนำหน้าควรเลื่อนไปอยู่บรรทัดข้อความต่อๆ ไป

ตอนนี้ FileSystemHandle มีเมธอด remove() แล้ว

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

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 110 ได้ที่ลิงก์ด้านล่าง

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

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

ฉันชื่อ Adriana Jara และเราจะคอยแจ้งให้คุณทราบเกี่ยวกับฟีเจอร์ใหม่ๆ ใน Chrome ทันทีที่ Chrome 111 เปิดตัว