CSS-Tricks อัปเดตฟีเจอร์เด่น: Refraction, Scroll State และอีกเพียบ
สรุปฟีเจอร์และเทคนิค CSS-HTML ล่าสุดจาก CSS-Tricks #19 ทั้ง Background Refraction, scroll-state queries และการใช้ @custom-media
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Preethi Sam เผยวิธีทำ Background Image Refraction ด้วย CSS ล้วนโดยไม่ต้องใช้ JavaScript
- Dan Holloran แนะนำการใช้งาน scroll-state() queries รูปแบบต่างๆ เช่น scrolled และ stuck
- Bramus สาธิตการแอนิเมชัน CSS grids ร่วมกับฟีเจอร์ anchor positioning
- ประกาศการกลับมาของจดหมายข่าว CSS-Tricks ทุกสองสัปดาห์เริ่ม 10 พฤศจิกายนนี้
วงการพัฒนาเว็บพ้นช่วงเวลาที่น่าตื่นเต้นกับบทความชุด What’s !important ฉบับที่ 19 จาก CSS-Tricks ซึ่งรวบรวมเทคนิค เทคโนโลยี และลูกเล่นใหม่ๆ ทางฝั่ง front-end มาให้เหล่านักพัฒนาได้อัปเดตกันอย่างจุใจ โดยในรอบนี้มีการพูดถึงฟีเจอร์ CSS และ HTML ทั้งตัวที่เพิ่งเปิดตัวและเทคนิคการประยุกต์ใช้งานจริงจากผู้เชี่ยวชาญหลายท่าน
เริ่มต้นกันที่เทคนิคการสร้างเอฟเฟกต์การหักเหของภาพพื้นหลัง (background image refraction effects) โดย Preethi Sam ซึ่งโชว์ผลงานการทำเอฟเฟกต์สุดอลังการที่สามารถทำแอนิเมชันได้โดยใช้โค้ด CSS เพียงเล็กน้อย ไม่ต้องพึ่งพา JavaScript และไม่ต้องคัดลอกไฟล์รูปภาพเพิ่มแต่อย่างใด ถัดมาคือ Brecht De Ruyte ที่นำเสนอการสร้างคอมโพเนนต์แบบปรับแต่งได้ด้วย container style queries และฟังก์ชัน attr() ขั้นสูง พร้อมเดโมอินเทอร์แอกทีฟให้ลองเล่นกัน
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ทางด้าน Dan Holloran ได้มาสาธิตการใช้งาน scroll-state() queries ซึ่งครอบคลุมสถานะต่างๆ เช่น scrollable, scrolled, snapped และ stuck โดยมีโค้ดสั้นๆ เข้าใจง่ายอย่าง @container scroll-state(stuck: top) { /* ... */ } เหมาะสำหรับผู้ที่ต้องการทำความเข้าใจฟีเจอร์ใหม่นี้อย่างรวดเร็ว ในขณะที่ Declan Chidlow ได้หยิบยกโค้ด CSS สมัยยุคอินเทอร์เน็ตเอ็กซ์พลอเรอร์ที่ขึ้นชื่อว่าประหลาดที่สุดมาแชร์ เช่น -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; เพื่อให้เห็นว่าเทคโนโลยีสมัยก่อนมีความซับซ้อนแค่ไหน
การรวบรวมเทคนิค CSS ในแต่ละสัปดาห์ช่วยให้เห็นพัฒนาการของมาตรฐานเว็บที่ก้าวหน้าไปมาก โดยเฉพาะฟีเจอร์อย่าง anchor positioning และ scroll-state queries ที่เข้ามาช่วยแก้ปัญหาการจัดレイアウトและการตรวจจับสถานะการเลื่อนหน้าจอที่เคยทำได้ยากในอดีต ทำให้ลดการพึ่งพาไลบรารีภายนอกลงได้อย่างมาก
นอกจากนี้ Bramus ยังได้สาธิตวิธีการทำแอนิเมชัน CSS grids โดยใช้ร่วมกับ anchor positioning ซึ่งเป็นการตรึงคอนเทนต์ไว้กับเซลล์ที่สอดคล้องกัน ทำให้เวลาที่กริดปรับขนาด ตัวคอนเทนต์จะเคลื่อนไหวไปพร้อมกันอย่างลื่นไหล (แม้ว่าปัจจุบันจะยังติดปัญหาบั๊กในเบราว์เซอร์ Firefox ก็ตาม) ส่วน Victor Ayomipo ได้วิเคราะห์ถึงสาเหตุที่การใช้งาน container queries ยังไม่แพร่หลายเท่าที่ควร ทั้งที่ติดอันดับความต้องการของนักพัฒนามานานหลายปี โดยมองว่านักพัฒนาอาจจะกำลังใช้งานผิดวิธี พร้อมเสนอแนวทางแก้ไขให้ถูกต้อง
"Today in CSS: We all know you can change the highlight colour of selected text, but it's impossible to animate that colour. Unless… the colour was just a variable inherited from the parent element, using @property to make it animatable… Hahahahaha…"
Leon Arnott
อีกหนึ่งไฮไลต์ที่น่าสนใจคือเทคนิคจาก Leon Arnott ที่ค้นพบวิธีแอนิเมชันสีพื้นหลังของ ::selection ได้สำเร็จ โดยใช้ตัวแปร var(--bg-color) ร่วมกับ @property เพื่อทำให้ค่าสีสามารถสืบทอดและขยับแอนิเมชันได้ นอกจากนี้ Andy Bell ยังได้ชี้ให้เห็นว่าคุณสมบัติ touch-action: manipulation สามารถช่วยปิดการใช้งานฟังก์ชัน double-tap-to-zoom-in บนมือถือได้อย่างง่ายดาย ซึ่งเป็นอีกหนึ่งบรรทัดคำสั่งที่ควรใส่ไว้ใน CSS reset ของทุกโปรเจกต์
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น