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