สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนสิงหาคม 2022
เบราว์เซอร์รุ่นที่เสถียร
ในเดือนสิงหาคม Firefox 104, Chrome 104 และ Chrome 105 กลายเป็นเวอร์ชันเสถียร
การเปลี่ยนรูปแบบแต่ละรายการ
Chrome 104 มีพร็อพเพอร์ตี้แต่ละรายการสำหรับการเปลี่ยนรูปแบบ CSS พร็อพเพอร์ตี้ดังกล่าวคือ scale
, rotate
และ translate
ซึ่งคุณใช้เพื่อกำหนดส่วนต่างๆ ของการเปลี่ยนรูปแบบแยกกันได้
ซึ่งทำให้ Chrome เข้าร่วมกับ Firefox และ Safari ที่รองรับพร็อพเพอร์ตี้เหล่านี้อยู่แล้ว
ไวยากรณ์การค้นหาสื่อแบบใหม่
Chrome 104 ยังมีไวยากรณ์ช่วงของ Media Query ด้วย 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(): 2 Responsive API ใหม่ที่มีประสิทธิภาพซึ่งเปิดตัวใน Chromium 105
พсевдоคลาสหลัก :has()
โพสต์ที่กล่าวถึงข้างต้นพูดถึง :has()
ด้วย คลาสที่ไม่แท้จริงใหม่นี้ คลาสที่ไม่แท้จริง :has() ของ CSS ช่วยให้คุณกำหนดเป้าหมายองค์ประกอบหลักและองค์ประกอบพี่น้องตามเงื่อนไขได้ ดูข้อมูลเพิ่มเติมใน :has() ตัวเลือกครอบครัว
Sanitizer API
นอกจากนี้ Chrome 105 ยังมี Sanitizer API ด้วย API นี้จะสร้างการกรองข้อมูลไว้ในแพลตฟอร์มเพื่อช่วยขจัดช่องโหว่ของการเขียนสคริปต์ข้ามเว็บไซต์
นอกจากนี้ Chrome 105 ยังมีคลาสจำลอง CSS :modal ด้วย รายการนี้ตรงกับองค์ประกอบที่อยู่ในสถานะที่ยกเว้นการโต้ตอบทั้งหมดกับองค์ประกอบภายนอก เช่น <dialog>
ที่เปิดด้วย showModal()
API
เมธอด findLast() และ findLastIndex()
Firefox 104 เพิ่มการรองรับ Flag สำหรับเมธอด Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() และ TypedArray.prototype.findLastIndex() ซึ่งใช้ค้นหาค่าและดัชนี (ตามลำดับ) ขององค์ประกอบสุดท้ายในอาร์เรย์หรือ TypedArray ที่ตรงกับฟังก์ชันทดสอบที่ระบุ
เบราว์เซอร์รุ่นเบต้า
เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น
เนื่องจากวันที่เผยแพร่อยู่นอกเดือนนี้ เวอร์ชันเบต้าใหม่เพียงเวอร์ชันเดียวในเดือนสิงหาคมคือ Firefox 105 ซึ่งตอนนี้ยังไม่มีรายละเอียดมากนัก
นอกจากนี้ เรายังพัฒนา Safari 16 เบต้าที่พูดถึงไปเมื่อเดือนมิถุนายนอยู่ด้วย
เป็นส่วนหนึ่งของชุดวิดีโอ "เพิ่งเคยใช้เว็บ"