ฟีเจอร์ฟรอนต์เอนด์ใหม่สำหรับนักออกแบบในปี 2025

• ด้วยความก้าวหน้าของเทคโนโลยีเว็บสมัยใหม่ งานหลายอย่างที่ในอดีตต้องทำด้วย JavaScript ตอนนี้สามารถทำได้ง่าย ๆ ด้วย HTML และ CSS
• เทคโนโลยีใหม่ ๆ เช่นการจัดสไตล์แบบยึดคอมโพเนนต์ การจัดสไตล์องค์ประกอบแม่ และการกำหนดสีแบบสัมพัทธ์ สามารถใช้งานได้อย่างกว้างขวางในหลายเบราว์เซอร์
• ช่วยให้นักออกแบบและนักพัฒนาสร้าง UI คอมโพเนนต์ได้ง่ายขึ้นและมีประสิทธิภาพมากขึ้น

CSS Container Queries และ Style Queries

• จัดสไตล์แบบยึดคอมโพเนนต์ได้
  • ใช้ query กับข้อมูลความกว้างและสไตล์ของคอนเทนเนอร์เพื่อปรับใช้สไตล์ CSS
  • มีประโยชน์สำหรับการจัดสไตล์คอมโพเนนต์ที่นำกลับมาใช้ซ้ำได้และมีหลายรูปแบบ
  • อ้างอิง: แนะนำ CSS Style Queries

การจัดสมดุลข้อความ (text-wrap: balance)

• รักษาสมดุลทางตัวอักษร
  • คำนวณอัตโนมัติเพื่อกระจายข้อความให้สมดุล เช่น ในหัวเรื่องและชื่อการ์ด
  • อ้างอิง: คู่มือของ Ahmad Shadeed

การปรับขนาดช่องกรอกฟอร์มอัตโนมัติ

• ทำให้ขนาดอินพุตเป็นอัตโนมัติ
  • ขนาดของช่องกรอกข้อความหรือเมนูเลือกจะปรับให้พอดีกับคอนเทนต์โดยอัตโนมัติ
  • ทำได้ด้วย CSS เพียงบรรทัดเดียว
  • อ้างอิง: คำอธิบายของ Adam Argyle

ค้นหาเนื้อหาที่ซ่อนไว้ได้ (hidden=until-found)

• เพิ่มการเข้าถึงของ UI
  • เนื้อหาที่ซ่อนไว้ เช่น ส่วนแอคคอร์เดียนที่พับอยู่ สามารถถูกค้นพบได้จากการค้นหาในหน้าและจากเสิร์ชเอนจิน
  • อ้างอิง: คู่มือของ Joey Arhar

รองรับสีความละเอียดสูง (OKLCH, OKLAB)

• รองรับสีมากขึ้น 50%
  • สเปกสีใหม่ที่ออกแบบโดยอิงจากการรับรู้สีของมนุษย์
  • เหมาะกับดีไซน์ซิสเต็มและกราเดียนต์
  • อ้างอิง: คำอธิบายของ Vitaly Friedman

CSS Relative Colors

• คำนวณสีจากสีเดิม
  • ใช้คีย์เวิร์ด from เพื่อปรับความสว่างของสี คำนวณสีคู่ตรงข้าม และอื่น ๆ
  • อ้างอิง: โค้ดสไนเป็ตของ Adam Argyle

View Transitions API

• การเปลี่ยนหน้าจอที่ลื่นไหล
  • เมื่อต้องย้ายจากหน้าจอเดิมไปยังหน้าจอใหม่ สามารถใช้ CSS animation เพื่อสร้างการเปลี่ยนผ่านที่นุ่มนวล
  • รองรับทั้งการเปลี่ยนภายในเอกสารเดียวและระหว่างสองเอกสาร
  • อ้างอิง: คู่มือของ Bramus Van Damme

CSS Scroll Snap

