- รายการสรุป ฟีเจอร์ CSS/HTML ที่เพิ่งเพิ่มเข้ามาหรือขยายการรองรับในปีนี้ จากมุมมองการใช้งานจริง ครอบคลุมตั้งแต่การเปลี่ยนผ่าน UI, ฟอร์ม, ตัวอักษร ไปจนถึง CSS เชิงฟังก์ชัน
- ฟีเจอร์ใหม่ที่เป็นแกนหลัก ได้แก่ การเปลี่ยนขนาดไปยังคีย์เวิร์ดอย่าง
auto, HTML popover/invoker, CSS @function·if() โดยหลายอย่างยังรองรับใน Chrome ก่อน จึงจำเป็นต้องใช้กลยุทธ์ Progressive Enhancement
- ฟีเจอร์อย่าง
field-sizing สำหรับขยายช่องกรอกอัตโนมัติ, Custom Select, text-wrap: balance/pretty, linear() easing, shape() path ช่วยยกระดับคุณภาพด้านภาพลักษณ์และการใช้งานได้ง่าย
- มีเครื่องมือควบคุมค่าและโฟลว์เพิ่มขึ้น เช่น
attr() ที่ทรงพลังขึ้น, reading-flow สำหรับควบคุมลำดับการอ่าน, calc-size() ทำให้ขอบเขตของการออกแบบที่จัดการได้ด้วย CSS เพียงอย่างเดียวกว้างขึ้น
- ควรจับตา Masonry,
random(), margin-trim, ส่วนขยายของ View Transitions ที่ยังอยู่ระหว่างมาตรฐานและการรองรับ ขณะที่ Container Queries, :has(), dvh เป็นต้น ได้กลายเป็นทักษะพื้นฐานในการทำงานจริงแล้ว
Animate to Auto
- ฟีเจอร์สำหรับทำ การเปลี่ยนผ่านแบบลื่นไหล ระหว่าง ค่าคงที่ ↔︎
auto ในองค์ประกอบที่มีความสูงของคอนเทนต์ไม่แน่นอน
- หากประกาศ
interpolate-size: allow-keywords ไว้แบบ global จะอนุญาตการเปลี่ยนผ่านอย่าง height: 0 → auto
- หรือจะใช้
calc-size() โดยไม่ต้องพึ่ง interpolate-size เพื่อทำ transition ด้วย height: calc-size(auto, size)
- ข้อดี คือช่วยเลิกใช้วิธีแก้ชั่วคราวแบบ
max-height หรือทางเลือกที่เปราะบางอย่าง วัดนอกจอ + JS animation พร้อมคง เลย์เอาต์ตามธรรมชาติ เอาไว้
- สถานะการรองรับ ปัจจุบันเน้นที่ Chrome และเพราะแอนิเมชันเป็นสิ่งที่ มีก็ดี จึงเหมาะกับการใช้แบบ PE(Progressive Enhancement)
Popovers & Invokers
- แอตทริบิวต์
popover เป็นฟีเจอร์ HTML ที่เพิ่มพฤติกรรม เปิด/ปิด และ JS API ที่เกี่ยวข้องให้กับองค์ประกอบใดก็ได้ โดยจัดอยู่ในกลุ่ม overlay แบบเบา ที่ต่างจาก modal
- หากใช้ Invoker attribute จะควบคุมได้แบบประกาศตรง ๆ โดยไม่ต้องใช้ JS
- ความสำคัญ คือมี การเข้าถึง, คีย์บอร์ด, การจัดการโฟกัส ฯลฯ มาให้ในระดับ HTML โดยค่าเริ่มต้น ลดความเสี่ยงจากการพลาดตอนพัฒนา
- การรองรับ ของ Popover นั้น กว้างขวาง ส่วน Invoker ยัง นำโดย Chrome และมีความต่างกันในรายละเอียดอย่าง
popover="hint"
- มี Polyfill ให้ จึงสามารถนำไปใช้กับ UX สำคัญได้
@function
- นำ ฟังก์ชันที่ผู้ใช้กำหนดเอง เข้าสู่ระบบฟังก์ชันค่าของ CSS ทำให้สามารถนามธรรม ตรรกะที่ใช้ร่วมกัน ได้ในรูปแบบ
@function --foo(--x) { result: ... }
- ช่วย ลดความซ้ำซ้อน (DRY) และทำให้ส่วนประกาศเรียบง่ายขึ้น ส่งผลให้ อ่านง่ายและบำรุงรักษาง่ายขึ้น
- การรองรับ ยัง นำโดย Chrome และถ้าเหมาะสมสามารถใช้ graceful fallback โดยเขียน
property: fallback แล้วตามด้วย property: --func() ในบรรทัดถัดไป
- ควรระวังว่า ไม่เข้ากัน กับ Sass function
if()
- ฟังก์ชันแตกแขนง ระดับค่า ตัวแรกของ CSS สามารถเรียงเงื่อนไข
media()·supports()·style() เหมือน switch statement แล้ว คืนค่าที่ตรงเงื่อนไขแรก
- ตัวอย่าง: เขียน
grid-template-columns ตาม breakpoint ต่าง ๆ ได้ด้วย ประกาศเดียว
- ผลลัพธ์ คือ เพิ่มความอ่านง่าย และ ลดการเขียนซ้ำ อีกทั้งยังทำงานร่วมกับ
@function แบบกำหนดเองได้ดี
- การรองรับ ยัง นำโดย Chrome จึงแนะนำให้ประกาศค่าฟอลแบ็กก่อนตามรูปแบบ PE
field-sizing
- แนะนำพร็อพเพอร์ตี
field-sizing ที่ทำให้ ช่องกรอก/แก้ไขขยายอัตโนมัติตามเนื้อหา
- กรณีเด่นคือ การขยายความสูงอัตโนมัติ ของ
<textarea> และยังประยุกต์ใช้กับ UX การปรับขนาดแบบอินไลน์ได้
- การรองรับ คือ Chrome และ Safari มีแผนนำมาใช้ โดยหากจำเป็นสามารถแทนด้วย JS ขนาดเบา ได้
- เพราะเป็นการปรับปรุง UX มากกว่าฟังก์ชันจำเป็น จึงเหมาะกับการนำมาใช้แบบค่อยเป็นค่อยไป
Custom Selects
- รองรับการ ปรับแต่งได้เต็มรูปแบบ ไม่ใช่แค่หน้าตาของ
select แต่รวมถึง UI ตัวเลือกที่เปิดออกมา ด้วย ผ่านการ opt-in แบบชัดเจน
- มี PE ที่ดีมาก เพราะในสภาพแวดล้อมที่ไม่รองรับจะ fallback กลับเป็น
<select> มาตรฐาน อย่างปลอดภัย
- การรองรับ ยัง นำโดย Chrome และสามารถขยายพื้นที่ควบคุมได้ด้วย
appearance: base-select และ ::picker(select)
text-wrap
text-wrap: balance ช่วย ปรับสมดุลความยาวบรรทัด สำหรับข้อความตัวใหญ่ เช่น หัวเรื่อง ส่วน text-wrap: pretty ช่วยปรับปรุง widow line และความสวยงาม ในเนื้อความด้วย- ผลลัพธ์ คือ อ่านง่ายขึ้นและคุณภาพงานตัวอักษรดีขึ้น ซึ่ง เห็นผลได้ทันทีโดยแทบไม่มีต้นทุน
- การรองรับ ของ
balance นั้น กว้างขวาง ส่วน pretty ยัง นำโดย Chrome·Safari และเหมาะกับ PE
linear() easing
- ต่างจากคีย์เวิร์ด
linear, ฟังก์ชัน linear() สามารถกำหนด easing curve อย่างละเอียด ด้วย จำนวนจุดตามต้องการ จึงเหมาะกับการสร้างพฤติกรรมซับซ้อนอย่าง bounce
- ขณะที่
cubic-bezier() ซึ่งเป็น ทางเลือก มีข้อจำกัด linear() ให้ การควบคุมจังหวะเวลาอย่างละเอียด และตอนนี้ รองรับครบแล้ว
- หากจำเป็นก็สามารถทำ fallback ด้วย named easing หรือ
cubic-bezier() ได้
shape()
- ฟังก์ชัน
shape() เข้ามาเสริมข้อจำกัดของ path() แบบเดิมที่ ใช้ได้เฉพาะพิกเซลและมีไวยากรณ์เข้าใจยาก โดยเปิดให้ใช้ responsive unit และ custom property เพื่ออธิบาย เส้นทางตามต้องการ
- ใช้กับ
clip-path เพื่อ mask รูปร่างตามต้องการ และใช้กับ offset-path เพื่อ จัดวาง/ทำแอนิเมชันตามเส้นทาง พร้อมมีแผนจะผสานกับ shape-outside ในอนาคต
- การรองรับ คือ Chrome·Safari ส่วน Firefox ยังอยู่ในขั้น เปิดผ่าน flag จึงควรออกแบบ fallback ที่สวยงาม ในการใช้งานจริง
More Powerful attr()
attr() รองรับ การระบุชนิดข้อมูล แล้ว ทำให้สามารถอ่านค่า ที่ไม่ใช่สตริง เช่น ตัวเลขหรือสี จาก HTML attribute แล้วนำมาใช้เป็น ค่า CSS ได้โดยตรง- ความหมาย คือการขยายรูปแบบการ inject ค่าอย่าง สีธีม, ตัวนับ, ขนาด จาก markup
- การรองรับ ยัง นำโดย Chrome และแนะนำให้นำมาใช้แบบค่อยเป็นค่อยไปกับ องค์ประกอบเชิงภาพ ก่อน แทนที่จะพึ่งพาใน เลย์เอาต์หลัก
Reading Flow
- เพิ่มพร็อพเพอร์ตี
reading-flow สำหรับ ปรับลำดับการเลื่อนแท็บให้เป็นเหตุเป็นผล แม้ในเลย์เอาต์ที่ลำดับภาพกับลำดับซอร์สไม่ตรงกัน
- เมื่อมีการจัดวางใหม่ด้วย grid สามารถกำหนดโฟลว์โฟกัสให้สอดคล้องกับรูปแบบเลย์เอาต์ เช่น
reading-flow: grid-rows
- ช่วยลด ความเสี่ยงด้านการเข้าถึง ได้ด้วย ประกาศ CSS เพียงบรรทัดเดียว ทำให้มี อิสระในการออกแบบเลย์เอาต์ มากขึ้น
- การรองรับ ยัง นำโดย Chrome ดังนั้นจึงแนะนำให้หลีกเลี่ยงการ reorder มากเกินไปจนกว่าจะรองรับได้กว้างกว่านี้
Stuff to Keep an Eye On
- Masonry layout ยังอยู่ระหว่างจัดระเบียบสเปก และข้อเสนอ
item-flow อาจขยายความเป็นไปได้ของการจัดวาง เกินกว่ากริดแบบเดิม
- ฟังก์ชัน
random() มีให้ใช้ใน Safari แล้ว และเป็นประโยชน์ต่อการทำดีไซน์แบบแปรผันที่มี พลังการแสดงออกสูง
margin-trim มีประโยชน์แต่ยัง เอนเอียงไปทาง Safari ส่วน sibling-index()/count() มีใน Chrome และเหมาะกับ stagger animation- มีข่าวดีด้าน cross-browser เช่น
view-transition-name: match-element; ของ View Transitions และ การพัฒนาใน Firefox
- การทำให้ การคูณ/หารใน
calc() แบบผสมหน่วย สมเหตุสมผลขึ้นใกล้ผ่านขั้นทดลองแล้ว ซึ่งอาจลดความจำเป็นของ type conversion hack ในอดีต
- มีการตั้งคำถามถึงปัญหาการไม่มีชื่อเวอร์ชันแบบ “CSS4” และแนะนำ รายการอ้างอิง ที่รวบรวมฟีเจอร์ใหม่ในช่วง 5 ปีล่าสุด
Great Stuff to Remember
- Container Queries และหน่วยที่เกี่ยวข้อง ยังคงเป็น พื้นฐานสำคัญ และถือเป็น การเพิ่มผลิตภาพครั้งใหญ่ที่สุดนับจาก media query
:has() เปิดให้เลือกตาม พาเรนต์และสถานะ ได้ ทำให้การเลือกแบบผสมที่ซับซ้อนจำนวนมาก แก้ได้ด้วย CSS เพียงอย่างเดียว- View Transitions, Anchor Positioning, Scroll-Driven Animations ไปถึง Safari แล้ว จึงมี อุปสรรคต่อการใช้งานจริงลดลง
- หน่วย viewport เพิ่มเติม (เช่น dvh) ถูกบรรจุใน Baseline แล้ว ช่วยเพิ่ม เสถียรภาพของ viewport บนมือถือ
ไฮไลต์โค้ด/ตัวอย่างการใช้งาน
- การเปลี่ยนขนาด: ใช้
interpolate-size: allow-keywords แบบ global หรือทำ animation ความสูงตามคอนเทนต์ ด้วย height: calc-size(auto, size) ตอนสลับสถานะ
- การแตกแขนงของกริด: ใช้แพตเทิร์น
if(media(...): ค่า; ... else: ค่า;) เพื่อรวม template columns ตามแต่ละ breakpoint ไว้ใน ประกาศเดียว
- Custom Select: เปิดใช้งาน picker แบบกำหนดเอง ด้วย
select, ::picker(select) { appearance: base-select }
- bounce easing: ใช้
animation-timing-function: linear( ... หลายจุด ... ) เพื่อสร้าง เส้นโค้งการเด้ง/หน่วงอย่างละเอียด
- clip path: ใช้
clip-path: shape( ... ) เพื่อสร้าง mask รูปร่างแบบ อิงสัดส่วนที่ responsive
แนวทางใช้งานจริง
- รายการที่มี ความต่างของการรองรับระหว่างเบราว์เซอร์สูง ควรนำมาใช้โดยยึด การออกแบบ fallback เป็นหลัก และพิจารณา ผลลัพธ์เทียบกับต้นทุนการนำเข้าใช้
- แอนิเมชัน, ตัวอักษร, เอฟเฟกต์ภาพ เหมาะเป็นตัวเลือก PE ลำดับแรก ส่วน การเข้าถึงหลัก อย่าง ลำดับโฟกัส/แท็บ ควรรอ การรองรับที่กว้างขวางกว่า ก่อน
- ฟังก์ชัน/เงื่อนไขแบบกำหนดเอง จะให้ ROI สูงสุดเมื่อทำเป็น แพตเทิร์นกลางของทีม ผ่าน การทำเอกสารกติกาการออกแบบ และการผสานกับ token·custom property
- รายการปรับปรุง Form UX อย่าง
field-sizing, Custom Select ให้ ประโยชน์ที่สัมผัสได้สูง ในสถานการณ์ mobile-first
บทสรุป
- CSS ยุคใหม่ฉบับปี 2025 เป็นปีที่ ฟังก์ชันค่า, การแตกแขนงเชิงตรรกะ, การควบคุมรูปร่าง ขยายตัวอย่างมาก ทำให้ “ทำสิ่งต่าง ๆ ด้วย CSS ได้มากขึ้น” และมีคุณค่าสำหรับการนำมาใช้แบบค่อยเป็นค่อยไปควบคู่กับ กลยุทธ์ PE
- หากวาง พื้นฐานหลัก (container queries,
:has(), หน่วย viewport) ไว้ก่อน แล้วค่อยนำ animate-to-auto·if()·shape() ซึ่งเป็นรายการ ประสิทธิภาพสูง เข้ามาก่อน ก็จะได้ roadmap ที่ใช้งานได้จริง
3 ความคิดเห็น
ตอนนี้ CSS แทบจะกลายเป็นภาษาหนึ่งไปแล้วนะครับ มันทำให้การเขียนตรรกะเชิงโครงสร้างได้มากพอสมควรเลย.. เลยชวนให้สงสัยว่านี่ยังเป็น stylesheet อยู่ไหม
ฟีเจอร์เด็ด ๆ น่าจะเพิ่มมาเยอะเลย สิ่งที่ก่อนหน้านี้ต้องทำด้วย javascript ก็จะทำได้
CSS ดีขึ้นมากจริง ๆ เลยนะ