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

Pete LePage

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

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

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

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

ผม Pete LePage มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 69 บ้าง

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

CSS Scroll Snap

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

หน้าจอรอยบาก

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

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

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

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

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

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

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

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

ไข่อีสเตอร์

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

ขอขอบคุณเป็นพิเศษสำหรับทุกคนที่ช่วยให้ตอนใหม่ใน 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

เราได้รวบรวมฉากหลุดเล็กๆ น้อยๆ มาให้คุณได้เพลิดเพลิน หลังจากดูแล้ว ฉันได้เรียนรู้สิ่งต่างๆ ดังนี้

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

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

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

ผม Pete LePage และทันทีที่ Chrome 70 เปิดตัว ผมจะมาบอกคุณว่ามีอะไรใหม่ใน Chrome