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