- ด้วย วิวัฒนาการของแพลตฟอร์ม CSS ตอนนี้สามารถ สร้างแอนิเมชันและอินเทอร์แอกชันที่ซับซ้อนได้โดยไม่ต้องใช้ JavaScript แล้ว
- ฟีเจอร์ที่เพิ่มเข้ามาใหม่รองรับการปรับแต่ง
<select>, การตรวจจับสถานะการเลื่อน, การคำนวณองค์ประกอบพี่น้อง, การจัดสไตล์ตามแอตทริบิวต์ เป็นต้น
- เมื่อใช้
appearance: base-select และ ::picker(select) ก็สามารถ ควบคุมสไตล์ได้อย่างเต็มรูปแบบโดยยังคงการเข้าถึงและพฤติกรรมแบบเนทีฟไว้
- การใช้
sibling-index() และ attr() ช่วยให้ สร้างแอนิเมชันและการจัดสีแบบอิงข้อมูล ได้อย่างกระชับ
- การเปลี่ยนแปลงเหล่านี้หมายถึง การลดการพึ่งพา JavaScript และเป็น การเปลี่ยนกระบวนทัศน์ของการพัฒนา frontend ที่ช่วยเพิ่มการเข้าถึงและการบำรุงรักษา
ภาพรวมฟีเจอร์ใหม่ของ CSS
- ใน CSS ปี 2026 มีการเพิ่ม ฟีเจอร์ใหม่จำนวนมากสำหรับอินเทอร์แอกชันและแอนิเมชัน
appearance: base-select เปลี่ยนองค์ประกอบ <select> ให้เป็น โหมดที่ปรับแต่งได้select::picker(select) คือ pseudo-element ที่แสดงพื้นผิวของดรอปดาวน์ ซึ่งสามารถกำหนดสไตล์อย่างเงา เส้นขอบ และระยะห่างได้selectedcontent ใช้จัดสไตล์พื้นที่แสดงผลของตัวเลือกที่ถูกเลือก
- ฟีเจอร์ที่เกี่ยวกับการเลื่อน ก็ขยายเพิ่มขึ้นอย่างมาก
::scroll-button() คือ ปุ่มเลื่อนซ้ายขวา ที่ถูกสร้างให้อัตโนมัติในคอนเทนเนอร์ที่เลื่อนได้::scroll-marker และ ::scroll-marker-group ทำหน้าที่เป็น จุดแบ่งหน้า หรืออินดิเคเตอร์ภาพscroll-target-group และ :target-current ใช้ ไฮไลต์ลิงก์ที่สอดคล้องกับเซกชันที่กำลังมองเห็นอยู่โดยอัตโนมัติ
- ยังมีการเพิ่ม container query ตามสถานะการเลื่อน
- ผ่าน
container-type: scroll-state และ @container scroll-state(snapped: x) ทำให้ เปลี่ยนสไตล์ตามตำแหน่งการเลื่อน ได้
- มีการเพิ่มฟังก์ชัน tree counting และฟีเจอร์ อ้างอิงแอตทริบิวต์แบบระบุชนิดข้อมูล
sibling-index() และ sibling-count() จะคืนค่าลำดับและจำนวนขององค์ประกอบพี่น้องattr() สามารถอ่านค่าแอตทริบิวต์เป็น ชนิดข้อมูลอย่างสี และนำไปใช้กับพร็อพเพอร์ตี CSS ได้โดยตรง
@starting-style เป็นไวยากรณ์ทดลองสำหรับ กำหนดสไตล์ ณ จุดเริ่มต้นของแอนิเมชัน
เดโม: การปรับแต่งเนทีฟ HTML <select>
- องค์ประกอบ
<select> ให้ทั้งการเข้าถึงและโครงสร้างเชิงความหมาย แต่ก่อนหน้านี้ มีข้อจำกัดด้านการควบคุมสไตล์
- เมื่อใช้ฟีเจอร์ CSS ใหม่ ก็สามารถ ปรับแต่งได้เต็มรูปแบบโดยไม่ต้องใช้ JavaScript
- เปิดโหมดปรับแต่งด้วย
appearance: base-select
- กำหนดสไตล์พื้นผิวดรอปดาวน์ด้วย
select::picker(select)
- ฟังก์ชันที่เบราว์เซอร์จัดการให้อัตโนมัติ
- การจัดการ overflow: เลื่อนอัตโนมัติเพื่อไม่ให้ดรอปดาวน์หลุดออกนอกหน้าจอ
- การปรับตำแหน่ง anchor: เลือกตำแหน่งที่เหมาะสมที่สุดโดยอัตโนมัติตามพื้นที่ของ viewport
- การจัดการโฟกัสและการนำทางด้วยคีย์บอร์ด: รองรับปุ่ม Arrow, Enter, Escape
- ตัวเลือกแบบ rich content: สามารถมีเนื้อหาแบบมีโครงสร้าง เช่น ไอคอนและป้ายข้อความ
- ในเบราว์เซอร์ที่ยังไม่รองรับ จะ fallback เป็น
<select> ปกติ โดยไม่ต้องมี polyfill เพิ่มเติม
แอนิเมชันแบบไล่ลำดับด้วย sibling-index()
- สร้าง แอนิเมชันเลื่อนแบบต่อเนื่องตามลำดับ เมื่อเปิดตัวเลือกในดรอปดาวน์
sibling-index() จะคืนค่า ลำดับในบรรดาองค์ประกอบพี่น้อง (เริ่มจาก 1)
- ตัวอย่าง: ตัวเลือกแรกหน่วง
0s, ตัวที่สอง 0.2s, ตัวที่สาม 0.4s
- แม้มีการเพิ่มหรือลบองค์ประกอบ ก็จะ คำนวณเวลาใหม่ให้อัตโนมัติ ทำให้ดูแลรักษาง่าย
- ช่วยลดความซับซ้อนจากวิธีเดิมที่ต้องกำหนดเองด้วย
:nth-child() หรือ custom property
การจัดสไตล์แบบอิงข้อมูลด้วย attr()
- เมื่อใช้
attr() เวอร์ชันที่ระบุชนิดข้อมูล ก็สามารถนำค่าแอตทริบิวต์จาก HTML มาใช้กับสไตล์ได้โดยตรง
- ตัวอย่าง: อ่านแอตทริบิวต์
data-bg-color มาใช้เป็น background-color: attr(data-bg-color color, transparent)
- เมื่อระบุชนิดของแอตทริบิวต์ เบราว์เซอร์จะพาร์สค่าได้ถูกต้อง และยัง กำหนดสี fallback ได้
- ทำให้เกิดโครงสร้างการจัดสไตล์แบบ ยึดข้อมูลเป็นศูนย์กลาง ที่แก้เฉพาะสีใน HTML ก็พอ โดยไม่ต้องแก้ CSS
เปรียบเทียบดรอปดาวน์ที่ทำด้วย CSS กับเวอร์ชัน JavaScript
- หากสร้างดรอปดาวน์แบบเดียวกันด้วย JavaScript จะต้องใช้โค้ด มากกว่า 150 บรรทัด
- เวอร์ชัน CSS สามารถทำฟังก์ชันเดียวกันได้ด้วย
<select> เดียวและแอตทริบิวต์เพียงไม่กี่ตัว
- การเข้าถึงแบบเนทีฟ การโฟกัส และการควบคุมด้วยคีย์บอร์ดนั้น แพลตฟอร์มจัดการให้อัตโนมัติในระดับระบบ
อนาคตของ CSS และทิศทางการพัฒนา
- ฟีเจอร์ CSS ใหม่ทำให้ สร้าง UI ที่ซับซ้อนด้วยโค้ดเชิงประกาศที่เรียบง่าย ได้
- ด้วยความสามารถที่แพลตฟอร์มมีให้ในตัว จึงช่วย ลดโค้ดซ้ำซ้อนและการพึ่งพาไลบรารีภายนอก
- ใน ยุค AI โครงสร้างที่เรียบง่ายและเป็นเชิงประกาศแบบนี้ช่วยเพิ่ม ความเสถียรของการสร้างโค้ดอัตโนมัติ
- แนวทางที่แนะนำสำหรับการนำไปใช้จริง
- ทบทวน UI component ที่ยึด JavaScript เป็นหลัก เดิมใหม่บนพื้นฐาน CSS
- ทำ การทดสอบด้านการเข้าถึง ควบคู่กันเพื่อตรวจสอบความเข้ากันได้กับคีย์บอร์ดและ screen reader
- ติดตามสถานะการรองรับของเบราว์เซอร์อย่างต่อเนื่อง และค่อย ๆ นำมาใช้
- การเปลี่ยนแปลงเหล่านี้สะท้อนว่า CSS กำลังก้าวขึ้นมาเป็นเทคโนโลยีหลักของอินเทอร์แอกชันฝั่ง frontend
ยังไม่มีความคิดเห็น