ฟีเจอร์ CSS random() บน Safari เปิดช่องว่างสร้าง Polyfill
เจาะลึกการใช้งาน CSS random() ที่เปิดตัวใน Safari ปลายปี 2025 แต่เบราว์เซอร์อื่นยังไม่รองรับ พร้อมแนวทางทำ Polyfill ข้ามเบราว์เซอร์จาก CSS-Tricks
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Safari รองรับฟังก์ชัน CSS random() เป็นเบราว์เซอร์แรกตั้งแต่ปลายปี 2025
- เบราว์เซอร์อื่นอย่าง Chrome และ Firefox ยังไม่มีกำหนดรองรับที่ชัดเจนในตอนนี้
- นักพัฒนาออกแพ็กเกจ css-random-polyfill เพื่อให้ใช้งานข้ามเบราว์เซอร์ได้
- ร่างข้อกำหนด random() ยังอยู่ในช่วงเริ่มต้นและอาจมีการเปลี่ยนแปลงใหญ่ในอนาคต
การผสมผสานความไร้ระเบียบเข้ากับการควบคุมในงานออกแบบ UI มักเป็นโจทย์ที่ท้าทายสำหรับนักพัฒนา ในโปรเจกต์งานหนึ่ง ทีมงานเคยต้องสร้างเอฟเฟกต์กระดาษโปรย (confetti) เพื่อให้ผู้ใช้งานรู้สึกตื่นเต้นเมื่อสุ่มรางวัล แต่ความต้องการของลูกค้าทำให้ทีมต้องละทิ้งปลั๊กอิน JavaScript เดิมแล้วหันมาพัฒนาโค้ดสำหรับเอฟเฟกต์ confetti ด้วยตัวเอง เพื่อให้ทุกอนุภาคที่สุ่มออกมาตรงกับภาพลักษณ์ของแบรนด์
คำถามคือ คงจะดีไม่น้อยหากเราสามารถควบคุมความสุ่มในส่วนการแสดงผลได้โดยไม่ต้องพึ่งพา JavaScript เลย การเข้ามาของฟังก์ชัน CSS random() จึงเป็นคำตอบ เมื่อผู้สร้างมาตรฐาน CSS ต้องการนำรูปแบบ UI ทั่วไปมารวบรวมเป็นมาตรฐานแบบ Declarative ส่งผลให้ในช่วงปลายปี 2025 เบราว์เซอร์ Safari กลายเป็นเจ้าแรกที่รองรับข้อกำหนด CSS random() อย่างเป็นทางการ
การอัปเดตดังกล่าวเป็นส่วนหนึ่งของแนวทางช่วยให้นักพัฒนาแก้ไขโจทย์ทั่วไปได้ด้วย HTML และ CSS เพียงอย่างเดียว พร้อมทั้งลดการพึ่งพา JavaScript หรือเฟรมเวิร์กจากภายนอก หลังจากนั้นก็มีตัวอย่างเดโมและบทสนทนาที่น่าสนใจเกี่ยวกับ random() ออกมาอย่างต่อเนื่อง เช่น ชอล์ก นีธลิง (Schalk Neethling) ที่แสดงวิธีใช้ฟังก์ชันนี้ควบคุมเอฟเฟกต์ confetti และอัลวาโร มอนโตโร (Alvaro Montoro) ที่ชี้ว่า CSS เหมาะกับงานลักษณะนี้ตามกฎ Rule of Least Power
ฟังก์ชัน CSS random() ถือเป็นก้าวสำคัญที่ช่วยย้ายตรรกะความสุ่มซึ่งปกติเคยต้องพึ่งพาสคริปต์ฝั่งไคลเอนต์ มาไว้ในสไตล์ชีทโดยตรง ช่วยลดภาระการประมวลผลของ JavaScript และทำให้เบราว์เซอร์จัดการการเรนเดอร์องค์ประกอบแบบสุ่มได้มีประสิทธิภาพมากขึ้นผ่าน CSS Engine แต่อย่างไรก็ตาม ความซับซ้อนเรื่องระบบการแคชค่าสุ่ม (Caching) และขอบเขตของตัวแปร (Keying semantics) ยังเป็นความท้าทายสำคัญที่ทำให้มาตรฐานนี้ยังอยู่ในขั้นทดลอง
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
อย่างไรก็ตาม ปัญหาใหญ่ในตอนนี้คือ หลังจากผ่านไปครึ่งปีนับตั้งแต่ Safari เปิดตัวฟังก์ชันนี้ เบราว์เซอร์คู่แข่งอย่าง Chrome และ Firefox ยังไม่มีความชัดเจนว่าจะรองรับเมื่อใด แม้จะมีสัญญาณการพัฒนาอยู่บ้าง แต่ก็ยังไม่มีกำหนดการที่แน่นอน ส่งผลให้นักพัฒนาไม่สามารถใช้งานฟังก์ชันนี้บนคอมพิวเตอร์ส่วนตัวที่รันเบราว์เซอร์อื่นได้ นอกจากนี้ ข้อกำหนดดังกล่าวยังอยู่ในช่วงร่างเริ่มต้น (Editor’s draft) ซึ่งหมายความว่าอาจมีการเปลี่ยนแปลงทางโครงสร้างที่ส่งผลให้โค้ดพังได้ในอนาคต
"ฟังก์ชันที่ใช้งานได้เฉพาะใน Safari เท่านั้น? โลกกลับตาลปัตรไปแล้วหรือไง"
ความคิดเห็นจากผู้ชมเดโมบน YouTube
จากอุปสรรคเหล่านี้ นักพัฒนาบางรายจึงตัดสินใจสร้างแพ็กเกจ css-random-polyfill ขึ้นมา เพื่อช่วยให้ผู้ใช้เบราว์เซอร์อย่าง Chrome และ Firefox สามารถทดลองใช้งานฟังก์ชันนี้ได้ ผ่านการปรับแต่ง HTML เล็กน้อยเพื่ออ้างอิงสคริปต์ Polyfill และเพิ่มคลาสเฉพาะให้กับองค์ประกอบที่ต้องการสุ่มค่า เช่น การสร้างสนามดวงดาวจำลอง (Starfield) หรือตารางกริดหลากสีตามตัวอย่างจากทีมงาน WebKit ของ Apple
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น