ใหม่ใน 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 เป็นโครงการริเริ่มที่มีเป้าหมายในการสร้างเทคโนโลยีที่ทั้งปกป้องความเป็นส่วนตัวของผู้ใช้ทางออนไลน์ รวมถึงช่วยให้นักพัฒนาซอฟต์แวร์มีเครื่องมือไว้สร้างธุรกิจดิจิทัลที่ประสบความสำเร็จ

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

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

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

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

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

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

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

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

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

Topics API

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

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

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

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

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

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

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

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

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

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

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

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

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

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