COOL IT IDEAS AND STUFF

See the original english version Click here!

 

CSS ยังคงพัฒนาต่อไปเรื่อย ๆ มีความสามารถใหม่ ๆ ที่ทำให้การทำงานของเรารวดเร็ว, Clean และมีประสิทธิภาพมากขึ้น ด้วยการอัปเดตของ Browsers รุ่นล่าสุด (Baseline 2024) ที่ทำให้ Features หลายอย่างเริ่มใช้งานได้จริงในทุก Engines หลัก ๆ แล้ว และบทความจะมาแนะนำ 10 Features ใหม่ของ CSS ปี 2025 ที่ใช้ได้บนทุก Browsers

1. Scrollbar-Gutter & Scrollbar-Color

ปกติเมื่อ Browser แสดง Scrollbar พื้นที่ของ Layout อาจมีการขยับเพราะถูกเบียดกินพื้นที่ แต่ด้วย scrollbar-gutter คุณสามารถจอง Scrollbar Space ไว้ล่วงหน้าได้ตั้งแต่ยังไม่เริ่มเลื่อน:

นอกจากนี้ยังสามารถตกแต่ง Scrollbar ด้วย scrollbar-color:

สิ่งนี้จะช่วยให้แน่ใจได้ว่า การแสดงผลคงที่ และป้องกันไม่ให้ Layout ขยับเมื่อมีการใช้ Scrollbar

จุดเด่นของ Feature นี้:

• scrollbar-gutter จะทำให้ Layout ไม่ขยับเมื่อมีการใช้ Scrollbar
• scrollbar-color จะช่วยปรับแต่งโทนสีให้เข้ากับการออกแบบ โดยเฉพาะอย่างยิ่งสำหรับ UI แบบ Dark Mode หรือ UI ที่ออกแบบตาม Theme

2. ::target-text

::target-text จะช่วยไฮไลต์ข้อความที่ถูกอ้างอิงถึงจาก Internal Link (เช่น คลิก Anchor บน Page เดียวกัน):

สิ่งนี้จะทำให้ผู้อ่านสามารถมองเห็นข้อความเป้าหมายได้ทันที

จุดเด่นของ Feature นี้:

• ไฮไลต์ข้อความที่ Link ชี้ไป ทำให้ผู้ใช้เข้าใจในทันทีว่า ถูกพามาที่ตรงไหน โดยเฉพาะ Document หรือบทความที่ยาว ๆ

3. Ruby Layout (ruby-align & ruby-position)

ruby-align และ ruby-position ถือว่ามีความสำคัญสำหรับบางภาษาและบางข้อความกำกับขนาดเล็ก (Annotations) เพราะมันจะช่วยควบคุมการจัดวางตำแหน่งของ Annotation เล็ก ๆ (Ruby Text) เมื่อเทียบกับข้อความหลัก:

จุดเด่นของ Feature นี้:

• จำเป็นต่อการพิมพ์ภาษาของเอเชียตะวันออก (อย่างเช่น ภาษาญี่ปุ่น จีน เกาหลี) ที่ต้องมี Annotation เล็ก ๆ (Ruby Text) ที่ด้านบนหรือด้านข้างข้อความ
• ใช้กับสื่อการเรียนการสอน หรือเอกสารอ้างอิงที่ต้องมีคำอธิบายประกอบ

4. Relative Color Syntax & light-dark()

CSS รุ่นใหม่มักมีการรองรับ Relative Color Syntax ที่ให้คุณสามารถปรับค่าต่าง ๆ ได้ เช่น ความสว่างหรือความอิ่มตัวของสี โดยอิงจากสีที่มีอยู่แล้ว นอกจากนี้ light-dark() ยังช่วยให้สามารถสลับระหว่างค่าสีของ Light Mode และ Dark Mode ได้ง่ายและสะดวกมากขึ้น:

คุณยังสามารถใช้ <color-interpolation-method> เพื่อสร้าง Gradient ที่เนียนขึ้นใน Color Space ต่าง ๆ ได้ด้วย

จุดเด่นของ Feature นี้:

• Relative Color Syntax ทำให้สามารถปรับค่าสีแบบ Dynamic ได้ เช่น ความอิ่มตัวของสีและความสว่างจากสีที่อ้างอิง
• light-dark() จะช่วยสลับโทนสีสำหรับ Theme หรือ Dark Mode ได้ง่ายและชัดเจน

5. Exclusive Accordions

ปกติ Accordions จะต้องใช้ JavaScript เพื่อให้เปิดได้ทีละ Panel แต่ตอนนี้ <details> ของ HTML จะช่วยให้คุณสามารถทำสิ่งนี้ได้ง่ายขึ้น ตัวอย่าง Code สั้น ๆ สำหรับทำให้เปิด Panel ได้ทีละอัน (MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/name):

จุดเด่นของ Feature นี้:

• ช่วยให้แสดงทีละ Panel ได้โดยไม่ต้องใช้ JavaScript ที่ซับซ้อน
• เหมาะสำหรับ FAQ, Menus หรือข้อมูลที่ต้องการให้เปิดทีละส่วน

