เผยแพร่เมื่อ: 3 มิถุนายน 2026
ยินดีต้อนรับสู่สรุปรายเดือนของ Baseline ในเดือนพฤษภาคม 2026 ฟีเจอร์ CSS ใหม่ๆ, พร็อพเพอร์ตี้เหตุการณ์ และการเพิ่ม API หลายรายการกลายเป็น Baseline พร้อมใช้งานใหม่ ในขณะที่หน่วย CSS, พร็อพเพอร์ตี้การโต้ตอบของผู้ใช้ และคลาสเทียมกลายเป็น Baseline พร้อมใช้งานทั่วไป พร้อมกับการอัปเดตที่สำคัญจากชุมชนนักพัฒนาซอฟต์แวร์
แบบสำรวจ State of CSS 2026
แบบสำรวจ State of CSS 2026 ซึ่งเป็นการสำรวจความคิดเห็นประจำปีของชุมชนเว็บพร้อมให้ทำแล้ว ปีนี้ผู้จัดงานได้พยายามปรับปรุงแบบสำรวจโดยมุ่งเน้นไปที่ฟีเจอร์ที่สำคัญที่สุดสำหรับนักพัฒนาซอฟต์แวร์ในยุคของการเขียนโค้ดด้วยระบบ AI ผู้ให้บริการเบราว์เซอร์จะตรวจสอบผลลัพธ์เหล่านี้อย่างใกล้ชิดเพื่อช่วยจัดลำดับความสำคัญของแผนงานด้านวิศวกรรมและแก้ไขปัญหาที่นักพัฒนาซอฟต์แวร์พบ อย่าลืมแสดงความคิดเห็นและแชร์ประสบการณ์ของคุณเกี่ยวกับ CSS ที่มีการพัฒนาอย่างต่อเนื่องก่อนที่แบบสำรวจจะปิดในวันที่ 1 กรกฎาคม
ฟีเจอร์ Baseline พร้อมใช้งานใหม่
เบราว์เซอร์หลักรองรับฟีเจอร์ในส่วนนี้ตั้งแต่เดือนพฤษภาคม 2026 และตอนนี้ฟีเจอร์เหล่านี้พร้อมใช้งานใหม่ใน Baseline แล้ว
การค้นหาสไตล์คอนเทนเนอร์
การค้นหาคอนเทนเนอร์ไม่ได้จำกัดอยู่แค่ขนาดอีกต่อไป ตอนนี้การค้นหาสไตล์ช่วยให้คุณใช้สไตล์กับองค์ประกอบต่างๆ ได้โดยอิงตามพร็อพเพอร์ตี้ที่กำหนดเองของคอนเทนเนอร์ระดับบน ซึ่งช่วยให้คุณสร้างคอมโพเนนต์แบบแยกส่วนสูงที่ปรับธีมหรือสไตล์ได้ตามตำแหน่งตามบริบทโดยไม่ต้องอาศัยโครงสร้างคลาสที่ซับซ้อน
ดูข้อมูลเพิ่มเติมได้ในหน้ารายการอ้างอิง MDN สำหรับ @container
คลาสเทียม :open
ก่อนหน้านี้การจัดสไตล์องค์ประกอบที่มีสถานะเปิดและปิด เช่น <dialog> และ <details> จำเป็นต้องตรวจสอบแอตทริบิวต์หรือจัดการคลาส คลาสเทียม :open ช่วยลดความซับซ้อนด้วยการจับคู่องค์ประกอบเหล่านี้เฉพาะเมื่ออยู่ในสถานะเปิดเท่านั้น ซึ่งช่วยให้ CSS สะอาดและประกาศได้มากขึ้น
อ่านข้อมูลเกี่ยวกับคลาสเทียม :open ในหน้า MDN
ToggleEvent.source
เมื่อใช้ Popover API การตอบสนองต่อการเปลี่ยนแปลงสถานะเป็นสิ่งสำคัญ พร็อพเพอร์ตี้ source ของอินเทอร์เฟซ ToggleEvent จะแสดงผลองค์ประกอบควบคุมที่ทริกเกอร์การดำเนินการสลับป๊อปอัป ซึ่งช่วยให้คุณระบุที่มาของเหตุการณ์และประสานงานการโต้ตอบ UI ที่ซับซ้อนได้
ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบ MDN สำหรับ ToggleEvent.source
พร็อพเพอร์ตี้ image-rendering
พร็อพเพอร์ตี้ CSS image-rendering ช่วยให้คุณควบคุมอัลกอริทึมการปรับขนาดที่ใช้เมื่อปรับขนาดรูปภาพ ฟีเจอร์นี้มีประโยชน์อย่างยิ่งสำหรับพิกเซลอาร์ต รูปภาพความละเอียดต่ำ หรือคิวอาร์โค้ด ซึ่งคุณควรหลีกเลี่ยงการประมาณค่าแบบเบลอและรักษาการปรับขนาดให้คมชัดและเป็นพิกเซล
ดูวิธีใช้ได้ในหน้า MDN สำหรับ image-rendering
text-decoration-skip-ink: all
บางครั้งเส้นใต้ที่ผ่านตัวอักษรที่มีหางยาวลงมาอาจดูรก แม้ว่า text-decoration-skip-ink: auto จะข้ามหมึกเฉพาะเมื่อมีการตัดกัน แต่การตั้งค่าเป็น all จะบังคับให้เส้นใต้ข้ามอักขระทั้งหมดโดยไม่คำนึงถึงการตัดกัน ซึ่งช่วยให้คุณควบคุมความสวยงามของตัวอักษรได้มากขึ้น
อ่านรายละเอียดได้ในคู่มือ MDN สำหรับ text-decoration-skip-ink
SharedWorker
API SharedWorker มี Background Worker เฉพาะที่เข้าถึงได้จากบริบทการท่องเว็บหลายรายการ เช่น หน้าต่าง แท็บ หรือ iframe ต่างๆ ในต้นทางเดียวกัน ฟีเจอร์นี้มีประสิทธิภาพในการแชร์สถานะ จัดการการเชื่อมต่อ หรือประสานงาน Background Task ข้ามขอบเขตแท็บ
ดูเอกสารประกอบ MDN สำหรับ SharedWorker
ฟีเจอร์ Baseline พร้อมใช้งานทั่วไป
ฟีเจอร์ต่อไปนี้กลายเป็น Baseline พร้อมใช้งานทั่วไป ซึ่งหมายความว่าฟีเจอร์เหล่านี้เข้ากันได้และใช้งานได้ในโปรเจ็กต์ของคุณแล้ว
หน่วยความยาว lh
หน่วยสัมพัทธ์ lh สอดคล้องกับความสูงบรรทัดที่คำนวณได้ขององค์ประกอบที่ใช้ ซึ่งช่วยให้การปรับขนาดองค์ประกอบต่างๆ เช่น ป้ายไอคอนหรือไฮไลต์พื้นหลัง ให้ตรงกับความสูงของบรรทัดข้อความได้อย่างง่ายดาย
ดูข้อมูลเพิ่มเติมได้ในรายการอ้างอิง MDN สำหรับหน่วยความยาว
หน่วยความยาว rlh
หน่วย rlh คล้ายกับ lh โดยแสดงถึงความสูงบรรทัด แต่เป็นขององค์ประกอบรูท (<html>) โดยเฉพาะ ซึ่งช่วยให้คุณสร้างจังหวะแนวตั้งที่สอดคล้องกันทั่วทั้งหน้าได้ ไม่ว่าจะเป็นการแทนที่ขนาดแบบอักษรหรือความสูงบรรทัดในเครื่อง
อ่านเพิ่มเติมได้ในรายการอ้างอิง MDN สำหรับหน่วยความยาว
Navigator.userActivation
Web API หลายรายการ (เช่น การเล่นวิดีโอ ป๊อปอัป หรือการเข้าถึงคลิปบอร์ด) ต้องมีการโต้ตอบของผู้ใช้ก่อนจึงจะทริกเกอร์ได้ พร็อพเพอร์ตี้ Navigator.userActivation จะแสดงผลออบเจ็กต์ที่มีข้อมูลเกี่ยวกับสถานะการเปิดใช้งานปัจจุบันและที่ผ่านมาของผู้ใช้ในหน้าต่าง ซึ่งช่วยให้สคริปต์ตรวจสอบได้ว่ามีการกระทำของผู้ใช้เกิดขึ้นหรือไม่
ดูวิธีใช้ได้ในหน้า MDN สำหรับ Navigator.userActivation
clip-path
พร็อพเพอร์ตี้ CSS clip-path ช่วยให้คุณสร้างพื้นที่การคลิปที่กำหนดส่วนขององค์ประกอบที่ควรแสดง การใช้รูปร่างพื้นฐาน (เช่น วงกลม วงรี หรือรูปหลายเหลี่ยม) หรือเส้นทาง SVG ช่วยให้คุณสร้างการออกแบบเลย์เอาต์และการเปลี่ยนภาพที่น่าสนใจได้โดยไม่ต้องซ่อนเนื้อหาที่ล้น
ดูรายละเอียดการใช้งานได้ในหน้า MDN สำหรับ clip-path
คลาสเทียม :user-invalid
คลาสเทียม :user-invalid จะจับคู่เฉพาะองค์ประกอบแบบฟอร์มที่ไม่ถูกต้อง หลังจาก ที่ผู้ใช้โต้ตอบกับองค์ประกอบเหล่านั้นแล้ว ซึ่งแตกต่างจาก :invalid ที่ใช้การจัดสไตล์ทันทีที่หน้าเว็บโหลด (ซึ่งมักทำให้ UX ไม่ดี) ซึ่งหมายความว่าคุณจะแสดงความคิดเห็นเกี่ยวกับการตรวจสอบแบบฟอร์มหลังจากที่ผู้ใช้ออกจากช่องได้
ดูวิธีการทำงานได้ในเอกสารประกอบ MDN สำหรับ :user-invalid
จบบริบูรณ์
โปรดแจ้งให้เราทราบหากเราพลาดข้อมูลที่เกี่ยวข้องกับ Baseline แล้วเราจะเพิ่มข้อมูลดังกล่าวลงในฉบับต่อๆ ไป หากมีข้อสงสัยหรือต้องการแสดงความคิดเห็นเกี่ยวกับ Baseline โปรดรายงานปัญหาในเครื่องมือติดตามปัญหาของเรา