ฟังก์ชัน random() ใน CSS ก่อให้เกิดความกังวลด้านความปลอดภัยและการถกเถียงเรื่องประสิทธิภาพในหมู่นักพัฒนา

CSS กำลังจะได้รับเครื่องมือสร้างตัวเลขสุ่มแบบ native ตัวแรกด้วยฟังก์ชัน random() ใหม่ ซึ่งปัจจุบันใช้งานได้ใน Safari Technology Preview แล้ว แม้ว่าสิ่งนี้จะนำมาซึ่งความเป็นไปได้ที่น่าตื่นเต้นในการสร้างเอฟเฟกต์ภาพแบบไดนามิกโดยไม่ต้องใช้ JavaScript แต่ชุมชนนักพัฒนากำลังตั้งคำถามสำคัญเกี่ยวกับความปลอดภัย ประสิทธิภาพ และการประยุกต์ใช้งานจริง

การรองรับของเบราว์เซอร์ในปัจจุบัน

• Safari Technology Preview : รองรับ (ในระยะทดลอง)
• Chrome : ไม่รองรับ
• Firefox : ไม่รองรับ
• Edge : ไม่รองรับ
• สถานะ: ยังไม่มีเบราว์เซอร์ใดที่เปิดใช้งานให้ผู้ใช้โดยค่าเริ่มต้น
• ข้อกำหนด: CSS Values and Units Module Level 5 (ฉบับร่าง)

สำรวจฟังก์ชัน random() ใหม่ที่น่าตื่นเต้นใน CSS สำหรับการจัดสไตล์แบบไดนามิก

ความเสี่ยงด้านความปลอดภัยทำให้นักพัฒนากังวล

การอภิปรายที่ร้อนแรงที่สุดมุ่งเน้นไปที่ความเสี่ยงด้านความปลอดภัยที่อาจเกิดขึ้น นักพัฒนามีความกังวลว่าผู้คนอาจใช้ฟีเจอร์การจัดรูปแบบนี้ในทางที่ผิดสำหรับแอปพลิเคชันที่ต้องการความปลอดภัย คล้ายกับที่ฟังก์ชันสุ่มที่ไม่ใช่แบบเข้ารหัสอื่นๆ ถูกนำไปใช้อย่างไม่เหมาะสมในอดีต ความกังวลคือมีคนอาจพยายามใช้งานการสร้างรหัสผ่านหรือโปรโตคอลความปลอดภัยอื่นๆ โดยใช้ CSS ซึ่งอาจสร้างช่องโหว่ด้านความปลอดภัยที่ร้ายแรง

หากคุณใช้งานโปรโตคอลความปลอดภัยในแอปพลิเคชันที่ใช้งานจริงด้วย CSS แล้วคุณสมควรถูกแฮกและถูกฟ้องร้องในข้อหาประมาท

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

คำถามเรื่องประสิทธิภาพและวิธีการทางเลือก

สมาชิกในชุมชนยังกำลังหารือเกี่ยวกับผลกระทบต่อประสิทธิภาพและวิธีแก้ปัญหาที่มีอยู่ นักพัฒนาบางคนชี้ไปที่หลักการ cicada - เทคนิคที่ชาญฉลาดที่ใช้รูปแบบจำนวนเฉพาะเพื่อสร้างเอฟเฟกต์ภาพแบบสุ่มเทียมที่อาจคาดเดาได้และมีประสิทธิภาพมากกว่าความสุ่มแท้จริง

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

คนอื่นๆ สังเกตว่าปัจจุบันพวกเขาสามารถทำเอฟเฟกต์ที่คล้ายกันได้โดยการตั้งค่า CSS custom properties ด้วย JavaScript ทำให้ฟังก์ชันใหม่นี้เป็นสิ่งเสริมที่น่ายินดีที่ลดการพึ่งพา JavaScript

สร้างเอฟเฟกต์ภาพแบบไดนามิกโดยใช้ฟังก์ชัน random() ใหม่ของ CSS

การประยุกต์ใช้ในโลกจริงที่จำกัด

นักพัฒนาหลายคนตั้งคำถามว่าฟังก์ชัน random() ตอบสนองความต้องการทางธุรกิจที่แท้จริงหรือไม่ ตัวอย่างที่แสดง - สนามดาว กองภาพถ่าย และวงล้อโชคลาภ - ดูเหมือนการสาธิตมากกว่าการประยุกต์ใช้งานจริงสำหรับงานพัฒนาเว็บทั่วไป

ฟังก์ชันนี้ใช้ไวยากรณ์ที่เรียบง่าย: random(min, max, step) โดยคุณกำหนดช่วงและขนาดขั้นตอนเสริม ตัวอย่างเช่น random(0, 100) สร้างตัวเลขระหว่าง 0 ถึง 100 ในขณะที่ random(0turn, 1turn, .25turn) สร้างค่าการหมุนในหน่วยเศษส่วนของการหมุน

ไวยากรณ์ของฟังก์ชัน CSS random()

• รูปแบบพื้นฐาน: random(min, max, step)
• อาร์กิวเมนต์ทั้งหมดต้องใช้ประเภทตัวเลขที่ตรงกัน (จำนวนเต็ม เปอร์เซ็นต์ ความยาว มุม)
• อาร์กิวเมนต์ step เป็นตัวเลือก
• ตัวอย่าง:
  • random(0, 100) - จำนวนเต็มระหว่าง 0 ถึง 100
  • random(0turn, 1turn, .25turn) - การหมุนในขั้นตอนหนึ่งในสี่รอบ

แสดงตัวอย่างการใช้งานที่เป็นไปได้ของฟังก์ชัน random() ใน CSS ด้วยการออกแบบวงล้อหมุน

การรองรับเบราว์เซอร์และสถานะข้อกำหนด

ปัจจุบันมีเพียง Safari Technology Preview เท่านั้นที่รองรับฟีเจอร์นี้ และไม่มีเบราว์เซอร์ใดส่งมอบให้ผู้ใช้โดยค่าเริ่มต้น CSS Working Group ยังคงหารือเกี่ยวกับข้อกำหนด โดยมีประเด็นที่ยังเปิดอยู่หลายประการเกี่ยวกับว่าแนวทางนี้ตอบสนองความต้องการของนักพัฒนาได้ดีที่สุดหรือไม่

ทีม WebKit กำลังแสวงหาข้อเสนอแนะจากนักพัฒนาที่ทดสอบฟีเจอร์นี้อย่างแข็งขัน เนื่องจากข้อมูลป้อนกลับจากชุมชนจะมีอิทธิพลโดยตรงต่อการใช้งานขั้นสุดท้าย สิ่งนี้แสดงถึงโอกาสสำหรับนักพัฒนาในการกำหนดทิศทางการพัฒนาของ CSS

แม้ว่าฟังก์ชัน random() จะเปิดความเป็นไปได้ใหม่ๆ ในการสร้างสรรค์สำหรับการจัดรูปแบบเว็บ แต่การอภิปรายในชุมชนเผยให้เห็นข้อพิจารณาสำคัญเกี่ยวกับความปลอดภัย ประสิทธิภาพ และประโยชน์ใช้สอยจริงที่น่าจะมีอิทธิพลต่อรูปแบบสุดท้ายและการยอมรับ

อ้างอิง: Rolling the Dice with CSS random()