ใหม่ใน Chrome 99

Pete LePage

สิ่งที่จำเป็นต้องทราบมีดังนี้

• การนับถอยหลังสู่ เวอร์ชัน 100 ของ Chrome และ Firefox เหลือเวลาอีกเพียงไม่กี่สัปดาห์
• เลเยอร์ CSS แบบแคสเคดช่วยให้คุณควบคุม CSS ได้มากขึ้น และช่วยป้องกันความขัดแย้งเฉพาะสไตล์
• เมธอด showPicker() ช่วยให้คุณแสดงเครื่องมือเลือกเบราว์เซอร์สำหรับองค์ประกอบ <input> อย่างเช่น date, color และ datalist โดยใช้โปรแกรมได้
• และยังมีอีกมากมาย

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

Chrome 100 และ Firefox 100

Chrome เวอร์ชัน 100 จะพร้อมให้บริการในช่วงปลายเดือนมีนาคม (2022) และ Firefox เวอร์ชัน 100 จะพร้อมให้บริการไม่นานหลังจากนั้นในช่วงต้นเดือนพฤษภาคม โดยทั้ง 2 เวอร์ชันนี้เป็นเวอร์ชันหลักที่มีความสำคัญและจะเปลี่ยนเป็นตัวเลข 3 หลัก แต่หากโค้ดของคุณต้องการตัวเลข 2 หลัก ตัวเลขเวอร์ชันใหม่อาจทำให้เกิดปัญหา

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

ใน Chrome แฟล็ก #force-major-version-to-100 จะเปลี่ยนหมายเลขเวอร์ชันปัจจุบันเป็น 100

และเปิดใช้ตัวเลือก "สตริง User Agent ของ Firefox 100" ในเมนูการตั้งค่าของ Firefox Nightly คุณควรทดสอบเว็บไซต์เพื่อให้แน่ใจว่าทุกอย่างทำงานตามที่คาดไว้

ดูรายละเอียดทั้งหมดได้ที่Chrome และ Firefox กำลังจะเข้าสู่เวอร์ชันหลัก 100 ในเร็วๆ นี้

เลเยอร์ CSS Cascade

การสนับสนุนเลเยอร์ CSS Cascade และกฎ @layer ของ CSS จะพร้อมใช้งานใน Chrome 99 ซึ่งช่วยให้ควบคุมไฟล์ CSS ได้ชัดเจนยิ่งขึ้นเพื่อป้องกันไม่ให้เกิดความทับซ้อนกันของสไตล์ ซึ่งจะเป็นประโยชน์อย่างยิ่งสำหรับโค้ดเบสขนาดใหญ่ ระบบการออกแบบ และเมื่อต้องจัดการสไตล์ของบุคคลที่สามในแอปพลิเคชัน

ซึ่งจะเพิ่มเลเยอร์ใหม่ในลำดับชั้น CSS เมื่อใช้สไตล์แบบเลเยอร์ ความสำคัญของเลเยอร์จะเหนือกว่าความเฉพาะเจาะจงของตัวเลือกเสมอ

หากคุณพยายามจัดสไตล์ลิงก์ภายใน .card ภายใน .post คุณจะเห็นว่ามีการใช้ตัวเลือกที่เฉพาะเจาะจงมากขึ้น การใช้กฎ @layer ช่วยให้คุณระบุสไตล์ของแต่ละรายการได้ชัดเจนยิ่งขึ้น และตรวจสอบว่าสไตล์ลิงก์ในการ์ดลบล้างสไตล์ลิงก์ในโพสต์

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

เนื่องจากลําดับความสำคัญของการแสดงผลตามลำดับขั้น สไตล์ที่วางซ้อนกันจะสร้างระนาบใหม่แบบเรียงซ้อน

เลเยอร์ตามลำดับชั้นที่ใช้กฎ @layer ของ CSS จะใช้งานได้ใน Chrome 99, Firefox 97 และ Safari 15.4 เบต้า ดูข้อมูลเพิ่มเติมได้ในบทความเลเยอร์ Cascade กำลังจะพร้อมใช้งานในเบราว์เซอร์ของคุณ

showPicker() สำหรับองค์ประกอบอินพุต

เป็นเวลานานแล้วที่เราต้องใช้ไลบรารีวิดเจ็ตหรือแฮ็กที่กำหนดเองเพื่อแสดงเครื่องมือเลือกวันที่ มีเมธอด showPicker() ใหม่ใน HTML InputElements ซึ่งเป็นวิธีมาตรฐานในการแสดงเครื่องมือเลือกเบราว์เซอร์ ไม่เพียงสำหรับ date เท่านั้น แต่ยังรวมถึงองค์ประกอบ time, color และ <input> อื่นๆ ที่มีเครื่องมือเลือกด้วย

เครื่องมือเลือกวันที่ของเบราว์เซอร์ใน Chrome เดสก์ท็อป, Chrome บนอุปกรณ์เคลื่อนที่, Safari เดสก์ท็อป, Safari บนอุปกรณ์เคลื่อนที่ และ Firefox เดสก์ท็อป (กรกฎาคม 2021)

หากต้องการใช้ ให้เรียก 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 (99)
• การเลิกใช้งานและการนำออกใน Chrome 99
• การอัปเดต ChromeStatus.com สำหรับ Chrome 99
• รายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium
• ปฏิทินการเผยแพร่ของ Chrome

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

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

ผมชื่อ Pete LePage และเราจะคอยแจ้งให้คุณทราบเกี่ยวกับฟีเจอร์ใหม่ๆ ใน Chrome ทันทีที่ Chrome 100 เปิดตัว