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

Pete LePage

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

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

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

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

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

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

การสแนปการเลื่อน CSS

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

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

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'>

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

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

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

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

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
• สายนาฬิกา Chromercise
• ปืนใหญ่มันฝรั่ง
• สัตว์ประหลาดพีท
• ไดโนเสาร์ไม้จาก CDS 2017

ขอขอบคุณเป็นพิเศษสำหรับทุกคนที่ช่วยกันทำให้ "New in Chrome" ทั้ง 28 ตอนเกิดขึ้นแล้ว ทุกคนเหล่านี้ยอดเยี่ยมมาก!

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!