บทความ IT เจ๋งๆ
10 CSS Features ใหม่ในปี 2025 ที่พร้อมใช้งานในทุก Browsers
31-ต.ค.-25
คัมภีร์เทพ IT
CSS ยังคงมีวิวัฒนาการอยู่เสมอด้วยความสามารถใหม่ ๆ ที่ช่วยให้การทำงานของเราเร็วขึ้น Clean ขึ้น และทรงพลังขึ้น ตอนนี้มี Features ใหม่หลายตัวที่สามารถใช้งานได้ใน Browsers หลักทั้งหมดแล้ว และนี่ก็เป็น 10 CSS Features ใหม่ในปี 2025 ที่พร้อมใช้งานในทุก Browsers
1. scrollbar-gutter & scrollbar-color
เมื่อ Browser แสดง Scrollbar พื้นที่ของ Layout อาจถูกดันหรือเลื่อน เพราะมีการใช้พื้นที่ใหม่ เมื่อใช้ scrollbar-gutter คุณสามารถสงวนพื้นที่สำหรับ Scrollbar ไว้ล่วงหน้าได้ ก่อนที่ User จะเลื่อน:
นอกจากนี้ คุณยังสามารถปรับ Style ของ Scrollbar ได้ด้วย scrollbar-color:
เทคนิคเหล่านี้ จะช่วยให้ลักษณะโดยรวมของหน้า Web คงที่ และป้องกัน Layout เปลี่ยนแปลงเมื่อ Scrollbar ปรากฏ
ประโยชน์ของมัน:
- scrollbar-gutter จะช่วยรักษา Layout มีความเสถียร โดยการสงวนพื้นที่สำหรับ Scrollbar ไว้ล่วงหน้า เพื่อป้องกันการเคลื่อนเมื่อ Scrollbar ปรากฏ
- scrollbar-color จะช่วยให้คุณปรับแต่ง Style ของ Track และ Thumb เพื่อให้สอดคล้องกับ Design โดยเฉพาะอย่างยิ่งสำหรับ UI ที่มีสีเข้มหรือ Theme สีต่าง ๆ
2. ::target-text
::target-text จะช่วยเน้นข้อความที่ถูกเชื่อมโยง (Anchor) ใน Page เดียวกัน (เช่น เมื่อคลิก Link ภายใน Page เดียวกัน)
เมื่อ User คลิก Link ที่ชี้ไปยังข้อความใด ข้อความนั้นจะถูกเน้นทันที ทำให้ผู้ใช้งานมองเห็นจุดเป้าหมายที่พวกเขาไปถึงได้ชัดเจน
ประโยชน์ของมัน:
- เน้นข้อความที่ที่ถูกอ้างอิงโดยลิงก์ Anchor ทำให้ User ทราบได้ทันทีว่า เขามาถึงจุดไหนแล้วในเอกสารหรือบทความยาว ๆ
3. Ruby Layout (ruby-align & ruby-position)
สำหรับภาษาบางภาษา หรือเนื้อหาที่มีคำอธิบายประกอบ เช่น ภาษาจีน ญี่ปุ่น หรือภาษาอื่นที่ใช้ Ruby Annotation — ruby-align และ ruby-position จะช่วยให้คุณควบคุมการวางตำแหน่งของข้อความเสริม (Ruby Text) เมื่อเทียบกับข้อความหลักได้
ประโยชน์ของมัน:
- จำเป็นสำหรับการพิมพ์ในภาษาเอเชียตะวันออก ช่วยให้คุณควบคุมตำแหน่งข้อความเสริม (Ruby Text) ได้อย่างแม่นยำเหนือหรือข้างข้อความหลัก
- มันใช้ได้ดีสำหรับ Inline Annotations ในสื่อการศึกษาหรือเอกสารอ้างอิง
4. Relative Color Syntax & light-dark()
วิธีจัดการสีใน CSS สมัยใหม่รวมถึง Relative Color Syntax ที่ช่วยให้คุณปรับคุณสมบัติเช่น ความสว่าง (Lightness) หรือความอิ่มของสี (Saturation) จากสีต้นแบบ นอกจากนี้ light-dark() ยังช่วยให้สลับค่าสีสว่าง–สีเข้มได้อย่างง่ายดาย
นอกจากนี้ คุณยังสามารถใช้ <color-interpolation-method> เพื่อสร้างการไล่เฉดสี (Gradient) ที่เรียบเนียนขึ้นในพื้นที่สีต่าง ๆ ได้
ประโยชน์ของมัน:
- Relative Color Syntax จะช่วยให้สามารถปรับเปลี่ยนคุณสมบัติต่าง ๆ ของสีโดยอ้างอิงจากสีต้นแบบ
- light-dark() ช่วยทำให้การสลับสีระหว่างค่าสีอ่อนและค่าสีเข้มเป็นเรื่องง่าย ซึ่งเป็นสิ่งจำเป็นสำหรับการสร้าง Theme หรือ Dark Mode
5. Exclusive Accordions
ปกติแล้ว Accordion มักจะเขียนด้วย JavaScript เพื่อให้เปิดได้ทีละ Panel เท่านั้น แต่ด้วย <details> ใน HTML คุณสามารถตั้งค่าให้ Panels มีความเป็น Exclusive (เปิดได้ทีละ Panel) ได้ง่ายขึ้น (https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/name)
ในตัวอย่างข้างต้น เมื่อ details ต่าง ๆ มี name เดียวกัน พวกมันจะถูกจัดกลุ่ม เพื่อให้เปิดได้เพียงอันเดียวในแต่ละครั้ง
ประโยชน์ของมัน:
- ช่วยให้แสดงได้ทีละ Panel โดยไม่ต้องเขียน Logic JavaScript ซับซ้อน
- เหมาะกับ FAQ, Menus หรือสถานการณ์ใดก็ตามที่ต้องการให้เปิดได้ทีละรายการ
6. content-visibility
content-visibility จะช่วยให้ Browser ข้ามการ Render ของ Elements ที่อยู่นอกหน้าจอ (Off-Screen) จนกว่าจะมีการเลื่อนเข้ามาดู
วิธีนี้จะช่วยลดภาระการ Render เริ่มต้น ทำให้หน้า Web มีการ Load ที่เร็วขึ้น โดยเฉพาะใน Page ที่ยาว ๆ
ประโยชน์ของมัน:
- ชะลอการ Render ของ Elements นอกหน้าจอ ซึ่งจะช่วยเพิ่มประสิทธิภาพสำหรับหน้า Web ที่ยาว ๆ หรือ Layout ที่ซับซ้อน
- เพิ่มความเร็วและลดการใช้งาน Memory โดยเฉพาะบน Mobile Devices
7. font-size-adjust
เมื่อ Font ที่กำหนดเอง (Custom Font) ไม่สามารถ Load ได้ Browser จะเลือก Font สำรองตัวอื่น ซึ่งอาจทำให้ Layout ผิดเพี้ยน แต่ font-size-adjust จะช่วยรักษาขนาดตัวอักษรและความชัดเจนของข้อความให้คงที่
มันช่วยให้ x-height (ความสูงของตัวอักษร) และความชัดเจนของตัวอักษรให้ใกล้เคียงกันเมื่อใช้ Font สำรอง
ประโยชน์ของมัน:
- ทำให้ลักษณะของข้อความคงที่เมื่อ Font หลัก Load ไม่ได้หรือช้า
- ช่วยรักษาความชัดเจนของการอ่านและ Design โดยการจับคู่ x-height ของ Font สำรอง
8. transition-behavior
ถึงแม้ว่า transition-timing-function จะมีประโยชน์กับเรามาก แต่ transition-behavior จะช่วยให้ควบคุม Animations ได้มากขึ้น เช่น การย้อนกลับ (Reverse) หรือหยุดชั่วคราว (Pause) Transitions โดยไม่ต้องพึ่ง JavaScript ที่ซับซ้อน ซึ่งจะช่วยเปิดทางให้มีการโต้ตอบกับ UI ที่ลื่นไหลยิ่งขึ้นและสถานการณ์การใช้ Animation ที่ซับซ้อนกว่าปกติ
ประโยชน์ของมัน:
- ขยายความสามารถของ Transition ทำให้สามารถย้อนกลับหรือสร้าง Transition ที่ซับซ้อนโดยไม่ต้องใช้ Script จำนวนมาก
- เหมาะสำหรับ UI Effects ที่มีความละเอียดซับซ้อน, Interactive Components และสถานการณ์การใช้ Animation ที่เฉพาะเจาะจง
9. CSS @property & Stepped Value Functions
@property จะทำให้คุณสามารถประกาศ Custom Properties พร้อม Predefined Syntax, Inheritance Rules และค่าตั้งต้น (Initial Value) ได้
นอกจากนี้ เรายังได้ Stepped Value Functions เช่น round(), mod(), และ rem() ที่ช่วยให้คำนวณใน CSS ได้ง่ายขึ้นโดยไม่ต้องพึ่ง JavaScript หรือ Preprocessor
ประโยชน์ของมัน:
- @property จะช่วยทำให้ Custom Properties มีลักษณะเป็นตัวแปรที่ประกาศอย่างเต็มที่ พร้อม Type, Defaults, และ Inheritance Rules
- Functions อย่าง round(), mod(), และ rem() จะช่วยให้สามารถคำนวณทางคณิตศาสตร์ใน CSS ได้โดยตรง, ลดการพึ่งพา Preprocessor หรือ JavaScript
10. offset-position & offset-path
สำหรับการออกแบบการเคลื่อนไหวที่ซับซ้อน offset-position และ offset-path จะช่วยให้คุณ Animate Elements ไปตามเส้นทางที่กำหนดไว้ (เช่น Curve หรือ SVG Path) โดยไม่ต้องใช้ JavaScript Frameworks ขนาดใหญ่
ด้วย Properties เหล่านี้ คุณสามารถสร้าง Animation ที่ดูเป็นมืออาชีพ ซึ่งนำทางด้วย SVG Path หรือ Curve ง่าย ๆ
ประโยชน์ของมัน:
- อนุญาตให้ทำการเคลื่อนไหวตามเส้นทาง (Path-based Motion) และ Animation ได้โดย CSS แบบเพียว ๆ
- เหมาะสำหรับ Interactive Elements, Motion Graphics หรือการชี้นำสายตา User ไปตามเส้น Curve
สรุป
และนี่ก็คือ 10 CSS Features ใหม่ในปี 2025 ที่พร้อมใช้งานแล้วใน Browsers ทุกตัว ให้เราสามารถละทิ้ง Workaround ด้วย JavaScript ได้มากขึ้น และสร้าง Layouts และ Interactions ที่เรียบง่ายขึ้น เร็วขึ้น และดูแลรักษาได้ง่ายขึ้น ลองใช้งานพวกมันดู แล้วคุณจะเห็นว่า Project ของคุณก้าวหน้าไปอีกระดับในเรื่องประสิทธิภาพและความงดงาม ขอให้คุณสนุกกับการทดลองใช้งานพวกมัน
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด