สำรวจฟีเจอร์ที่น่าสนใจบางส่วนซึ่งมีอยู่ในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเวอร์ชันเบต้าในช่วงเดือนสิงหาคม 2022
เบราว์เซอร์เวอร์ชันเสถียร
ในเดือนสิงหาคม Firefox 104, Chrome 104 และ Chrome 105 จะมีความเสถียร
การเปลี่ยนรูปแบบแต่ละรายการ
Chrome 104 มีพร็อพเพอร์ตี้แต่ละรายการสำหรับการแปลง CSS พร็อพเพอร์ตี้คือ scale, rotate และ translate ซึ่งคุณใช้เพื่อกําหนดส่วนต่างๆ ของการเปลี่ยนรูปแบบแยกกันได้
เมื่อทำเช่นนี้ Chrome จะรวม Firefox และ Safari ซึ่งสนับสนุนคุณสมบัติเหล่านี้อยู่แล้ว
ไวยากรณ์คำค้นหาสื่อใหม่
นอกจากนี้ Chrome 104 ยังรวมไวยากรณ์ช่วงคิวรี่สื่ออีกด้วย Firefox จัดส่งวิธีการนี้เรียบร้อยแล้ว ซึ่งจะช่วยเพิ่มประสิทธิภาพการค้นหาสื่อ เช่น คำค้นหาสื่อต่อไปนี้
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
เขียนได้โดยใช้โอเปอเรเตอร์การเปรียบเทียบ ดังนี้
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
การค้นหาคอนเทนเนอร์
Chrome 105 เป็นรุ่นที่น่าตื่นเต้น ซึ่งได้นำฟีเจอร์การค้นหาคอนเทนเนอร์ที่ทุกคนรอคอยกันมานานมาสู่แพลตฟอร์มเว็บ แม้ว่าคิวรี่สื่อจะช่วยให้คุณมีวิธีการค้นหาเทียบกับขนาดของวิวพอร์ต แต่การค้นหาคอนเทนเนอร์ให้วิธีการค้นหาเทียบกับขนาดของคอนเทนเนอร์
หากต้องการใช้การค้นหาคอนเทนเนอร์ ให้เปิดการควบคุมโดยใช้พร็อพเพอร์ตี้ container-type
.card-container {
container-type: inline-size;
}
การตั้งค่าการค้นหาขนาด container-type เป็น inline-size ให้เป็นทิศทางอินไลน์ของตำแหน่งหลัก สำหรับภาษาละตินอย่างภาษาอังกฤษ ค่านี้จะเป็นความกว้างของการ์ด เนื่องจากข้อความจะเรียงในบรรทัดจากซ้ายไปขวา
ตอนนี้เราสามารถใช้คอนเทนเนอร์ดังกล่าวเพื่อนำรูปแบบไปใช้กับรายการย่อยต่างๆ โดยใช้ @container ดังต่อไปนี้
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาคอนเทนเนอร์ได้ในโพสต์ @container และ :has(): หน้า Landing Page สำหรับ API ใหม่ที่ปรับเปลี่ยนตามอุปกรณ์ 2 รายการที่มีประสิทธิภาพใน Chromium 105
คลาส Pseudo-class ของ :has()
โพสต์ที่กล่าวถึงข้างต้นยังพูดถึง :has() ด้วย คลาส Pseudo ใหม่นี้ CSS :has() จะให้คุณกำหนดเป้าหมายองค์ประกอบระดับบนสุดและข้างเคียงตามเงื่อนไข ดูข้อมูลเพิ่มเติมใน :has() ตัวเลือกครอบครัว
API ของ Sanitizer
นอกจากนี้ใน Chrome 105 ยังมี Sanitizer API อีกด้วย API นี้จะเพิ่มการทำความสะอาดข้อมูลลงในแพลตฟอร์มเพื่อช่วยนำช่องโหว่ของการเขียนสคริปต์ข้ามเว็บไซต์ออก
นอกจากนี้ใน Chrome 105 ก็มีคลาส Pseudo-class ใน :modal ด้วย ซึ่งจะจับคู่องค์ประกอบที่อยู่ในสถานะที่ยกเว้นการโต้ตอบทั้งหมดกับองค์ประกอบที่อยู่นอกตัว ตัวอย่างเช่น <dialog> เปิดด้วย API ของ showModal()
เมธอด findLast() และ findLastIndex()
Firefox 104 เพิ่มการสนับสนุนไว้หลังแฟล็กสำหรับเมธอด Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() และ TypedArray.prototype.findLastIndex() การใช้เหล่านี้ใช้เพื่อหาค่าและดัชนี (ตามลำดับ) ขององค์ประกอบสุดท้ายในฟังก์ชัน testarray หรือ TypedArray ที่ให้ไว้
เบราว์เซอร์รุ่นเบต้า
เบราว์เซอร์รุ่นเบต้าช่วยให้คุณมีตัวอย่างของสิ่งที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรถัดไป ตอนนี้เป็นเวลาที่เหมาะแก่การทดสอบฟีเจอร์ใหม่หรือการนำออกที่อาจส่งผลต่อเว็บไซต์ก่อนที่โลกจะเปิดตัว
เนื่องจากวันที่เผยแพร่กำลังจะมาไม่ไกลนัก รุ่นเบต้าในเดือนสิงหาคมจึงมีเพียง Firefox 105 ซึ่งตอนนี้ไม่ค่อยมีรายละเอียดมากนัก
Safari 16 รุ่นเบต้าที่พูดถึงในเดือนมิถุนายนก็ยังคงดำเนินอยู่
ส่วนหนึ่งของซีรีส์ใหม่สำหรับเว็บซีรีส์