ฟีเจอร์ใหม่ใน Chrome 69

ผ่านมา 10 ปีแล้วนับตั้งแต่ที่ Chrome เปิดตัวครั้งแรก หลายสิ่งหลายอย่างเปลี่ยนแปลงไปนับตั้งแต่นั้น แต่เป้าหมายของเราในการสร้างรากฐานที่มั่นคงสำหรับเว็บแอปพลิเคชันที่ทันสมัยยังคงเดิม

ใน Chrome 69 เราได้เพิ่มการรองรับสิ่งต่อไปนี้

  • CSS Scroll Snap ช่วยให้คุณสร้างประสบการณ์การเลื่อนที่ราบรื่นและลื่นไหล
  • หน้าจอรอยบากช่วยให้คุณใช้พื้นที่บนหน้าจอได้เต็มพื้นที่ รวมถึงพื้นที่ด้านหลังรอยบากบนหน้าจอ (บางครั้งเรียกว่ารอยเว้า)
  • Web Locks API ช่วยให้คุณรับการล็อกแบบแอซิงโครนัส ถือไว้ขณะทำงาน แล้วปล่อย

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

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 69

หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด ดูรายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium

CSS Scroll Snap

ดูการสาธิต | แหล่งที่มา

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

สําหรับภาพสไลด์ ฉันจะเพิ่ม scroll-snap-type: x mandatory; ลงในคอนเทนเนอร์การเลื่อน และ scroll-snap-align: center; ลงในรูปภาพแต่ละรูป จากนั้นเมื่อผู้ใช้เลื่อนดูภาพสไลด์ แต่ละรูปภาพจะเลื่อนไปยังตำแหน่งที่เหมาะสมอย่างราบรื่น


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

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

หน้าจอรอยบาก (หรือที่เรียกว่ารอยบาก)

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

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

แต่หากคุณต้องการใช้พื้นที่นั้น

ตอนนี้คุณทําได้โดยใช้ตัวแปรสภาพแวดล้อม CSS และแท็กเมตา viewport-fit เช่น หากต้องการบอกให้เบราว์เซอร์ขยายไปยังพื้นที่ส่วนตัดของการแสดงผล ให้ตั้งค่าพร็อพเพอร์ตี้ viewport-fit ในแท็กเมตา viewport เป็น cover

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

จากนั้นคุณสามารถใช้safe-area-inset-* ตัวแปรสภาพแวดล้อม CSS เพื่อจัดวางเนื้อหา

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

เรามีโพสต์ที่ยอดเยี่ยมในบล็อก WebKit เกี่ยวกับการออกแบบเว็บไซต์สำหรับ iPhone X หรือดูรายละเอียดเพิ่มเติมได้ในคำอธิบาย

Web Locks API

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

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

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

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

MDN มีข้อมูลเบื้องต้นเกี่ยวกับล็อกเว็บที่ยอดเยี่ยม รวมถึงคําอธิบายเชิงลึกเพิ่มเติมและตัวอย่างมากมาย หรือจะเจาะลึกและดูข้อมูลจำเพาะก็ได้

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

การเปลี่ยนแปลงเหล่านี้เป็นเพียงส่วนหนึ่งของการเปลี่ยนแปลงใน Chrome 69 สําหรับนักพัฒนาซอฟต์แวร์เท่านั้น ยังมีการเปลี่ยนแปลงอีกมากมาย

การไล่ระดับสีแบบกรวย

  • จากข้อกำหนด CSS4 ตอนนี้คุณสร้างการเปลี่ยนสีรอบเส้นรอบวงของวงกลมได้โดยใช้การไล่สีรูปกรวย Lea Verou มี CSS conic-gradient() polyfill ที่คุณใช้ได้ และหน้าดังกล่าวยังมีตัวอย่างเจ๋งๆ มากมายที่ชุมชนส่งเข้ามา
  • มีวิธีการใหม่ toggleAttribute() ในองค์ประกอบที่เปิด/ปิดการมีอยู่ของแอตทริบิวต์ ซึ่งคล้ายกับ classList.toggle()
  • อาร์เรย์ JavaScript จะมีเมธอดใหม่ 2 รายการ ได้แก่ flat() และ flatMap() โดยจะแสดงผลอาร์เรย์ใหม่ที่มีองค์ประกอบอาร์เรย์ย่อยทั้งหมดรวมอยู่ด้วย
  • และ OffscreenCanvas จะย้ายงานออกจากเธรดหลักไปยังผู้ปฏิบัติงาน ซึ่งช่วยขจัดปัญหาคอขวดด้านประสิทธิภาพ

ไข่อีสเตอร์

คุณพบไข่อีสเตอร์ทั้งหมดในวิดีโอไหม

ขอขอบคุณอย่างยิ่งทุกคนที่ช่วยให้ตอนใหม่ของ "มีอะไรใหม่ใน Chrome" ออกอากาศได้ ทุกคนเหล่านี้ยอดเยี่ยมมาก

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers
Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja
Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer
Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

หากอยากเห็นว่า "มีอะไรใหม่ใน Chrome" พัฒนาไปมากแค่ไหนตั้งแต่ตอนแรก มาดูวิดีโอพัฒนาการ 30 วินาทีสนุกๆ นี้กัน ซึ่งจะพาคุณย้อนดูประวัติของเราตั้งแต่วิดีโอแรกจนถึงปัจจุบัน

และขอขอบคุณคุณที่รับชมและแสดงความคิดเห็น เราอ่านทุกความคิดเห็นและนำคำแนะนำของคุณไปพิจารณา วิดีโอเหล่านี้ดีขึ้นได้ก็เพราะคุณ

ขอขอบคุณที่รับชม

มีอะไรใหม่ใน Chrome Bloopers

เรารวบรวมฟุตเทจเบื้องหลังสนุกๆ มาให้คุณดู หลังจากดูวิดีโอแล้ว เราได้รับข้อมูลบางอย่างดังนี้

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

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

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

ผมชื่อ Pete LePage และทันทีที่ Chrome 70 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome