ใหม่ใน Chrome 110

Adriana Jara

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

  • เพิ่มรูปแบบที่กำหนดเองให้กับองค์ประกอบการแสดงภาพซ้อนภาพด้วยคลาสสมมติใหม่ของ :picture-in-picture
  • ตั้งค่าลักษณะการเริ่มการทำงานของเว็บแอปด้วย 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 เปิดตัว