CSS random() Fonksiyonu Artık Tüm Tarayıcılarda Kullanılabilir

CSS'e yeni eklenen random() fonksiyonu henüz tüm tarayıcılarda desteklenmiyor. Ama bir polyfill sayesinde bugün kullanmaya başlayabilirsin.

CSS random() fonksiyonu, stil yazarken rastgele değerler üretmeni sağlıyor. Örneğin animasyon gecikmelerini, renkleri ya da boyutları rastgele hale getirebilirsin. Şu ana kadar bu işi JavaScript'le yapman gerekiyordu. Şimdi doğrudan CSS'te yapabilirsin.

Polyfill yaklaşımı basit: fonksiyon çalışmadığında, JavaScript devreye giriyor ve random() çağrılarını algılayıp değişkenlere dönüştürüyor. Böylece eski tarayıcılar da aynı davranışı gösteriyor. CSS-Tricks'teki detaylı rehberde, bu polyfill'in nasıl kurulduğu ve hangi durumlarda işe yaradığı açıklanıyor.

Pratik kullanım örneği: bir kartlar galerisi tasarlarken her kartın fade-in animasyonu farklı bir gecikmede başlasın istiyorsan, CSS'te doğrudan random() yazabilirsin. Polyfill, arka planda bu değerleri hesaplayıp uyguluyor.

Önemli nokta: polyfill'in performansı, özellikle çok sayıda random() çağrısı varsa dikkat gerektiriyor. Büyük projeler için test etmek iyi bir alışkanlık. Tarayıcı desteği genişledikçe polyfill'e ihtiyacın azalacak, ama şimdilik modern CSS özelliklerini hemen kullanmak istiyorsan bu yol işe yarıyor.