ใหม่ใน Chrome 112

Adriana Jara

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

  • ตอนนี้ CSS รองรับกฎการฝังแล้ว
  • อัปเดตอัลกอริทึมในการตั้งค่าโฟกัสเริ่มต้นในองค์ประกอบ <dialog>
  • ระบบจะข้ามตัวแฮนเดิล fetch() ใน Service Worker ที่ไม่มีการดำเนินการตั้งแต่นี้เป็นต้นไปเพื่อให้ไปยังส่วนต่างๆ ได้เร็วขึ้น
  • และยังมีอีกมากมาย

ฉันชื่อ Adriana Jara มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 112

การสนับสนุน CSS สำหรับการฝัง

ฟีเจอร์หนึ่งในเครื่องมือเตรียม CSS ที่เราชื่นชอบตอนนี้ได้รวมอยู่ในภาษาแล้ว ซึ่งก็คือกฎสไตล์ที่ฝังอยู่

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

ก่อน
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

หลังจากการฝังแล้ว คุณจะใช้ตัวเลือกต่อและจัดกลุ่มกฎสไตล์ที่เกี่ยวข้องไว้ด้วยกันได้

หลัง
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

การฝังช่วยให้นักพัฒนาซอฟต์แวร์ไม่ต้องใช้ตัวเลือกซ้ำๆ และวางกฎสไตล์สำหรับองค์ประกอบที่เกี่ยวข้องไว้ด้วยกัน และยังช่วยให้สไตล์ตรงกับ HTML ที่กําหนดเป้าหมายได้ด้วย

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

การฝังจะช่วยในเรื่องต่อไปนี้

  • การจัดระเบียบ
  • การลดขนาดไฟล์
  • การปรับรูปแบบ

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

การอัปเดตอัลกอริทึมสำหรับโฟกัสเริ่มต้นของ <dialog>

เอลิเมนต์ <dialog> ของ HTML เป็นวิธีที่เป็นมาตรฐานในการนำเสนอกล่องโต้ตอบหรือคอมโพเนนต์แบบอินเทอร์แอกทีฟอื่นๆ เช่น การแจ้งเตือนที่ปิดได้หรือหน้าต่างย่อย ซึ่งจำเป็นต้องแสดงอยู่เหนือเนื้อหาอื่นๆ ทั้งหมดในหน้าเว็บ

องค์ประกอบ HTML นี้เป็นวิธีที่แนะนำในการสร้างเนื้อหาดังกล่าวเนื่องจากฟีเจอร์ต่างๆ สร้างขึ้นเพื่อให้ใช้งานและเข้าถึงได้ง่ายยิ่งขึ้นและสอดคล้องกัน

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

จากนี้ไป:

ขั้นตอนการโฟกัสกล่องโต้ตอบจะดูองค์ประกอบที่โฟกัสได้ด้วยแป้นพิมพ์แทนองค์ประกอบที่โฟกัสได้ ตัวองค์ประกอบ <dialog> เองก็จะได้รับโฟกัสหากมีการตั้งค่าแอตทริบิวต์โฟกัสอัตโนมัติ

ออบเจ็กต์ <dialog> จะได้รับโฟกัสเป็นทางเลือกแทนที่โฟกัสจะ "รีเซ็ต" ไปยังองค์ประกอบ <body>

อ่านรายละเอียดเพิ่มเติมเกี่ยวกับองค์ประกอบ <dialog> ในเอกสารประกอบ

ข้ามตัวแฮนเดิลการดึงข้อมูลแบบไม่ดำเนินการของ Service Worker

ตั้งแต่ Chrome 112 เป็นต้นไป ระบบจะละเว้น Listener ของ Service Worker และการส่ง Listener จากเส้นทางสำคัญในการนำทาง หาก User Agent ระบุว่า Listener การดึงข้อมูลของโปรแกรมทำงานทั้งหมดไม่มีการใช้งาน

ฟีเจอร์นี้ช่วยให้ไปยังส่วนต่างๆ ของหน้าเว็บเหล่านั้นได้เร็วขึ้น

การมีเครื่องจัดการการดึงข้อมูลเป็นหนึ่งในข้อกำหนดของ PWA สำหรับเว็บแอปที่จะติดตั้งได้ เราสงสัยว่านี่อาจเป็นสาเหตุที่บางเว็บไซต์มีตัวแฮนเดิลการดึงข้อมูลว่าง อย่างไรก็ตาม การเริ่มต้นใช้งาน Service Worker และสั่ง Listener ที่ไม่มีการดำเนินการกลับเป็นเพียงภาระค่าใช้จ่ายเท่านั้น โดยไม่ให้ประโยชน์ใดๆ ที่สามารถนำไปใช้ร่วมกับโปรแกรมทำงานของบริการที่เหมาะสมได้ เช่น การแคชหรือความสามารถในการทำงานแบบออฟไลน์ ดังนั้นตอนนี้ Chrome จึงข้ามหน้าดังกล่าวเพื่อปรับปรุงการนําทาง

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

คำเตือนในเครื่องมือสำหรับนักพัฒนาเว็บสำหรับตัวแฮนเดิลการดึงข้อมูล Service Worker ที่ว่างเปล่า

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

แถมยังมีอีกมากมาย

  • เลิกใช้งานตัวตั้งค่าสำหรับ document.domain แล้ว
  • มีช่วงทดลองใช้ต้นทางสำหรับการเลิกใช้งาน X-Requested-With header ใน WebView
  • ตอนนี้โปรแกรมอัดในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สามารถบันทึกด้วยตัวเลือกเจาะได้แล้ว

อ่านเพิ่มเติม

ข้อมูลนี้เป็นเพียงไฮไลต์สำคัญบางส่วนเท่านั้น ดูการเปลี่ยนแปลงเพิ่มเติมใน Chrome 112 ได้ที่ลิงก์ด้านล่าง

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

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

ฉันชื่อ Adriana Jara และพร้อมที่จะแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 113 เปิดตัว