สำรวจฟีเจอร์ที่น่าสนใจบางส่วนซึ่งมีอยู่ในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเวอร์ชันเบต้าในช่วงเดือนสิงหาคม 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 รุ่นเบต้าที่พูดถึงในเดือนมิถุนายนก็ยังคงดำเนินอยู่
ส่วนหนึ่งของซีรีส์ใหม่สำหรับเว็บซีรีส์