สิ่งที่จำเป็นต้องทราบมีดังนี้
- คำค้นหาคอนเทนเนอร์และ :has() เป็นการจับคู่ที่ตรงกันในสวรรค์ที่ตอบสนองตามอุปกรณ์
- Sanitizer API ใหม่มีหน่วยประมวลผลที่มีประสิทธิภาพสำหรับสตริงที่กำหนดเองเพื่อช่วยลดช่องโหว่ในการเขียนสคริปต์ข้ามเว็บไซต์
- เรากําลังดำเนินการเพื่อเลิกใช้งาน SQL ในเว็บ
- นอกจากนี้ยังมีอื่นๆ อีกมากมาย
ฉันชื่อ Pete LePage มาเจาะลึกกันเลยและดูว่า มีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 105
คำค้นหาคอนเทนเนอร์และพร็อพเพอร์ตี้ CSS :has()
คำค้นหาคอนเทนเนอร์ ซึ่งเป็นหนึ่งในฟีเจอร์ที่มีการร้องขอมากที่สุดที่กำลังเข้าสู่ Chrome 105 ช่วยให้นักพัฒนาซอฟต์แวร์ค้นหาตัวเลือกระดับบนสุดสำหรับข้อมูลขนาดและการจัดรูปแบบได้ ซึ่งทำให้องค์ประกอบย่อยสามารถเป็นเจ้าของตรรกะการจัดรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์ได้ ไม่ว่าจะอยู่ที่ตำแหน่งใดในหน้าเว็บ
ซึ่งคล้ายกับคำค้นหา @media แต่จะประเมินเทียบกับขนาดของคอนเทนเนอร์แทนขนาดของวิวพอร์ต
![คำค้นหาคอนเทนเนอร์เทียบกับคำค้นหาสื่อ](https://developer.chrome.google.cn/static/blog/new-in-chrome-105/image/container-query-vs-media-f263d60a5e21b.png?authuser=5&hl=th)
หากต้องการใช้การค้นหาคอนเทนเนอร์ คุณต้องตั้งค่าการกักเก็บในองค์ประกอบระดับบน เช่น คุณอาจมีการ์ดที่มีรูปภาพและข้อความ
หากต้องการสร้างการค้นหาคอนเทนเนอร์ ให้ตั้งค่า 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
- มีอะไรใหม่ใน Chrome DevTools (105)
- การเลิกใช้งานและการนำ Chrome 105 ออก
- การอัปเดต ChromeStatus.com สำหรับ Chrome 105
- รายการเปลี่ยนแปลงที่เก็บของแหล่งที่มา Chromium
- ปฏิทินการเผยแพร่ Chrome
สมัครใช้บริการ
โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 106 เราก็จะแจ้งให้คุณทราบถึงสิ่งใหม่ๆ ใน Chrome!