เมื่อความไม่สมบูรณ์แบบกลายเป็นเครื่องมือ - ฟังก์ชัน CSS random() เปิดทางให้การออกแบบเป็นธรรมชาติมากขึ้น

เมื่อฟังก์ชัน native random() ของ CSS จากสเปก CSS Values and Units Level 5 เริ่มลงมือใน Safari และกำลังไหลเข้าสู่ Chrome 156 นักออกแบบ front-end หลายคนเริ่มตั้งคำถามว่า randomness มีที่ยืนแค่ไหนบนเว็บ ที่ดูเน้นความสม่ำเสมอและความคาดเดาได้ตลอดเวลา บทความนี้สรุปแนวคิด การใช้งานพื้นฐาน ตัวอย่างโปรโตไทป์ และข้อพึงระวังเมื่อนำไปใช้จริง

ฟังก์ชัน random() คืออะไรและการใช้งานพื้นฐาน

random() ช่วยสร้างค่าพรีดิโอ-แรนดอมโดยตรงใน CSS โดยไม่ต้องเขียน JavaScript หรือสร้างลูปในเวลาคอมไพล์ คุณสามารถระบุช่วงเป็นอาร์กิวเมนต์แบบคอมม่าเซปาเรท เช่น random(min, max) โดยทั้งสองข้างต้องเป็นหน่วยชนิดเดียวกันเท่านั้น - parser ต้องรู้มิติที่กำลังคำนวณ เช่น length, angle, time, percentage หรือเลขแบบไม่มีหน่วย

ข้อจำกัดและทริคการใช้ร่วมกับ calc() และ step

ถ้าต้องการผสมหน่วยต่างชนิด ให้ใช้ calc() ภายในอาร์กิวเมนต์เพื่อให้แต่ละด้านแก้ค่าได้ถูกต้อง นอกจากนี้มีอาร์กิวเมนต์ที่สามเป็น step-size ถ้าใส่ browser จะปัดค่าที่สุ่มมาให้เป็นขั้นที่ต้องการ เหมาะกับกรณีที่ต้องการให้การเปลี่ยนตำแหน่งยังคงวนอยู่บนกริดที่กำหนด

ตัวอย่างทดลองที่น่าสนใจ

ผู้เขียนทดลองหลายชิ้นใน CodePen เพื่อสำรวจแนวทางใช้งานจริง เช่น การใส่ความไม่ตรงเป๊ะให้ตัวอักษรเพื่อให้ดูวินเทจเล็กน้อย, การทำตัวอักษรให้เด้งแบบ procedural โดยเลือกพารามิเตอร์แยกสำหรับแต่ละตัวอักษร และการหมุนเอียงการ์ดพร้อมเงาแบบไดนามิก ตัวอย่างหนึ่งชวนให้สังเกตว่าถ้าอยากให้บล็อกมีขนาดเป็นสี่เหลี่ยมจตุรัสควรแชร์ตัวแปร --square-size ระหว่าง inline-size และ block-size เพื่อให้ทั้งสองได้รับค่าร่วมกันแทนที่จะได้ค่าที่ต่างกัน

สำหรับแอนิเมชัน ผู้เขียนยกตัวอย่างการตั้งค่า delay แบบเป็นลบ เช่น --delay: random(-3s, 0s) การใช้ delay เป็นค่าลบทำให้แต่ละตัวอักษรถูกมองว่ากำลังแอนิเมทมาสักพักแล้วเมื่อหน้าโหลด ทำให้ไม่ต้องรอให้เวลาเริ่มนับใหม่และสร้างความรู้สึกไหลลื่น

การรองรับเบราว์เซอร์และแนวทาง progressive enhancement

ตอนนี้ Safari เป็นเบราว์เซอร์แรกที่รองรับ ขณะที่ Chrome กำลังทยอยปล่อยใน Chrome 156 และมีสัญญาณบวกจาก Firefox ดังนั้นเมื่อนำไปใช้งานจริงควรห่อโค้ดด้วย @supports เพื่อเพิ่ม progressive enhancement และรอการมาของฟังก์ชันคู่คือ random-item() ซึ่งจะสุ่มเลือกระหว่างรายการโทเคนหรือคีย์เวิร์ด แม้ว่าฟังก์ชันนี้ยังไม่มีการรองรับตอนนี้ แต่เป็นแนวคิดที่น่าสนใจสำหรับการสุ่มจากชุด design token

มีข้อควรระวังด้านการเข้าถึงด้วย เช่นถ้าจะแยกคำเป็น หลายตัวเพื่อสไตล์ตัวอักษรแต่ละตัว ให้ซ่อนสแปนที่เป็น visual จาก assistive tech และให้มีข้อความเต็มสำหรับ screen reader มิฉะนั้น screen reader จะอ่านเป็นตัวอักษรทีละตัวซึ่งเป็นประสบการณ์ที่ไม่ดี

สรุปแล้ว random() เปิดโอกาสให้เราใส่ความเป็นมนุษย์และความสนุกแบบมีการควบคุมลงใน UI โดยไม่จำเป็นต้องทิ้งระบบ design system แต่ควรทดลองอย่างระมัดระวัง ห่อด้วย @supports และตรวจสอบ accessibility ก่อนนำขึ้น production

หมายเหตุสำหรับนักพัฒนาไทย - ฟีเจอร์นี้เหมาะสำหรับคนทำ front-end และนักออกแบบ UI ที่อยากทดลองเพิ่มลักษณะเชิง organics ในโปรโตไทป์ ฝึกทดลองบน CodePen และประเมินผลกับผู้ใช้จริงก่อนนำไปใช้ในโปรเจกต์งานจริง

ที่มา: Smashing Magazine - เรียบเรียงและสรุปเป็นภาษาไทยโดยทีมงาน IT Genius