เผยแพร่เมื่อวันที่ 17 กรกฎาคม 2026
ยินดีต้อนรับอีกครั้งสู่สรุปรายเดือนของ Baseline ในเดือนมิถุนายน 2026 field-sizing กลายเป็นฟีเจอร์ใหม่ที่พร้อมใช้งานใน Baseline ซึ่งช่วยให้การควบคุมแบบฟอร์มปรับขนาดให้พอดีกับเนื้อหาได้โดยอัตโนมัติ ขณะเดียวกัน ฟีเจอร์ CSS, HTML และ Web API มากมายก็เข้าสู่สถานะพร้อมใช้งานอย่างแพร่หลายใน Baseline พร้อมด้วยข้อมูลอัปเดตที่สำคัญจากชุมชนนักพัฒนาเว็บ
การแจ้งเตือน Baseline เกี่ยวกับสถานะแพลตฟอร์มเว็บ
การติดตามว่าฟีเจอร์เว็บจะทำงานร่วมกันได้เมื่อใดทำได้ง่ายขึ้นแล้วด้วย การแจ้งเตือน Baseline ใน แดชบอร์ดสถานะแพลตฟอร์มเว็บ เมื่อลงชื่อเข้าใช้ด้วย GitHub คุณจะสมัครรับการแจ้งเตือนสำหรับฟีเจอร์ต่างๆ ได้เมื่อฟีเจอร์เหล่านั้นเข้าสู่สถานะใหม่ที่พร้อมใช้งานใน Baseline, พร้อมใช้งานอย่างแพร่หลาย หรือมีการใช้งานในเบราว์เซอร์ใหม่ คุณสามารถกำหนดค่าการสมัครรับข้อมูลให้ส่งข้อมูลอัปเดตทางอีเมลหรือฟีด RSS ที่กำหนดเองตามกำหนดการรายเดือน รายสัปดาห์ หรือทันที นอกจากนี้ คุณยังกำหนดขอบเขตการแจ้งเตือนให้ครอบคลุมการค้นหาที่บันทึกไว้ เช่น ฟีเจอร์ HTML ทั้งหมด สร้างจดหมายข่าวที่กำหนดเอง สร้างรายการฟีเจอร์ที่แชร์ได้ หรือกำหนดค่าเว็บฮุกของ Slack เพื่อแจ้งทีมวิศวกรได้ด้วย
ดูข้อมูลเพิ่มเติมได้ที่ การเปิดตัวการแจ้งเตือน Baseline
ฟีเจอร์ใหม่ที่พร้อมใช้งานใน Baseline
เบราว์เซอร์หลักรองรับฟีเจอร์ในส่วนนี้แล้วตั้งแต่เดือนมิถุนายน 2026 และฟีเจอร์เหล่านี้พร้อมใช้งานใน Baseline แล้ว
field-sizing
พร็อพเพอร์ตี้ CSS field-sizing ช่วยให้คุณควบคุมลักษณะการปรับขนาดของ
องค์ประกอบแบบฟอร์ม เช่น <textarea>, <input> และ <select> ซึ่งโดยปกติ
จะมีขนาดคงที่เริ่มต้น เมื่อใช้ field-sizing: content การควบคุมแบบฟอร์มจะขยายหรือย่อขนาดโดยอัตโนมัติให้พอดีกับเนื้อหา ซึ่งช่วยลดความจำเป็นในการใช้สคริปต์ JavaScript ที่กำหนดเองสำหรับการปรับขนาดอัตโนมัติ
ดูข้อมูลเพิ่มเติมได้ในหน้ารายละเอียดของ MDN สำหรับ field-sizing
ฟีเจอร์ที่พร้อมใช้งานอย่างแพร่หลายใน Baseline
ฟีเจอร์ต่อไปนี้พร้อมใช้งานอย่างแพร่หลายใน Baseline แล้ว ซึ่งหมายความว่าฟีเจอร์เหล่านี้เข้ากันได้และใช้งานได้ในโปรเจ็กต์ของคุณแล้ว
คลาสเทียม :has()
ตัวเลือกระดับบนของ CSS :has() ช่วยให้คุณจัดรูปแบบองค์ประกอบตามองค์ประกอบย่อยหรือองค์ประกอบร่วมที่อยู่ถัดไป คลาสเทียมที่ใช้งานได้นี้ช่วยให้คุณสร้างรูปแบบเลย์เอาต์แบบมีเงื่อนไขได้โดยตรงใน CSS โดยไม่ต้องใช้ JavaScript เพื่อตรวจสอบโครงสร้าง DOM
อ่านเพิ่มเติมได้ในหน้า MDN สำหรับคลาสเทียม :has pseudo-class
HTMLIFrameElement.loading
พร็อพเพอร์ตี้ loading ในองค์ประกอบ <iframe> ช่วยให้โหลดเฟรมที่ฝังไว้แบบ Lazy Loading ได้
เมื่อระบุ loading="lazy" เบราว์เซอร์จะเลื่อนการโหลด iframe นอกหน้าจอ
ออกไปจนกว่าจะมีการเลื่อน iframe เหล่านั้นให้เข้ามาใกล้กับวิวพอร์ต ซึ่งช่วยประหยัดแบนด์วิดท์ของเครือข่ายและลดค่าใช้จ่ายในการโหลดหน้าเว็บครั้งแรก
ดูรายละเอียดได้ในข้อมูลอ้างอิงของ MDN สำหรับ HTMLIFrameElement.loading
CanvasRenderingContext2D.reset()
เมธอด reset() ในบริบทของ Canvas 2 มิติจะล้างสถานะบริบทการวาด โดยจะรีเซ็ตพร็อพเพอร์ตี้ต่างๆ เช่น การแปลง เส้นทางการตัด เส้น และสไตล์การเติมสีกลับไปเป็นค่าเริ่มต้น ซึ่งช่วยให้คุณนำบริบทของ Canvas กลับมาใช้ซ้ำได้อย่างสะอาดโดยไม่ต้องล้างพร็อพเพอร์ตี้ด้วยตนเอง
ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบของ MDN สำหรับ CanvasRenderingContext2D.reset
หน่วยความยาว cap
หน่วย cap ที่สัมพันธ์กับแบบอักษรจะสอดคล้องกับความสูงของตัวพิมพ์ใหญ่ปกติของแบบอักษรขององค์ประกอบ หน่วยนี้ช่วยให้คุณจัดแนวและปรับขนาดองค์ประกอบให้สัมพันธ์กับความสูงของตัวอักษรตัวพิมพ์ใหญ่ ซึ่งช่วยให้สร้างเลย์เอาต์การจัดตัวพิมพ์ได้อย่างแม่นยำ
ดูข้อมูลเพิ่มเติมได้ในข้อมูลอ้างอิงของ MDN สำหรับหน่วยความยาว
พร็อพเพอร์ตี้ counter-set
พร็อพเพอร์ตี้ CSS counter-set จะตั้งค่าตัวนับ CSS เป็นค่าที่ระบุ ซึ่งจะเสริมการทำงานของ counter-reset และ counter-increment พร็อพเพอร์ตี้นี้ช่วยให้คุณควบคุมได้เมื่อจัดการรายการแบบมีหมายเลข โครงร่างเอกสาร หรือลำดับตัวนับที่กำหนดเอง
อ่านรายละเอียดได้ในหน้า MDN สำหรับ counter-set
createImageBitmap()
เมธอดสแตติก createImageBitmap() จะสร้างรูปภาพบิตแมปแบบไม่พร้อมกัน
จากแหล่งที่มาของรูปภาพต่างๆ รวมถึง <img>, <canvas>, Blob หรือ
ImageData เนื่องจากเมธอดนี้จะถอดรหัสรูปภาพออกจากเธรดหลัก จึงช่วยหลีกเลี่ยงการบล็อกประสิทธิภาพ UI เมื่อจัดการกราฟิก Canvas ที่ซับซ้อน
ดูรายละเอียดการใช้งานได้ในเอกสารประกอบของ MDN สำหรับ createImageBitmap
ประเภทข้อมูล <easing-function>
ประเภทข้อมูล CSS <easing-function> อธิบายเส้นโค้งอัตราการเปลี่ยนแปลงทางคณิตศาสตร์
สำหรับการเปลี่ยนภาพและการเคลื่อนไหว นอกจากคีย์เวิร์ดมาตรฐาน เช่น ease-in หรือ cubic-bezier() แล้ว ยังรองรับฟังก์ชันต่างๆ เช่น linear() เพื่อสร้างเอฟเฟกต์สปริงหรือการกระเด้งที่กำหนดเอง
ดูวิธีใช้ได้ในข้อมูลอ้างอิงของ MDN สำหรับ easing-function
ตัวเลือกการซ้อน &
ตัวเลือกการซ้อน & จะยึดตัวเลือกกฎย่อยกับตัวเลือกระดับบนอย่างชัดเจนเมื่อใช้การซ้อน CSS ในตัว ตัวเลือกนี้ช่วยให้มั่นใจได้ถึงความชัดเจนและกฎเฉพาะเจาะจงที่ถูกต้องเมื่อกำหนดสถานะการวางเมาส์เหนือ การโฟกัส หรือคลาสเทียมที่ซ้อนกัน
อ่านรายละเอียดได้ในคู่มือ MDN สำหรับตัวเลือกการซ้อน
การโหลดล่วงหน้าแบบปรับเปลี่ยนตามอุปกรณ์ด้วย rel="preload"
แอตทริบิวต์ media ในองค์ประกอบ <link rel="preload"> ช่วยให้โหลดเนื้อหาสำคัญล่วงหน้าแบบปรับเปลี่ยนตามอุปกรณ์ได้
เมื่อรวม rel="preload" กับ Media Query
เบราว์เซอร์จะดาวน์โหลดเฉพาะเนื้อหาที่ตรงกับความกว้างของวิวพอร์ตหรือลักษณะการแสดงผลของผู้ใช้
ในช่วงต้นของวงจรการโหลด
ดูวิธีใช้ได้ในเอกสารประกอบของ MDN สำหรับ rel="preload"
HTMLMediaElement.preservesPitch
พร็อพเพอร์ตี้ preservesPitch ในองค์ประกอบ <audio> และ <video> จะควบคุม
ว่าเบราว์เซอร์จะปรับระดับเสียงหรือไม่เมื่อเปลี่ยน playbackRate
การตั้งค่าเป็น false จะอนุญาตให้มีการเปลี่ยนระดับเสียงเมื่อเร่งความเร็วหรือลดความเร็วในการเล่นสื่อ
ดูรายละเอียดได้ในหน้า MDN สำหรับ HTMLMediaElement.preservesPitch
คลาสเทียม :dir()
คลาสเทียม CSS :dir() จะจับคู่องค์ประกอบตามทิศทางการเขียนข้อความ
(เช่น ltr หรือ rtl) โดยจะจับคู่ทิศทางที่รับค่ามาจากแอตทริบิวต์ HTML เช่น
dir หรือบริบทข้อความที่คำนวณได้
ดูข้อมูลเพิ่มเติมได้ในหน้า MDN สำหรับคลาสเทียม :dir pseudo-class
ฟังก์ชันทางคณิตศาสตร์ pow()
ฟังก์ชัน CSS pow() จะคำนวณค่ากำลังยกกำลังโดยตรงภายในประกาศ CSS โดยจะยกตัวเลขฐานขึ้นเป็นเลขชี้กำลัง (เช่น pow(2, 3)) ซึ่งช่วยลดความซับซ้อนในการปรับขนาดแบบปรับเปลี่ยนตามอุปกรณ์และความสัมพันธ์ของกริดทางคณิตศาสตร์
อ่านรายละเอียดได้ในข้อมูลอ้างอิงของ MDN สำหรับฟังก์ชัน pow
พร็อพเพอร์ตี้ CSS mask
พร็อพเพอร์ตี้ CSS แบบย่อ mask จะซ่อนบางส่วนขององค์ประกอบโดยใช้รูปภาพหรือการไล่ระดับสีเป็นเลเยอร์การตัด พร็อพเพอร์ตี้นี้จะรวมพร็อพเพอร์ตี้ย่อยต่างๆ เช่น mask-image, mask-position และ mask-repeat เพื่อสร้างเอฟเฟกต์การมาสก์ภาพที่ซับซ้อน
ดูข้อมูลเพิ่มเติมได้ในหน้า MDN สำหรับพร็อพเพอร์ตี้ mask property
@media (scripting)
ฟีเจอร์สื่อ scripting จะทดสอบว่ามีการเปิดใช้และพร้อมใช้งานการเขียนสคริปต์ฝั่งไคลเอ็นต์ (เช่น JavaScript) ในบริบทของเบราว์เซอร์หรือไม่ ซึ่งช่วยให้สไตล์การเพิ่มประสิทธิภาพแบบต่อเนื่องกำหนดเป้าหมายสภาพแวดล้อมที่มีหรือไม่มี JavaScript ที่ใช้งานอยู่ได้
ดูข้อมูลเพิ่มเติมได้ในข้อมูลอ้างอิงของ MDN สำหรับฟีเจอร์สื่อ scripting
URL.canParse()
เมธอดสแตติก URL.canParse() จะตรวจสอบว่าสตริงที่กำหนดเป็น URL ที่ถูกต้องและแยกวิเคราะห์ได้หรือไม่ (โดยมี URL ฐานที่ไม่บังคับ) โดยไม่แสดงข้อยกเว้น ซึ่งช่วยลดความซับซ้อนในการตรวจสอบ URL ในรันไทม์ก่อนที่จะสร้างอินสแตนซ์ออบเจ็กต์ URL
ดูรายละเอียดการใช้งานได้ในเอกสารประกอบของ MDN สำหรับ URL.canParse
Storage Access API
Storage Access API มีกลไกสำหรับเนื้อหาข้ามเว็บไซต์ที่ฝัง
อยู่ใน <iframe> ของบุคคลที่สามเพื่อขอสิทธิ์เข้าถึงคุกกี้และพื้นที่เก็บข้อมูลที่ไม่ได้แบ่งพาร์ติชัน
ซึ่งช่วยให้การตรวจสอบสิทธิ์และการโต้ตอบแบบมีสถานะเกิดขึ้นได้ในขอบเขตของโดเมน
อ่านรายละเอียดได้ในหน้า MDN สำหรับ Storage Access API
จบบริบูรณ์
โปรดแจ้งให้เราทราบหากเราพลาดข้อมูลที่เกี่ยวข้องกับ Baseline แล้วเราจะเพิ่มข้อมูลดังกล่าวลงในฉบับต่อไป หากมีคำถามหรือต้องการแสดงความคิดเห็นเกี่ยวกับ Baseline โปรดรายงานปัญหาใน เครื่องมือติดตามปัญหาของเรา