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

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

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

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

ซึ่งทำให้ Chrome เข้าร่วมกับ Firefox และ Safari ที่รองรับพร็อพเพอร์ตี้เหล่านี้อยู่แล้ว

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

  • Chrome: 104
  • Edge: 104
  • Firefox: 72
  • Safari: 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.
}

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

  • Chrome: 104
  • Edge: 104
  • Firefox: 102
  • Safari: 16.4

แหล่งที่มา

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

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

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

  • Chrome: 105
  • Edge: 105
  • Firefox: 110
  • Safari: 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

พсевдоคลาสหลัก :has()

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

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

  • Chrome: 105
  • Edge: 105
  • Firefox: 121
  • Safari: 15.4

แหล่งที่มา

Sanitizer API

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

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

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

  • Chrome: 105
  • Edge: 105
  • Firefox: 103
  • Safari: 15.6

แหล่งที่มา

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

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

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

  • Chrome: 97
  • Edge: 97
  • Firefox: 104
  • Safari: 15.4

แหล่งที่มา

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

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

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

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

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