• มอบประสบการณ์การเลื่อนที่แม่นยำ
  • สามารถตั้งค่าสcroll container เพื่อให้การเลื่อนหยุดตรงกับรายการคอนเทนต์ที่กำหนด
  • อ้างอิง: คู่มือของ Ahmad Shadeed

การจัดสไตล์องค์ประกอบแม่ (:has)

• จัดสไตล์องค์ประกอบแม่ตามสถานะขององค์ประกอบลูก
  • ปรับสไตล์ตามสถานะขององค์ประกอบอื่นได้ ไม่ได้จำกัดแค่ความสัมพันธ์แบบแม่-ลูกเท่านั้น
  • อ้างอิง: คู่มือของ Josh W. Comeau

ฟีเจอร์เด่นอื่น ๆ

• ปรับปรุงการจัดสไตล์สถานะอินพุต: ใช้ :user-valid, :user-invalid เพื่อให้ฟีดแบ็กหลังผู้ใช้แก้ไขข้อมูล
• ปรับแต่งคีย์บอร์ดบนมือถือ: ใช้ inputmode และ enterkeyhint เพื่อปรับปรุงคีย์บอร์ดเสมือน
• องค์ประกอบ HTML <dialog>: ใช้สร้าง modal และ popover ที่เข้าถึงได้

บทสรุป

• เทคโนโลยีฟรอนต์เอนด์ใหม่ที่ทั้งใช้งานได้จริงและทันสมัย กำลังสร้างผลกระทบเชิงนวัตกรรมต่อการออกแบบ UI และ UX
• ฟีเจอร์ที่จะตามมาในอนาคต: เลย์เอาต์ masonry, การปรับแต่ง <selectmenu>, การจัดแนว text box และอื่น ๆ
• ขอขอบคุณนักพัฒนาทุกคนที่ช่วยผลักดันการพัฒนาเว็บแพลตฟอร์ม และหวังว่าบทความนี้จะเป็นประโยชน์ต่อการพัฒนาโปรเจกต์และแอปพลิเคชันของคุณ ขอให้สนุกกับการทำงาน!

[savvykang]

อย่างที่มีคนอื่นชี้ไว้ ผู้เขียนไม่ได้คำนึงถึงความเข้ากันได้ระหว่างเบราว์เซอร์หรือความสม่ำเสมอของการทำงานเลย นอกจากเรื่องนี้แล้ว ยังมีกรณีที่การติดตั้งใช้งานหรือการทำงานแตกต่างกันไปในแต่ละเบราว์เซอร์ จึงไม่สามารถเลือกใช้ฟีเจอร์ใหม่ได้แบบเหมารวม ต่อให้ Chrome จะมีส่วนแบ่งการใช้งานสูงแค่ไหน แต่เพราะยังมี iOS อยู่ อย่างน้อยก็ควรพิจารณาด้วยว่ามันทำงานได้ดีบน Safari หรือไม่

[n00nietzsche]

เห็นด้วยครับ.. แต่คงเอาไปใช้กับโปรดักต์แบบไม่คิดหน้าคิดหลังได้ยาก

[cichol]

Safari, Firefox ยังไม่รองรับ

• ปรับขนาดฟิลด์กรอกฟอร์มอัตโนมัติ
• ค้นหาเนื้อหาที่ซ่อนไว้ได้ (hidden=until-found)

Firefox ยังไม่รองรับ

• View Transitions API

ฟีเจอร์ใหม่ฝั่งฟรอนต์เอนด์นั้น ในทางปฏิบัติมองว่าเป็นฟีเจอร์ใหม่ของ Chrome เพียงเจ้าเดียวจะเข้าใจได้ง่ายกว่า
กรณีสุดโต่งอย่าง OffscreenCanvas ก็มีที่ใช้เวลานานถึง 5 ปีเช่นกัน (Chrome ปี 2018, Safari ปี 2023)

[kyc1682]

Container Query กับ :has ใช้งานสะดวกมาก