ใหม่ใน Chrome 105

Pete LePage

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

  • คำค้นหาคอนเทนเนอร์และ :has() เป็นการจับคู่ที่ตรงกันในสวรรค์ที่ตอบสนองตามอุปกรณ์
  • Sanitizer API ใหม่มีหน่วยประมวลผลที่มีประสิทธิภาพสำหรับสตริงที่กำหนดเองเพื่อช่วยลดช่องโหว่ในการเขียนสคริปต์ข้ามเว็บไซต์
  • เรากําลังดำเนินการเพื่อเลิกใช้งาน SQL ในเว็บ
  • นอกจากนี้ยังมีอื่นๆ อีกมากมาย

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

คำค้นหาคอนเทนเนอร์และพร็อพเพอร์ตี้ CSS :has()

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

ซึ่งคล้ายกับคำค้นหา @media แต่จะประเมินเทียบกับขนาดของคอนเทนเนอร์แทนขนาดของวิวพอร์ต

คำค้นหาคอนเทนเนอร์เทียบกับคำค้นหาสื่อ

หากต้องการใช้การค้นหาคอนเทนเนอร์ คุณต้องตั้งค่าการกักเก็บในองค์ประกอบระดับบน เช่น คุณอาจมีการ์ดที่มีรูปภาพและข้อความ

การ์ดแบบ 2 คอลัมน์เดี่ยว

หากต้องการสร้างการค้นหาคอนเทนเนอร์ ให้ตั้งค่า container-type ในคอนเทนเนอร์การ์ด การตั้งค่า container-type เป็น inline-size จะค้นหาขนาด inline-direction ของระดับบน

.card-container {
  container-type: inline-size;
}

ตอนนี้เราสามารถใช้คอนเทนเนอร์ดังกล่าวเพื่อนำรูปแบบไปใช้กับรายการย่อยต่างๆ โดยใช้ @container

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

ในกรณีนี้ เมื่อคอนเทนเนอร์มีขนาดน้อยกว่า 400 พิกเซล ระบบจะเปลี่ยนไปใช้เลย์เอาต์คอลัมน์เดียว

คลาสเทียมของ CSS :has()

ซึ่งเราสามารถยกระดับด้วยคลาส Pseudo-class :has() ของ CSS ได้ ซึ่งช่วยให้คุณตรวจสอบได้ว่าองค์ประกอบหลักมีองค์ประกอบย่อยที่มีพารามิเตอร์ที่เจาะจงหรือไม่

ตัวอย่างเช่น p:has(span) จะระบุตัวเลือกย่อหน้าที่มีสแปนอยู่ด้านใน คุณสามารถใช้ส่วนนี้เพื่อจัดสไตล์ของย่อหน้าหลัก หรืออะไรก็ตามที่อยู่ในนั้น หรือคุณสามารถใช้ figure:has(figcaption) เพื่อจัดรูปแบบองค์ประกอบ รูปที่มีคำบรรยายแทนเสียง

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

อ่านบทความของ Una @container และ :has(): 2 เป็น API ใหม่ที่ปรับเปลี่ยนตามอุปกรณ์ที่ทรงพลัง สำหรับคำอธิบายโดยละเอียดเพิ่มเติมและการสาธิตสนุกๆ

API ของ Sanitizer

เว็บแอปส่วนใหญ่มักจัดการกับสตริงที่ไม่น่าเชื่อถือ แต่การแสดงผลเนื้อหาอย่างปลอดภัยนั้นอาจเป็นเรื่องยาก หากไม่ได้ได้รับการดูแลอย่างเพียงพอ อาจทำให้เกิดช่องโหว่ ในการเขียนสคริปต์ข้ามเว็บไซต์โดยไม่ตั้งใจได้

มีห้องสมุดอย่าง DomPurify ที่ช่วยได้ แต่เพิ่มภาระการบำรุงรักษาเล็กน้อย HTML Sanitizer API ช่วยลดช่องโหว่ของการเขียนสคริปต์ข้ามไซต์ด้วยการสร้างการทำความสะอาดบนแพลตฟอร์ม

หากต้องการใช้งาน ให้สร้างอินสแตนซ์ใหม่ของ Sanitizer จากนั้นเรียกใช้ setHTML() บนองค์ประกอบที่คุณต้องการแทรกเนื้อหาที่ทำความสะอาดแล้ว

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

Sanitizer API ออกแบบมาให้ปลอดภัยโดยค่าเริ่มต้นและสามารถปรับแต่งได้ ช่วยให้คุณระบุตัวเลือกการกำหนดค่าต่างๆ ได้ เช่น ลดองค์ประกอบบางอย่างหรืออนุญาตองค์ประกอบอื่นๆ

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

ดูรายละเอียดเพิ่มเติมได้ที่การควบคุม Safe DOM ด้วย Sanitizer API

การเลิกใช้งาน Web SQL สำหรับบริบทที่ไม่ปลอดภัย

เมื่อนานมาแล้ว เราได้ประกาศแผนการเลิกใช้งาน Web SQL ตั้งแต่ Chrome 105 เป็นต้นไป เราจะเลิกใช้งาน SQL ในเว็บในบริบทที่ไม่ปลอดภัย

หากคุณใช้ Web SQL ในบริบทที่ไม่ปลอดภัย คุณควรย้ายข้อมูลไปยัง IndexDB หรือคอนเทนเนอร์พื้นที่เก็บข้อมูลในเครื่องอื่นโดยเร็วที่สุด

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

แน่นอน ยังมีคำถามอีกมากมาย

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

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

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

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

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

ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 106 เราก็จะแจ้งให้คุณทราบถึงสิ่งใหม่ๆ ใน Chrome!