ใหม่ใน Chrome 115

Adriana Jara

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

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

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

ภาพเคลื่อนไหวที่ทำงานด้วยการเลื่อน

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

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

ตัวบ่งชี้การอ่านที่ด้านบนของเอกสาร ซึ่งเลื่อนตามการเลื่อน

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

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

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