เจาะลึกฟีเจอร์ CSS ใหม่: sibling-index(), คีย์เวิร์ด infinity และ Container Stuck Queries
สรุปประเด็นเด่นจากวงการเว็บเดเวลอปเมนต์รอบล่าสุด ทั้งแอนิเมชันด้วย sibling-index() ใน Firefox 154, การสร้างผังการแข่งขันฟุตบอลด้วย CSS และอัปเดตเบราว์เซอร์ล่าสุด
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Firefox 154 เตรียมรองรับ sibling-index() สำหรับทำแอนิเมชันในวันที่ 18 สิงหาคม 2026
- Ahmad Shadeed เผยวิธีเขียนโค้ดทำผังแข่งขันน็อคเอาท์ด้วย CSS ล้วน
- Adam Argyle แนะนำกรณีใช้งานจริงของคีย์เวิร์ด infinity ในฟังก์ชัน calc()
- Chris Coyier สาธิตการใช้งาน container scroll state queries เพื่อตรวจสอบสถานะ stuck
วงการพัฒนาเว็บไซต์กลับมาคึกคักอีกครั้งกับบทความสรุปประเด็นน่าสนใจล่าสุดจาก CSS-Tricks ที่รวบรวมเทคนิค ลูกเล่น และฟีเจอร์ใหม่ๆ มาให้เหล่านักพัฒนาได้อัปเดตกันแบบจุใจ เริ่มต้นกันที่เทคนิคการทำแอนิเมชันสุดล้ำโดยอาศัยฟังก์ชัน sibling-index() ซึ่งต่อยอดมาจากซีรีส์บทความ In-N-Out Animations ของ Chris Coyier โดยทาง Temani Afif ได้มาสาธิตวิธีใช้งานจริง ซึ่งเบราว์เซอร์ Firefox 154 มีกำหนดจะปล่อยฟีเจอร์นี้ในวันที่ 18 สิงหาคม 2026 ส่งผลให้ฟีเจอร์นี้ขยับสถานะเป็น Baseline: Newly Available อย่างเป็นทางการ
สำหรับใครที่ยังอาลัยอาวรณ์มหกรรมฟุตบอลโลก 2026 ที่เพิ่งปิดฉากลงไปพร้อมกับความมันส์สะใจ Ahmad Shadeed ได้นำเสนอวิธีสร้างผังการแข่งขันรอบน็อคเอาท์ (Knockout Bracket) ขึ้นมาใหม่ด้วยการใช้ CSS ล้วนๆ ซึ่งถือเป็นบทความที่อ่านสนุกและเต็มไปด้วยไอเดียสร้างสรรค์ที่เหล่านักพัฒนาไม่ควรพลาดด้วยประการทั้งปวง
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
การใช้งานฟังก์ชันเชิงคณิตศาสตร์และตัวแปรขั้นสูงใน CSS เช่น ฟังก์ชัน calc() ที่รองรับคีย์เวิร์ด infinity ช่วยให้นักพัฒนาสามารถจัดการกับเลย์เอาต์ซับซ้อนและการคำนวณค่าขีดจำกัดได้อย่างยืดหยุ่น โดยไม่ต้องพึ่งพา JavaScript มาช่วยคำนวณเหมือนในอดีต สะท้อนให้เห็นถึงวิวัฒนาการของ CSS ที่ทรงพลังเทียบเท่าภาษาสะสมคำสั่งทั่วไป
ในส่วนของลูกเล่นเชิงตัวเลข Adam Argyle ได้ออกมาเขียนอธิบายถึงกรณีการใช้งานคีย์เวิร์ด infinity ภายในฟังก์ชัน calc() ซึ่งรวมถึงค่าติดลบอย่าง -infinity ว่าสามารถนำไปประยุกต์ใช้กับสถานการณ์ใดได้บ้าง ถือเป็นอีกหนึ่งความรู้รอบตัวที่น่าสนใจสำหรับผู้ที่ต้องการรีดประสิทธิภาพการเขียนโค้ดออกมาให้ได้มากที่สุด นอกจากนี้ Johannes Bechberger ยังได้มาแนะนำ 3 วิธีในการทำแอนิเมชันให้กับข้อความลายมือ (Hand-drawn text) ซึ่งช่วยลดความน่ากลัวของการใช้งาน SVG ลงไปได้เยอะเพราะมีคอมเมนต์อธิบายโค้ดที่เข้าใจง่าย
ทางด้าน Chris Coyier ได้หยิบยกเรื่อง container 'stuck' queries มาแนะนำ โดยเป็นการใช้งาน query เพื่อตรวจสอบว่าธาตุ (Element) กำลังอยู่ในสถานะถูกตรึง (Stuck) หรือไม่ ผ่านการใช้งาน @container scroll-state(stuck: <keyword>) แม้ว่าในขณะนี้ทั้ง Safari และ Firefox จะยังไม่รองรับก็ตาม
ปิดท้ายด้วยการอัปเดตความเคลื่อนไหวของเบราว์เซอร์ โดย Firefox 153 ได้ปรับปรุงความสามารถในการทำงานร่วมกัน (Interoperability) พร้อมทั้งรองรับ Picture-in-Picture API ในสถานะ Baseline แล้ว ในขณะที่ Chrome 151 มาพร้อมกับการรองรับ <usermedia> และการปรับปรุงอื่นๆ อีกมากมาย โดยมีรายงานตารางพัฒนาของ Chrome ที่วางแผนยาวไกลไปจนถึง 14 ปีข้างหน้าและหยุดลงที่เวอร์ชัน Chrome 499 พอดี
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น