CSS random fonksiyonu: sitenize kontrollü rastgelelik geliyor

Bilgisayar ekranındaki her şey cetvelle çizilmiş gibi dümdüz durur. Oysa gerçek dünyada yapışkan notlar hafif eğri yapıştırılır, fotoğraflar masaya el yordamıyla bırakılır. Tasarımcılar bu “kusursuz olmayan” hissi uzun süredir ister, ama web’de bunu yapmak JavaScript ya da derleme aracı gerektiriyordu. Smashing Magazine’in 20 Ekim tarihli yazısına göre bu değişiyor: CSS random fonksiyonu artık doğrudan stil dosyasında rastgele değer üretmeyi sağlıyor.

CSS random fonksiyonu nedir, nasıl çalışır?

Özellik, CSS standartlarının “Values and Units Level 5” belgesinde tanımlı. Mantığı basit: bir alt ve bir üst sınır verirsiniz, tarayıcı ikisi arasında bir değer seçer. Örneğin bir kartı en fazla 3 derece sağa ya da sola yatırmak için tek satır yeterli.

İsteğe bağlı üçüncü bir değer “adım” belirler. Adım yoksa değer sürekli bir aralıktan gelir. Adım varsa sonuç o basamaklara yuvarlanır. Yani 0 ile 60 piksel arasında 15’er piksellik adım verirseniz yalnızca 0, 15, 30, 45 ya da 60 çıkar.

CSS random fonksiyonu kullanırken bir kural var: alt ve üst sınır aynı birimde olmalı. Rem ile pikseli karıştıramazsınız. Karıştırmanız gerekirse calc() kullanılıyor.

CSS random fonksiyonu ile aynı değeri iki özelliğe vermek

Varsayılan olarak her kullanım birbirinden bağımsız çalışır. Genişliğe ve yüksekliğe ayrı rastgele değer verirseniz kare yerine düzensiz dikdörtgenler çıkar. Çözüm, değere bir anahtar adı vermek. Aynı anahtarı kullanan özellikler aynı sayıyı paylaşır, böylece kutu kare kalır.

Hangi tarayıcılarda çalışıyor?

Burada dikkatli olmak gerekiyor. Yazıya göre Safari ilk destekleyen tarayıcı oldu, Chrome ve Edge tarafında Chrome 156 ile yayılmaya başlıyor. Firefox için standart sürecinde olumlu sinyaller var, ancak yayınlanmış bir destek yok. Spesifikasyondaki ikinci işlev olan random-item() ise (renk paleti gibi bir listeden seçim yapar) henüz hiçbir tarayıcıda çalışmıyor.

Pratik sonuç şu: CSS random fonksiyonu ile bugün yaptığınız bir efekti herkes görmeyecek. Bu, özelliğin kötü olduğu anlamına gelmez; yeni bir standardın yayılma sürecinde olduğunu gösterir. Eski bir CSS özelliği tüm ziyaretçilerde çalışırken, yeni olanlar önce bir kısmında çalışır. Önerilen yöntem, önce sade ve düz bir görünüm yazıp, desteği olan tarayıcılarda @supports kuralıyla rastgeleliği üstüne eklemek. Desteklemeyen ziyaretçi sitenin bozuk hâlini değil, sadece daha düz hâlini görür.

Yazının gösterdiği altı kullanım

Yazar, özelliği altı küçük demoyla gösteriyor:

• Başlıktaki her harfe hafif eğim, kayma ve saydamlık vermek.
• Harflerin sayfa açılırken farklı yükseklikte zıplaması.
• Eğik duran kartlar. Gölge de eğime uyuyor, fareyle ya da klavyeyle üzerine gelince kart düzeliyor.
• Elle dağıtılmış bir iskambil destesi görünümü.
• Kaydırdıkça farklı hızlarda akan satırlar.
• Bulanıklığı rastgele değişen, “bokeh” tarzı bir arka plan.

Yazarın kendi uyarısı da önemli: ana düzen ızgaraları, gövde metni ve tıklanacak düğmeler rastgeleliğe uygun değil. Rastgele eğilmiş bir “Teklif Al” düğmesi, ziyaretçinin gözünde hata gibi görünebilir.

İşletmenizin sitesi için bunun anlamı ne?

Kısa cevap: acele etmeyin ama aklınızda tutun. CSS random fonksiyonu bir zorunluluk değil, bir süs aracı. Ürün kartları, referans rozetleri ya da kampanya başlıkları gibi küçük alanlarda bu efekt siteye sıcak, el yapımı bir hava katabilir. Hazır şablonların birbirine benzediği bir dönemde bu, sitenizi ayırt edici kılan küçük bir dokunuş olabilir.

Ama erişilebilirlik sizin sorumluluğunuzda. Yazı üç noktayı vurguluyor:

1. Harfleri tek tek span içine bölerseniz ekran okuyucu harf harf okuyabilir. Başlığa bir aria-label verip görsel parçaları ekran okuyucudan gizlemek gerekir.
2. prefers-reduced-motion ayarı açık olan kullanıcılarda animasyonları kapatın, hatta rastgele açıları sıfırlayın.
3. Eğik bir bağlantıyı ya da düğmeyi, üzerine gelindiğinde ve klavyeyle odaklanıldığında düzeltin.

Bir de marka tonu meselesi var. Hukuk, sağlık ya da finans gibi güven vermesi gereken sektörlerde oyuncu bir görünüm ters tepebilir. Trend, sizin için doğru olduğu anlamına gelmez.

İşin güzel yanı, bu denemeyi küçük başlatabilirsiniz. Önce tek bir kartta ya da tek bir rozette deneyin, telefonda ve masaüstünde nasıl göründüğüne bakın, ziyaretçilerin davranışında bir fark olup olmadığını izleyin. Beğenmezseniz tek satırı silmeniz yeterli. Tüm siteyi baştan kurmak gerekmiyor, bu da özelliği düşük riskli bir deneme alanı yapıyor.

Bu tür yeniliklerin asıl değeri, ekipten ekibe farklı çıkıyor. CSS random fonksiyonu gibi gelişmelerde, kendi sitesini yönetmeyen bir işletme sahibi için önemli olan, tasarımcısının ya da ajansının bu gelişmeleri takip edip size “şunu denemek ister misiniz?” diye sorabilmesi. Karar yine sizde: sitenizin ziyaretçisi kim, hangi cihazdan geliyor, markanız ne kadar oyuncu bir dili kaldırır? Bu soruların cevabı, bir efektin süs mü yoksa dikkat dağıtıcı mı olacağını belirler.

Sonuç

CSS random fonksiyonu, tasarımcıya yeni bir araç veriyor ama kural koymayı da unutmuyor: ölçülü kullanın, düz bir yedek hazırlayın, erişilebilirliği ihmal etmeyin. Sitenizin bu tür yeniliklerden hangisini kaldırabileceğini birlikte değerlendirmek isterseniz kurumsal web sitesi hizmetimize göz atabilirsiniz. Önceki trend yazımızda ele aldığımız tarayıcılara gelen yeni CSS özelliklerine da bakmak isteyebilirsiniz. Eski bir siteyle başlamak yerine, yenilikleri güvenle uygulayabilen düzenli bir bakım ve destek düzeni kurmak da iyi bir başlangıç olur.