ใหม่ใน Chrome 114

Adriana Jara

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

  • CSS text-wrap: balance พร้อมให้บริการเพื่อปรับปรุงเลย์เอาต์ข้อความ
  • คุกกี้ที่แบ่งพาร์ติชันตามเว็บไซต์ระดับบนสุด (CHIPS) จะอยู่ที่นี่
  • Popover ได้ง่ายกว่าที่เคยด้วย Popover API
  • และยังมีอื่นๆ อีกมากมาย

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

text-wrap:balance.

ใช้ text-wrap: balance เพื่อปรับปรุงเลย์เอาต์ข้อความ ภาพเคลื่อนไหวด้านล่างแสดงความแตกต่างที่คุณสามารถสร้างได้จากบรรทัดเดียวนี้

ลองใช้เดโม

ในฐานะนักพัฒนาซอฟต์แวร์ คุณจะไม่ทราบขนาดสุดท้าย ขนาดแบบอักษร หรือแม้กระทั่งภาษาของข้อความ ตัวแปรทั้งหมดจำเป็นสำหรับการจัดการการตัดข้อความอย่างมีประสิทธิภาพ เนื่องจากเบราว์เซอร์รู้ปัจจัยทั้งหมด เมื่อใช้ text-wrap:balance คุณจะขอให้เบราว์เซอร์คิดหาวิธีแก้ปัญหาการตัดบรรทัดอย่างสมดุลที่ดีที่สุดได้

ตัวอย่าง 2 ตัวอย่างก่อนหน้านี้จะแสดงร่วมกัน โดยตัวอย่างหนึ่งจะระบุว่าไม่สมดุลและอีกตัวอย่างหนึ่งสมดุลกัน

บล็อคข้อความที่สมดุลดูสบายตาของผู้อ่านมากกว่า ดึงดูดความสนใจได้ดีขึ้นและโดยรวมอ่านง่ายกว่า

การสร้างสมดุลระหว่างบรรทัดแรกและควรเป็นกรณีการใช้งานหลักสำหรับ text-wrap: balance ข้อความจะมีต้นทุนด้านประสิทธิภาพในการสร้างสมดุล ดังนั้นหากต้องการลดต้นทุนจะใช้ข้อความได้เพียงไม่เกิน 4 บรรทัด

โปรดอ่านบทความนี้ซึ่งมีตัวอย่างและรายละเอียดเพิ่มเติมเพื่อปรับปรุงเลย์เอาต์ข้อความ

ชิป: คุกกี้ที่มีสถานะแบ่งพาร์ติชันเป็นอิสระ

CHIPS (คุกกี้ที่มีสถานะพาร์ติชันอิสระ) ช่วยให้เลือกใช้คุกกี้ของบุคคลที่สามที่แบ่งพาร์ติชันโดยเว็บไซต์ระดับบนสุดโดยใช้แอตทริบิวต์คุกกี้ใหม่ Partitioned

ก่อน CHIPS เมื่อผู้ใช้เข้าชมเว็บไซต์ A เว็บไซต์ที่ฝัง C จะตั้งค่าคุกกี้ในเครื่องของผู้ใช้ จากนั้น หากผู้ใช้เข้าชมเว็บไซต์ B ซึ่งฝังเว็บไซต์ C ไว้ด้วย เว็บไซต์ C จะเข้าถึงคุกกี้เดียวกับที่ตั้งค่าไว้ในเว็บไซต์ A ได้ ซึ่งทำให้เว็บไซต์ ค สามารถรวบรวมกิจกรรมการท่องเว็บของผู้ใช้ในเว็บไซต์ ก และ ข และทุกเว็บไซต์ที่ฝังอยู่ในเว็บไซต์ดังกล่าวได้

แผนภาพที่แสดงเว็บไซต์และพื้นที่เก็บข้อมูลที่มีคุกกี้ที่ไม่ได้แบ่งพาร์ติชัน

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

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

แผนภาพแสดงเว็บไซต์และพื้นที่เก็บข้อมูลที่มีการแบ่งพาร์ติชันพร้อมกับคุกกี้

เมื่อผู้ใช้เข้าชมเว็บไซต์ใหม่ ตัวอย่างเช่น เว็บไซต์ B เว็บไซต์ C จะไม่ได้รับคุกกี้ที่ตั้งค่าเมื่อ C ฝังอยู่ในเว็บไซต์ A

ดูรายละเอียดเพิ่มเติมเกี่ยวกับขั้นตอนในการเลิกใช้คุกกี้ของบุคคลที่สามได้ในบทความนี้

Popover API

Popover API ช่วยให้คุณสร้างองค์ประกอบอินเทอร์เฟซผู้ใช้ชั่วคราว (UI) ที่แสดงทับ UI ของเว็บแอปอื่นๆ ได้ง่ายขึ้น

ซึ่งรวมถึงองค์ประกอบที่โต้ตอบกับผู้ใช้ เช่น เมนูการทำงาน คำแนะนำองค์ประกอบแบบฟอร์ม เครื่องมือเลือกเนื้อหา และ UI การสอน

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

กรณีนี้คล้ายกับองค์ประกอบ <dialog> แต่มีความแตกต่างที่สําคัญหลายประการ เช่น ลักษณะการทํางานแบบปิดไฟ การจัดการการโต้ตอบกับปุ่มป็อปโอเวอร์ การรองรับเหตุการณ์ และการไม่มีโหมด "โมดัล"

ดูข้อมูลเพิ่มเติมได้ในบทความนี้

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

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

  • DevTools ให้คุณหยุดชั่วคราวและแก้ไขข้อบกพร่องของโค้ด C และ C++ ในแอป WebAssembly ที่มีการรองรับ DWARF
  • ตัวเลือก exclusionFilters ใน navigator.bluetooth.requestDevice() ช่วยให้นักพัฒนาเว็บยกเว้นอุปกรณ์บางเครื่องจากเครื่องมือเลือกเบราว์เซอร์ได้
  • มีช่วงทดลองใช้จากต้นทางสำหรับการเบลอพื้นหลัง

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

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

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

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

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