อัปเดตฟีเจอร์ CSS ใหม่ล่าสุดที่นักพัฒนาเว็บต้องรู้

อัปเดตความเคลื่อนไหววงการ CSS

วงการ CSS มีของเล่นใหม่มาให้เราลองใช้กันอีกแล้วครับ รอบนี้มีทั้งฟีเจอร์ช่วยจัดการหน้าตาเว็บและการเขียนโค้ดให้สะอาดขึ้น ซึ่งจะช่วยให้ชีวิตนักพัฒนาอย่างเราสะดวกสบายกว่าเดิมแน่นอน

การทำ Tooltip ให้ตอบสนองไว

หลายคนมักเจอปัญหา Tooltip (กล่องข้อความที่เด้งขึ้นมาเวลาเอาเมาส์ไปชี้) เด้งรบกวนสายตาเกินไป นักพัฒนาแนะนำว่าเราควรตั้งค่าให้มันหน่วงเวลาเล็กน้อยก่อนจะแสดงผล แต่ถ้าจะปิดก็ต้องปิดทันที เพื่อไม่ให้มันเด้งไปมาจนน่ารำคาญ ซึ่งปัจจุบันเริ่มมีการใช้เทคนิคใหม่ที่ช่วยให้จัดการเรื่องนี้ได้ง่ายขึ้นแล้ว

ใช้ Geolocation ได้ง่ายขึ้น

ปกติการดึงข้อมูลตำแหน่งที่ตั้ง (Geolocation) จากเบราว์เซอร์นั้นทำได้ยากและซับซ้อน แต่ตอนนี้มีฟีเจอร์ใหม่ที่เข้ามาช่วยแก้ปัญหาตรงนี้ แม้ว่าตอนนี้จะรองรับแค่ใน Chrome แต่เราก็สามารถเขียนโค้ดแบบเผื่อไว้ (Progressive Enhancement) เพื่อให้เว็บยังทำงานได้ปกติในทุกเบราว์เซอร์ครับ

ตัวช่วยจัดวาง Flexbox ให้สมดุล

ใครที่ปวดหัวกับการจัดวางกล่องเนื้อหาด้วย Flexbox (ระบบจัดวางโครงสร้างเว็บแบบยืดหยุ่น) ตอนนี้มีฟีเจอร์ใหม่ชื่อ flex-wrap: balance ที่จะช่วยกระจายเนื้อหาในแต่ละบรรทัดให้ดูสมดุลและสวยงามโดยอัตโนมัติ ไม่ต้องมานั่งกะระยะเองเหมือนเมื่อก่อนแล้ว

Selector แบบใหม่ที่เขียนโค้ดสั้นลง

มีการนำเสนอ Class prefix selector ซึ่งเป็นวิธีใหม่ในการเลือกองค์ประกอบของเว็บมาตกแต่ง วิธีนี้จะช่วยให้เราเขียนโค้ดได้สั้นลงและทำงานได้เร็วขึ้นกว่าการใช้ Attribute selector (การระบุคุณสมบัติของโค้ด) แบบเดิมที่ดูวุ่นวายและกินทรัพยากรเครื่องมากกว่า

สรุปสั้น ๆ

ฟีเจอร์เหล่านี้เน้นไปที่การลดขั้นตอนการทำงานและเพิ่มประสิทธิภาพให้เว็บทำงานได้ไหลลื่นขึ้น แม้บางอย่างจะยังรองรับแค่เฉพาะเบราว์เซอร์ แต่การเริ่มศึกษาและทดลองใช้ตั้งแต่วันนี้จะช่วยให้คุณนำหน้าคนอื่น และสร้างเว็บที่มีคุณภาพได้ดีกว่าเดิมแน่นอนครับ