เปิดตัว Chrome ครั้งแรกมา 10 ปีแล้ว จากตอนนั้นมีการเปลี่ยนแปลงมากมาย แต่เป้าหมายในการสร้างรากฐานที่มั่นคงสำหรับเว็บแอปพลิเคชันที่ทันสมัย ยังไม่บรรลุเป้าหมาย
ใน Chrome 69 เราได้เพิ่มการสนับสนุนสำหรับ
- CSS Scroll Snap ช่วยให้คุณสามารถสร้างประสบการณ์การเลื่อนอย่างราบรื่น
- หน้าจอรอยบากช่วยให้คุณใช้พื้นที่ของหน้าจอได้เต็ม ซึ่งรวมถึงพื้นที่ด้านหลังรอยบากหน้าจอ ซึ่งบางครั้งเรียกว่ารอยบาก
- Web Locks API ช่วยให้คุณได้รับล็อกแบบไม่พร้อมกัน ถือไว้ขณะทำงาน แล้วปล่อย
นอกจากนี้ยังมีอีกมากมาย
ฉันชื่อ Pete LePage มาเจาะลึกและดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 69 กัน
หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด โปรดดูรายการการเปลี่ยนแปลงที่เก็บแหล่งที่มา Chromium
สแนปการเลื่อน 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'>
จากนั้นคุณจะใช้ safe-area-inset-*
ตัวแปรสภาพแวดล้อม CSS เพื่อจัดวางเนื้อหาได้
.content {
padding: 16px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
ในบล็อก WebKit มีโพสต์ที่น่าสนใจเกี่ยวกับการออกแบบเว็บไซต์สำหรับ iPhone X หรือดูรายละเอียดเพิ่มเติมในวิดีโออธิบาย
API ของ Web Locks
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 Lock ที่ยอดเยี่ยมและมีคำอธิบายที่ละเอียดยิ่งขึ้นและมีตัวอย่างมากมาย หรือเจาะลึกและดูspec
และอีกมากมาย
ทั้งหมดนี้เป็นการเปลี่ยนแปลงเพียงบางส่วนใน Chrome 69 สำหรับนักพัฒนาซอฟต์แวร์ และแน่นอนว่ายังมีสิ่งใหม่ๆ อีกมากมาย
- จากข้อกำหนด CSS4 ตอนนี้คุณสามารถสร้างการเปลี่ยนสีรอบๆ วงกลมโดยใช้การไล่ระดับสีแบบกรวย
Lea Verou มี โพลีฟิลล์
conic-gradient()ของ CSS ที่คุณสามารถใช้ได้ และหน้าเว็บมีตัวอย่างเจ๋งๆ มากมายที่ชุมชนส่งเข้ามา - มีวิธี
toggleAttribute()ใหม่ในองค์ประกอบที่สลับการมีอยู่ของแอตทริบิวต์ ซึ่งคล้ายกับclassList.toggle() - อาร์เรย์ JavaScript กำลังมีเมธอดใหม่ 2 วิธี ได้แก่
flat()และflatMap()โดยจะแสดงผลอาร์เรย์ใหม่ที่มีเอลิเมนต์อาร์เรย์ย่อยทั้งหมดปัดเข้าไป - และ
OffscreenCanvasจะย้ายงานจากเทรดหลักไปยังผู้ปฏิบัติงาน ซึ่งจะช่วยลดจุดคอขวดด้านประสิทธิภาพ
ไข่อีสเตอร์
คุณพบไข่อีสเตอร์ทั้งหมดในวิดีโอไหม
- หนังสือการ์ตูน Chrome
- สาย Chromercise
- ปืนใหญ่มันฝรั่ง
- Pete Monster
- ไดโนเสาร์ไม้จาก 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!