ใหม่ใน Chrome 112

Adriana Jara

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

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

การรองรับ CSS สำหรับการซ้อน

หนึ่งในฟีเจอร์ Preโปรเซสเซอร์ 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> ได้ในเอกสารประกอบ

กำลังข้ามตัวแฮนเดิลการดึงข้อมูลที่ไม่มีการดำเนินการสำหรับโปรแกรมทำงานของบริการ

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

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

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

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

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

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

แน่นอนว่ายังมีอีกมากมาย

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

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

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

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

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

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