บทความ IT เจ๋งๆ

จากการอัปเดตอย่างต่อเนื่องของ CSS ทำให้มันมีประสิทธิภาพมากขึ้น ใช้งานง่าย และสนุกขึ้นกว่าเดิม ดังนั้นเรามาดูกันว่าCSS มีอะไรใหม่ ๆ บ้าง และทำไมการเปลี่ยนแปลงเหล่านี้ถึงสำคัญกับ Developer อย่างคุณ กับ 7 Features ใหม่ของ CSS ที่คุณควรรู้จักเอาไว้

1. จัดองค์ประกอบไว้ตรงกลางได้ง่ายขึ้นโดยไม่ต้องใช้ Flexbox หรือ Grid

ก่อนหน้านี้ การจัด Elements ด้วย CSS ให้อยู่ตรงกึ่งกลาง ดูจะเป็นเรื่องที่ค่อนข้างยุ่งยาก ซึ่งคุณจะต้องใช้ Flexbox หรือ Grid เพื่อทำสิ่งนั้น

แต่ตอนนี้คุณไม่จำเป็นใช้พวกมันแล้ว เนื่องจาก CSS ได้เพิ่ม Property ใหม่อย่าง align-content ที่จะช่วยให้คุณสามารถจัดวาง Elements ให้อยู่ตรงกลางได้ง่ายขึ้น โดยไม่ต้องใช้ Container พิเศษแต่อย่างใด

มันดูง่ายขึ้น คุณเห็นด้วยไหม

2. ตัวแปร CSS ฉลาดขึ้นด้วย @property

ตัวแปร (Variables) ใน CSS มีประโยชน์มากอยู่แล้ว แต่ @property จะช่วยทำให้มันมีความยืดหยุ่นและปลอดภัยยิ่งขึ้น

ตอนนี้คุณสามารถกำหนด Custom Properties ด้วย Types, Inheritance Rules และ Default Values ที่ต้องการได้แล้ว

ก่อนที่จะมี @property, Custom Properties นั้นทรงพลัง แต่ยังขาดในด้านของ Type Safety และ Constraints ตัวอย่างเช่น:

ถึงแม้วิธีนี้จะใช้การได้ แต่ตัวแปรเหล่านั้นก็ยังมีจุดที่อาจเกิดปัญหาได้ในบางกรณี

หากมีคนกำหนด Invalid Value โดยไม่ได้ตั้งใจ เช่น --rotation: blue; Code จะเกิดการขัดข้องหรือทำงานผิดปกติ

ตอนนี้ คุณสามารถประกาศ Custom Properties ด้วย Syntax, Initial Value และ Inheritance Rules

วิธีการทำงานมีดังนี้:

• syntax: ระบุ Type ของ Value ที่ Property สามารถใช้ได้ เช่น สำหรับ --rotation ก็จะเป็น <angle> (เช่น 45deg หรือ 1turn)
• inherits: กำหนดว่า Property ควรจะ Inherit ค่าจาก Parent Element หรือไม่ ซึ่งในกรณีนี้ เราตั้งค่าเป็น false
• initial-value: กำหนดค่า Default หากไม่มีการกำหนดค่าอื่น ๆ ในที่นี้ ค่า Default คือ 0deg

3. Starting-Style Rule

เมื่อเปิด Webpage เชื่อว่า Users น่าจะต้องการประสบการณ์ที่ราบรื่น

อย่างไรก็ตาม Developers มักจะเผชิญกับปัญหาที่รู้จักกันดีของ "Flash Of Unstyled Content" (FOUC) หรือการแสดงผลที่ไม่สม่ำเสมอในขณะที่รอให้ Styles ถูกนำมาใช้

Starting-Style Rule ตัวใหม่นี้ ถือเป็นตัวเปลี่ยนเกมในการแก้ไขปัญหานี้

Rule นี้จะช่วยทำให้แน่ใจว่า องค์ประกอบต่าง ๆ มีลักษณะเฉพาะตั้งแต่ช่วงเวลาที่แสดงผล โดยหลีกเลี่ยงการเปลี่ยน Layout และรักษาความสม่ำเสมอของ Visual

วิธีการทำงานมีดังนี้:

ถ้ามี Modal Popup ปกติเราต้องใช้ Inline Styles เพื่อซ่อนมันไว้ก่อน แต่ตอนนี้สามารถใช้ @starting-style แทนได้

4. ฟังก์ชันเกี่ยวกับการคำนวณใหม่ใน CSS

CSS อนุญาตให้มีการคำนวณแบบง่าย ๆ ด้วย calc() Function แต่ความสามารถของมันค่อนข้างจำกัด

แต่จากการอัปเดตล่าสุด นำเสนอชุด Math Functions ใหม่ รวมถึง round(), mod() และ rem()

วิธีเดิม: การคำนวณทางคณิตศาสตร์ถูกจำกัดด้วย calc()

Math Functions ขั้น Advance

Math Functions ของ CSS ใหม่ เช่น round(), mod() และ rem() ซึ่งจะช่วยแก้ไขปัญหาได้มากขึ้น 

