สิ่งที่จำเป็นต้องทราบมีดังนี้
- การนับถอยหลังสู่เวอร์ชัน 100 ของ Chrome และ Firefox เหลืออีกเพียงไม่กี่สัปดาห์
- เลเยอร์การเรียงซ้อนของ CSS ช่วยให้คุณควบคุม CSS ได้มากขึ้นและช่วยป้องกันความขัดแย้งของสไตล์ที่เจาะจง
- เมธอด
showPicker()ช่วยให้คุณแสดงเครื่องมือเลือกเบราว์เซอร์สำหรับองค์ประกอบ<input>ได้แบบเป็นโปรแกรม เช่นdate,colorและdatalist - นอกจากนี้ยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Pete LePage มาเจาะลึกกันเลยและดูว่า มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 99
Chrome 100 และ Firefox 100
Chrome 100 จะจัดส่งในช่วงปลายเดือนมีนาคม (2022) และ Firefox 100 จะจัดส่งในช่วงต้นเดือนพฤษภาคมไปไม่นาน ซึ่งทั้งคู่ถือเป็นเป้าหมายที่สำคัญของหมายเลขเวอร์ชันและทบยอดไปเป็นตัวเลข 3 หลัก แต่หากรหัสคาดไว้ว่าจะเป็นตัวเลข 2 หลัก หมายเลขเวอร์ชันใหม่ก็อาจทำให้เกิดปัญหาได้
คุณควรตรวจสอบโค้ดที่ตรวจสอบหมายเลขเวอร์ชันหรือแยกวิเคราะห์สตริง User Agent เพื่อให้แน่ใจว่าไม่มีปัญหา
ใน Chrome ธง #force-major-version-to-100 จะเปลี่ยนหมายเลขเวอร์ชันปัจจุบันเป็น 100
และในเมนูการตั้งค่าของ Firefox Nightly คุณสามารถเปิดใช้ ตัวเลือก "Firefox 100 User-Agent String" คุณควรทดสอบเว็บไซต์เพื่อให้แน่ใจว่าทุกอย่างทำงานตามที่คาดไว้
ดูรายละเอียดทั้งหมดได้ที่ Chrome และ Firefox เร็วๆ นี้เพื่อเข้าถึงเวอร์ชันหลัก 100
เลเยอร์การเรียงซ้อน CSS
การรองรับเลเยอร์การเรียงซ้อน CSS และกฎ CSS @layer อยู่ใน Chrome 99 ซึ่งช่วยให้ควบคุมไฟล์ CSS ได้ชัดเจนยิ่งขึ้นเพื่อป้องกันความขัดแย้งของสไตล์ที่เจาะจง วิธีนี้เป็นประโยชน์อย่างยิ่งสำหรับฐานโค้ดขนาดใหญ่
ระบบการออกแบบ และการจัดการรูปแบบของบุคคลที่สามในแอปพลิเคชัน
ซึ่งจะแนะนำเลเยอร์ใหม่ให้กับ cascade ของ CSS รูปแบบเลเยอร์ช่วยให้ เลเยอร์สำคัญเหนือกว่าความจำเพาะของตัวเลือกเสมอ
หากพยายามจัดรูปแบบลิงก์ ภายใน .card ภายใน .post คุณจะพบว่าระบบจะใช้ตัวเลือกที่เจาะจงมากขึ้น เมื่อใช้กฎ @layer คุณจะระบุสไตล์ที่เจาะจงของรูปแบบแต่ละรายการได้ชัดเจนขึ้น และตรวจสอบว่ารูปแบบลิงก์ในการ์ดลบล้างรูปแบบลิงก์ในโพสต์
@layer base {
a {
font-weight: 800;
color: red;
}
.link {
color: blue;
}
}
เนื่องจากมีลำดับความสำคัญแบบเรียงซ้อน รูปแบบเลเยอร์จะสร้าง ระนาบแบบ Cascade ใหม่
การเรียงซ้อนเลเยอร์โดยใช้กฎ CSS @layer ใช้ได้ใน Chrome 99, Firefox 97 และ Safari 15.4 เบต้า ดูข้อมูลเพิ่มเติมได้ที่เลเยอร์ Cascade จะพร้อมใช้งานในเบราว์เซอร์ของคุณ
showChooseer() สำหรับองค์ประกอบอินพุต
เป็นเวลานานแล้ว เราต้องพึ่งพาไลบรารีวิดเจ็ตที่กำหนดเองหรือการแฮ็กเพื่อแสดงเครื่องมือเลือกวันที่ มีเมธอด showPicker() ใหม่ใน HTML InputElements
ซึ่งเป็นวิธี Canonical ในการแสดงเครื่องมือเลือกเบราว์เซอร์ ไม่เพียงแต่สำหรับ date แต่ยังรวมถึงองค์ประกอบ time, color และองค์ประกอบ <input> อื่นๆ ที่มีเครื่องมือเลือกด้วย
หากต้องการใช้งาน ให้เรียกใช้ showPicker() ในองค์ประกอบ <input> ในตัวอย่างนี้ ฉันรวม
ไว้ในบล็อก try…catch ซึ่งทำให้ฉันสามารถระบุตัวเลือกสำรอง
หากเบราว์เซอร์ไม่สนับสนุน API หรือแสดงเครื่องมือเลือกไม่ได้ ดังนั้น เพื่อให้มั่นใจว่า
ผู้ใช้จะยังคงได้รับประสบการณ์ที่ดี
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// A date picker is shown.
} catch (error) {
// Use an external library when this fails.
}
});
ดูรายละเอียดทั้งหมดและ <input> ประเภทต่างๆ ทั้งหมดที่คุณใช้ showPicker() ได้ที่แสดงเครื่องมือเลือกเบราว์เซอร์สำหรับวันที่ เวลา สี และไฟล์
และอีกมากมาย
แน่นอน ยังมีคำถามอีกมากมาย
Canvas2D API ได้รับการอัปเดตแล้วโดยเพิ่มฟังก์ชันการทำงานใหม่ๆ ได้แก่
- กิจกรรมใหม่ 2 รายการสำหรับ
ContextLostและContextRestored - ตัวเลือก
willReadFrequently - รองรับตัวแก้ไขข้อความ CSS มากขึ้น
- และอื่นๆ อีกมากมาย
มีช่วงทดลองใช้จากต้นทางใหม่เพื่ออนุญาตให้ PWA ระบุสีอื่นในไฟล์ Manifest ของเว็บแอปสำหรับโหมดมืด
และตอนนี้ API การจดจำลายมือก็พร้อมให้ใช้งานแล้ว
อ่านเพิ่มเติม
ทั้งหมดนี้พูดถึงไฮไลต์สำคัญเพียงบางส่วน โปรดไปที่ลิงก์ด้านล่างสำหรับ การเปลี่ยนแปลงเพิ่มเติมใน Chrome 99
- มีอะไรใหม่ใน Chrome DevTools (99)
- การเลิกใช้งานและการนำ Chrome 99 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 99
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube ของ Chrome Developers และรับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 100 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!