ใหม่ใน Chrome 115

Adriana Jara

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

  • ใช้ ScrollTimeline และ ViewTimeline เพื่อสร้างภาพเคลื่อนไหวแบบเลื่อนที่ช่วยปรับปรุงประสบการณ์ของผู้ใช้
  • เฟรมที่มีการปิดกั้นทำงานร่วมกับ Privacy Sandbox API อื่นๆ เพื่อฝังเนื้อหาที่เกี่ยวข้อง แต่ในขณะเดียวกันก็ป้องกันการแชร์บริบทที่ไม่จำเป็น
  • เมื่อใช้ Topics API เบราว์เซอร์จะแชร์ข้อมูลกับบุคคลที่สามเกี่ยวกับความสนใจของผู้ใช้ไปพร้อมกับรักษาความเป็นส่วนตัว
  • และยังมีอื่นๆ อีกมากมาย

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

เลื่อนภาพเคลื่อนไหวที่ใช้

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

ตัวอย่างต่อไปนี้จะแสดงกรณีการใช้งานบางส่วน เช่น คุณสามารถสร้างสัญญาณบอกสถานะการอ่านที่เคลื่อนไหวตามที่คุณเลื่อนได้ ดังนี้

สัญญาณบอกสถานะการอ่านที่ด้านบนของเอกสาร ซึ่งขับเคลื่อนด้วยการเลื่อน

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนยังสามารถสร้างองค์ประกอบที่ค่อยๆ ปรากฏขึ้นเมื่อเข้ามาอยู่ในมุมมอง โดยทำดังนี้

รูปภาพในหน้านี้จะค่อยๆ ปรากฏขึ้นเมื่อเข้ามาเห็น

โดยค่าเริ่มต้น ภาพเคลื่อนไหวที่แนบกับองค์ประกอบจะทำงานบนไทม์ไลน์ของเอกสาร เวลาเริ่มต้นของหน้าแรกจะเริ่มที่ 0 เมื่อโหลดหน้าเว็บ และเริ่มเลื่อนไปข้างหน้าเมื่อเวลาของนาฬิกาเคลื่อนที่ไปเรื่อยๆ นี่เป็นไทม์ไลน์ภาพเคลื่อนไหวเริ่มต้นและก่อนหน้านี้เป็นเพียงไทม์ไลน์ภาพเคลื่อนไหวเดียวที่คุณเข้าถึงได้

ข้อกำหนดภาพเคลื่อนไหวจากการเลื่อนจะกำหนดไทม์ไลน์ประเภทใหม่ 2 ประเภทที่คุณใช้ได้ ดังนี้

  • ไทม์ไลน์ความคืบหน้าของการเลื่อน: ไทม์ไลน์ที่ลิงก์กับตำแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อนตามแกนที่เฉพาะเจาะจง
  • ดูไทม์ไลน์ความคืบหน้า: ไทม์ไลน์ที่ลิงก์กับตำแหน่งสัมพัทธ์ขององค์ประกอบหนึ่งๆ ภายในคอนเทนเนอร์การเลื่อน

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

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

อ่านภาพเคลื่อนไหวของไดรฟ์แบบเลื่อนเพื่อดูรายละเอียดทั้งหมดและตัวอย่างเพิ่มเติม

เฟรมที่มีการปิดกั้น

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

ข้อเสนอจำนวนมากของ Google มุ่งหวังที่จะตอบสนอง Use Case แบบข้ามเว็บไซต์โดยไม่ต้องใช้คุกกี้ของบุคคลที่สามหรือกลไกการติดตามอื่นๆ เช่น

เพื่อรักษาความเป็นส่วนตัว API เหล่านี้บางส่วนต้องใช้วิธีใหม่ในการฝังเนื้อหา โซลูชันนี้เรียกว่าเฟรมที่มีการปิดกั้น

เฟรมที่มีการปิดกั้นสามารถทำงานร่วมกับข้อเสนอ Privacy Sandbox อื่นๆ เพื่อแสดงเอกสารจากพาร์ติชันพื้นที่เก็บข้อมูลที่แตกต่างกันภายในหน้าเดียว

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

ในทำนองเดียวกัน ข้อมูลจากบุคคลที่หนึ่งในบริบทที่ฝังจะไม่สามารถแชร์กับเฟรมที่มีการปิดกั้น

ฟีเจอร์ iframe fencedframe
ฝังเนื้อหา ใช่ ใช่
เนื้อหาที่ฝังสามารถเข้าถึง DOM บริบทที่ฝังได้ ใช่ ไม่ได้
บริบทการฝังสามารถเข้าถึง DOM ของเนื้อหาที่ฝังได้ ใช่ ไม่ได้
แอตทริบิวต์ที่สังเกตได้ เช่น name ใช่ ไม่ได้
URL (http://example.com) ใช่ ได้ (ขึ้นอยู่กับ Use Case)
แหล่งที่มาแบบทึบแสงที่จัดการโดยเบราว์เซอร์ (urn:uuid) ไม่ได้ ใช่
การเข้าถึงข้อมูลข้ามเว็บไซต์ ไม่ได้ มี (ขึ้นอยู่กับ Use Case)

ตัวอย่างเช่น สมมติว่า news.example (บริบทการฝัง) ฝังโฆษณาจาก shoes.example ในเฟรมที่มีการปิดกั้น news.example ขโมยข้อมูลจากโฆษณา shoes.example ไม่ได้และ shoes.example จะดูข้อมูลจากบุคคลที่หนึ่งจาก news.example ไม่ได้

การเปรียบเทียบสถานะก่อนและหลังของการแบ่งพาร์ติชันพื้นที่เก็บข้อมูล

อ่านบทความเหล่านี้เพื่อดูเอกสารประกอบเกี่ยวกับ Fenced Frame, Protected Audience API, พื้นที่เก็บข้อมูลที่ใช้ร่วมกัน และอื่นๆ

Topics API

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

Topics API ช่วยให้เบราว์เซอร์แชร์ข้อมูลกับบุคคลที่สามเกี่ยวกับความสนใจของผู้ใช้ไปพร้อมกับรักษาความเป็นส่วนตัว

Topics API ช่วยให้ใช้การโฆษณาตามความสนใจ (IBA) ได้โดยไม่ต้องติดตามเว็บไซต์ที่ผู้ใช้เข้าชม เบราว์เซอร์จะสังเกตและบันทึกหัวข้อที่ผู้ใช้สนใจ ตามกิจกรรมการท่องเว็บ ข้อมูลนี้จะได้รับการบันทึกไว้ในอุปกรณ์ของผู้ใช้

ตัวอย่างเช่น API อาจแนะนำหัวข้อ "Fiber & Textile Arts" สำหรับผู้ใช้ที่เข้าชมเว็บไซต์ knitting.example

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

อ่านรายละเอียดทั้งหมดเกี่ยวกับการจัดหมวดหมู่หัวข้อและการใช้ Topics API ได้ที่ภาพรวมของ Privacy Sandbox

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

แน่นอนว่ายังมีอีกมากมาย

  • ขนาดสูงสุดของ WebAssembly.Module ในเทรดหลักเพิ่มขึ้นเป็น 8 เมกะไบต์
  • ขณะนี้พร็อพเพอร์ตี้ CSS display ยอมรับคีย์เวิร์ดหลายรายการเป็นค่า นอกเหนือจากคีย์เวิร์ดเดิมที่กำหนดไว้
  • มีช่วงทดลองใช้จากต้นทางสำหรับ Compute Pressure API ซึ่งให้ข้อมูลระดับสูงเกี่ยวกับสถานะปัจจุบันของฮาร์ดแวร์อุปกรณ์

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

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

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

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

ขอขอบคุณ Adriana Jara และทันทีที่เปิดตัว Chrome 116 เราจะแจ้งให้คุณทราบว่ามีอะไรใหม่ใน Chrome