มาดูการทำงานของ Functions เหล่านี้กัน:

5. จัดการ Light และ Dark Mode ได้ง่ายขึ้น

การจัดการ Light และ Dark Themes สำหรับ Website เคยเป็นเรื่องที่ยุ่งยากซับซ้อน

Developers มักต้องใช้ Media Queries เพื่อกำหนด Styles แยกกัน ซึ่งทำให้ Code มีความซ้ำซ้อนและ Maintain ยาก

แต่ตอนนี้ light-dark() Function ของ CSS ได้เปลี่ยนแนวทางการจัดการ Theme ไปตลอดกาล

วิธีเดิม: ใช้ Media Queries เพื่อจัดการ Theme

วิธีใหม่: ใช้ light-dark()

วิธีการทำงานของมัน มีดังนี้:

• ค่าแรก: ใช้เป็น Style สำหรับ Light Mode (ในกรณีนี้คือ white สำหรับ background-color)
• ค่าที่สอง: ใช้เป็น Style สำหรับ Dark Mode (ในกรณีนี้คือ black สำหรับ background-color)

6. ปรับปรุงการตรวจสอบข้อมูลใน Form ด้วย Pseudo-Classes ใหม่

Form เป็นหัวใจสำคัญของการโต้ตอบของ User บน Web แต่การที่จะทำให้ User กรอกข้อมูลถูกต้องถือเป็นเรื่องที่ท้าทาย

ก่อนหน้านี้ CSS เคยมี Pseudo-Classes เช่น :valid และ :invalid สำหรับตรวจสอบข้อมูลใน Form แต่บางครั้ง พวกมันก็ไม่ค่อยมีความยืดหยุ่นเสมอไป

แต่ตอนนี้ CSS มี Pseudo-Classes ใหม่คือ :user-valid และ :user-invalid ซึ่งจะช่วยให้การตรวจสอบ Form มีความเป็นธรรมชาติมากขึ้น

วิธีเดิม: การตรวจสอบแบบ Static ด้วย :valid และ :invalid

ก่อนหน้านี้ เราสามารถใช้ :valid และ :invalid เพื่อตรวจสอบค่าใน Form ได้

แต่ปัญหาคือ :valid และ :invalid จะทำงานทันทีที่ Page เริ่ม Load แม้ User จะยังไม่ได้พิมพ์อะไรเลย

วิธีใหม่: ใช้ :user-valid และ :user-invalid

Pseudo-Classes อย่าง :user-valid และ :user-invalid จะถูกใช้เมื่อ User เริ่มกรอกข้อมูลเท่านั้น ซึ่งวิธีนี้ Style จะเปลี่ยนแปลงเฉพาะเมื่อ User โต้ตอบกับ Fields มันจะลดปัญหาการตรวจสอบก่อนเวลาอันควร

7. สร้างขนาดองค์ประกอบ Animation ได้ดีขึ้นด้วย Interpolate-Size

การสร้าง Animation ให้กับ ความสูง (Height), ความกว้าง (Width) หรือ Padding เป็นเรื่องที่ยุ่งยากเสมอใน CSS

interpolate-size Property ใหม่ จะเปลี่ยนแปลงวิธีการทำงานของขนาด Animation

วิธีเดิม: การใช้ค่าสูงสุด หรือ JavaScript

ก่อนที่จะมี interpolate-size ขนาด Animation ใน CSS นั้นมีข้อจำกัด Developers ส่วนใหญ่มักใช้:

หรือ JavaScript Code แบบนี้:

วิธีใหม่: ใช้ interpolate-size

• Browser จะคำนวณขนาดเริ่มต้นและขนาดสุดท้ายให้โดยอัตโนมัติ แม้กระทั่งสำหรับค่าอัตโนมัติ
• การเปลี่ยนขนาดจะราบรื่นขึ้น ไม่ว่าภายใน Elements จะมี Content มากแค่ไหน

การอัปเดต CSS เหล่านี้สามารถใช้งานได้บน Browser หลักทั้งหมด ไม่ว่าจะเป็น Chrome, Firefox, Safari หรือ Edge คุณสามารถเริ่มใช้คุณสมบัติเหล่านี้ได้ทันที

สรุป

และนี่ก็เป็น 7 Features ใหม่ของ CSS ที่คุณควรรู้จักเอาไว้ ด้วย Features ใหม่เหล่านี้ จะช่วยทำให้การพัฒนา Web ง่ายขึ้น ทรงพลังขึ้น และสนุกขึ้น ลองใช้งานพวกมันดู แล้วคุณจะหลงรัก CSS มากขึ้นกว่าเดิม

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

 

 

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

 

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

 

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

• 15 Open Source Projects ที่ Developer ควร Bookmark ไว้
• 8 Chrome Extensions ที่ช่วยให้คุณเป็น Web Developers มืออาชีพ
• 8 Python Libraries ที่ไม่ค่อยมีใครรู้จัก แต่มีประโยชน์อย่างคาดไม่ถึง