6. content-visibility

content-visibility จะช่วยเลื่อนการ Render ของ Element ที่อยู่นอก Screen ออกไป จนกว่าจะ Scroll ไปถึง:

ทำให้การประมวลผลตอน Load Page แรกใช้ Resource น้อยลง และเพิ่มประสิทธิภาพบน Page ที่ยาวได้ดีขึ้น

จุดเด่นของ Feature นี้:

• ช่วยเลื่อนการ Render Element ที่อยู่นอก Screen ทำให้ Page สามารถ Load ได้เร็วขึ้น
• เพิ่มความเร็วและลดการใช้ Memory โดยเฉพาะอย่างยิ่งบนโทรศัพท์มือถือ

7. font-size-adjust

ถ้า Custom Font ไม่สามารถใช้งานได้ Browsers จะสลับไปใช้ Font อื่นแทน ซึ่งมักทำให้ Layout เพี้ยน แต่ font-size-adjust ช่วยให้ขนาดข้อความยังคงไม่เปลี่ยนแปลงและยังคงอ่านข้อความได้ดี:

สิ่งนี้ช่วยรักษาความใกล้เคียงของค่า x-height และความอ่านง่าย แม้ต้องใช้ Font สำรอง

จุดเด่นของ Feature นี้:

• รักษาความสม่ำเสมอของข้อความให้ใกล้เคียงกันแม้ Custom Font จะ Load ไม่ทันหรือ Load ช้า
• ช่วยรักษาความชัดเจนของความอ่านง่ายและการออกแบบ ด้วยการจับคู่ ค่า x-height ของ Font สำรอง

8. transition-behavior

จากเดิมที่เรามีเพียง transition-timing-function ที่มีประโยชน์มาก แต่ตอนนี้เรามี transition-behavior ที่จะช่วยเพิ่มการควบคุม Animations ไม่ว่าจะเป็น Reverse หรือ Pause Transition โดยไม่ต้องพึ่ง JavaScript ทำให้ UI ดู Smooth และมีความยืดหยุ่นมากขึ้น:

จุดเด่นของ Feature นี้:

• ขยายขอบเขตความสามารถของ Transition ให้มีความซับซ้อนมากขึ้นโดยไม่ต้องเขียน Script ให้มากมาย
• มีประโยชน์ต่อการสร้าง UI Effects, Interactive Components และ Animation ที่มีรูปแบบเฉพาะ

9. CSS @property & Stepped Value Functions

@property จะช่วยให้สามารถประกาศ Custom Properties พร้อม Predefined Syntax, Inheritance Rules และ Initial Values ได้:

นอกจากนี้ยังมี Functions ใหม่ ๆ เช่น round(), mod(), และ rem() สำหรับการคำนวณโดยตรงใน CSS โดยไม่ต้องพึ่ง JavaScript หรือ Preprocessor อีกต่อไป

จุดเด่นของ Feature นี้:

• @property จะช่วยเปลี่ยน Custom Properties ให้เป็น Declared Variables พร้อม Types, Defaults และ Inheritance Rules
• Functions อย่าง round(), mod(), และ rem() จะช่วยให้การคำนวณทางคณิตศาสตร์ใน CSS เป็นเรื่องง่ายขึ้น โดยไม่ต้องใช้ Preprocessor หรือ JavaScript

10. offset-position & offset-path

สำหรับ Motion Design ที่ซับซ้อน offset-position และ offset-path จะช่วยให้คุณสามารถ Animate Element ได้ตามเส้นทางที่กำหนดเองได้ โดยที่ไม่ต้องใช้ JavaScript Frameworks:

ด้วย Properties เหล่านี้ คุณจะสามารถสร้าง Animation ที่สวยงามซึ่งนำทางด้วย SVG Path หรือ Curve ง่าย ๆ

จุดเด่นของ Feature นี้:

• รองรับการเคลื่อนไหวและ Animate ไปตามเส้นทางได้ด้วย CSS ล้วน ๆ
• เหมาะสำหรับ Interactive Elements, Motion Graphics หรือนำความสนใจของผู้ใช้ไปตามเส้นโค้ง

สรุป

และนี่ก็เป็น 10 Features ใหม่ของ CSS ปี 2025 ที่ใช้ได้บนทุก Browsers โดย Features เหล่านี้ ที่ไม่ต้องพึ่ง JavaScript ให้มากมาย อีกทั้งยังช่วยให้การสร้าง Layout หรือ Interactive UI ง่ายขึ้น เร็วขึ้น และบำรุงรักษาง่ายขึ้น แนะนำให้ลองนำไปใช้ดู แล้วคุณจะพบว่า Project ของคุณมีประสิทธิภาพและสวยงามขึ้น

ที่มา: https://medium.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความล่าสุด

• 10 เทคนิค JavaScript ที่จะช่วยเปลี่ยน Dashboard ของคุณให้แตกต่าง
• 8 Command Line Tools ที่ทำให้การใช้ Terminal สนุกกว่าที่คิด
• 8 GitHub Repos ที่ Developer ควร Bookmark ไว้ก่อนที่จะสมัครงาน