สิ่งที่ควรรู้ใน CSS ยุคใหม่ล่าสุดปี 2025

• รายการสรุป ฟีเจอร์ 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 ที่ใช้งานได้จริง

[shakespeares]

ตอนนี้ CSS แทบจะกลายเป็นภาษาหนึ่งไปแล้วนะครับ มันทำให้การเขียนตรรกะเชิงโครงสร้างได้มากพอสมควรเลย.. เลยชวนให้สงสัยว่านี่ยังเป็น stylesheet อยู่ไหม

[chl11wq12]

ฟีเจอร์เด็ด ๆ น่าจะเพิ่มมาเยอะเลย สิ่งที่ก่อนหน้านี้ต้องทำด้วย javascript ก็จะทำได้

[addons]

CSS ดีขึ้นมากจริง ๆ เลยนะ