ใหม่ใน Chrome 105

Pete LePage

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

ฉันชื่อ 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()

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

ตัวอย่างเช่น 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 น้ำยาฆ่าเชื้อ

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

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

หากต้องการใช้งาน ให้สร้างอินสแตนซ์ใหม่ของ 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 และ Web SQL ในบริบทที่ไม่ปลอดภัย

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

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

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

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

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

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

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

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

ผมชื่อ Pete LePage และทันทีที่ Chrome 106 เปิดตัว เราอยู่ที่นี่ บอกให้ทราบว่ามีอะไรใหม่ใน Chrome