ใหม่ใน Chrome 110

Adriana Jara

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

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

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

คลาสจำลองแบบภาพซ้อนภาพ

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

ตอนนี้เมื่อใช้ :picture-in-picturecss Pseudo-class เพื่อเพิ่มรูปแบบลงในองค์ประกอบเพื่อปรับปรุงประสบการณ์การใช้งาน

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

#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;
}

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

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

Launcher_handler ไฟล์ Manifest

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

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

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

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

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

iframe credentialless รายการ

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

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

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

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

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

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

นอกจากนี้ยังมีอีกมากมาย

ตอนนี้มีการนำ SQL ของเว็บออกในบริบทที่ไม่ปลอดภัย

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

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

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

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

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

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

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