ใหม่ใน Chrome 112

Adriana Jara

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

ฉันชื่อ 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
  • ตอนนี้โปรแกรมอัดเสียงในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สามารถบันทึกด้วยตัวเลือก Pierce ได้แล้ว

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

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

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

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

ผมชื่อ Adriana Jara ทันทีที่เปิดตัว Chrome 113 ผมจะไปที่ บอกให้ทราบว่ามีอะไรใหม่ใน Chrome