แพลตฟอร์มเว็บใหม่ในเดือนสิงหาคม

สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนสิงหาคม 2022

Rachel Andrew

เบราว์เซอร์รุ่นที่เสถียร

ในเดือนสิงหาคม Firefox 104, Chrome 104 และ Chrome 105 กลายเป็นเวอร์ชันเสถียร

การเปลี่ยนรูปแบบแต่ละรายการ

Chrome 104 มีพร็อพเพอร์ตี้แต่ละรายการสำหรับการเปลี่ยนรูปแบบ CSS พร็อพเพอร์ตี้ดังกล่าวคือ scale, rotate และ translate ซึ่งคุณใช้เพื่อกำหนดส่วนต่างๆ ของการเปลี่ยนรูปแบบแยกกันได้

การทำเช่นนี้จะทำให้ Chrome เข้าร่วมกับ Firefox และ Safari ซึ่งสนับสนุนคุณสมบัติเหล่านี้อยู่แล้ว

การรองรับเบราว์เซอร์

• 104
• 104
• 72
• 14.1

แหล่งที่มา

ไวยากรณ์การค้นหาสื่อแบบใหม่

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.
}

การรองรับเบราว์เซอร์

• 104
• 104
• 102
• 16.4

แหล่งที่มา

การค้นหาคอนเทนเนอร์

Chrome 105 เป็นรุ่นที่น่าตื่นเต้น นำเสนอฟีเจอร์ของการค้นหาคอนเทนเนอร์ที่รอคอยกันมานานในแพลตฟอร์มบนเว็บ แม้ว่าคิวรีสื่อจะให้วิธีค้นหาตามขนาดของวิวพอร์ต แต่คิวรีคอนเทนเนอร์จะให้วิธีค้นหาตามขนาดของคอนเทนเนอร์

การรองรับเบราว์เซอร์

• 105
• 105
• 110
• 16

แหล่งที่มา

หากต้องการใช้การค้นหาคอนเทนเนอร์ ให้เปิดการควบคุมโดยใช้พร็อพเพอร์ตี้ 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

คลาส Pseudo หลัก :has()

โพสต์ที่กล่าวถึงข้างต้นพูดถึง :has() ด้วย คลาสที่ไม่แท้จริงใหม่นี้ คลาสที่ไม่แท้จริง :has() ของ CSS ช่วยให้คุณกำหนดเป้าหมายองค์ประกอบหลักและองค์ประกอบพี่น้องตามเงื่อนไขได้ ดูข้อมูลเพิ่มเติมใน :has() ตัวเลือกครอบครัว

การรองรับเบราว์เซอร์

• 105
• 105
• 121
• 15.4

แหล่งที่มา

Sanitizer API

นอกจากนี้ Chrome 105 ยังมี Sanitizer API ด้วย API นี้จะสร้างการกรองข้อมูลไว้ในแพลตฟอร์มเพื่อช่วยขจัดช่องโหว่ของการเขียนสคริปต์ข้ามเว็บไซต์

นอกจากนี้ Chrome 105 ยังมีคลาสจำลอง :modal ของ CSS ด้วย จะตรงกับองค์ประกอบที่อยู่ในสถานะยกเว้นการโต้ตอบทั้งหมดกับองค์ประกอบที่อยู่ภายนอก ตัวอย่างเช่น <dialog> เปิดด้วย showModal() API

การรองรับเบราว์เซอร์

• 105
• 105
• 103
• 15.6

แหล่งที่มา

เมธอด findLast() และ findLastIndex()

Firefox 104 จะเพิ่มการรองรับหลังแฟล็กสำหรับเมธอด Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() และ TypedArray.prototype.findLastIndex() ใช้วิธีเหล่านี้หาค่าและดัชนี (ตามลำดับ) ขององค์ประกอบทดสอบสุดท้ายในฟังก์ชันที่กำหนดให้ Array หรือ TypedArray

การรองรับเบราว์เซอร์

• 97
• 97
• 104
• 15.4

แหล่งที่มา

เบราว์เซอร์รุ่นเบต้า

เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น

เนื่องจากวันที่เผยแพร่อยู่นอกเดือนสิงหาคม เวอร์ชันเบต้าใหม่เพียงเวอร์ชันเดียวในเดือนสิงหาคมคือ Firefox 105 ซึ่งตอนนี้ยังไม่มีรายละเอียดมากนัก

นอกจากนี้ เรายังพัฒนา Safari 16 เบต้าที่พูดถึงไปเมื่อเดือนมิถุนายนอยู่ด้วย

เป็นส่วนหนึ่งของชุดวิดีโอ "เพิ่งเคยใช้เว็บ"