Adam Argyle, web geliştirme dünyasında CSS değişkenleri ve özelleştirilmiş özellikler konusundaki çalışmalarıyla tanınan bir isim. Daha önce Open Props ile renk, gölge, boyutlandırma ve tipografi gibi alanlarda önceden yapılandırılmış değişkenler sunmuştu. Şimdi ise Prop For That ile geri döndü. Bu yeni kütüphane, CSS'in normalde tarayıcıda doğrudan erişemediği canlı verileri (imleç konumu, kaydırma hızı, form durumları, geçerli saat gibi) CSS değişkenlerine dönüştürüyor. Tüm JavaScript işlemleri arka planda hallediliyor; geliştiricinin tek yapması gereken kütüphaneyi import etmek, HTML'de data attribute'ları eklemek ve CSS'de stilleri yazmak.
Prop For That'in çalışma prensibi oldukça basit. HTML'e data-props-for attribute'u ekleniyor, örneğin bir div'e data-props-for="pointer" yazmak, o öğeye imleç konumuyla ilgili canlı değişkenler kazandırıyor. Ardından CSS'de bu değişkenler kullanılabiliyor: left: calc(var(--live-pointer-x, 0) * 1px); gibi. Bu sayede daha önce JavaScript ile yapılan birçok işlem (imleç takibi, kaydırma hızı animasyonları vb.) artık sadece CSS ile yapılabiliyor. Kütüphane, veri türüne göre otomatik olarak uygun değişkenleri oluşturuyor.
Adam Argyle, Prop For That için hazırladığı demo sayfalarıyla da yeteneklerini sergiliyor. Örneğin, imleç konumuna göre hareket eden bir kutu, kaydırma hızına göre değişen animasyonlar veya geçerli saati gösteren bir saat. Bu demolar, kütüphanenin ne kadar esnek ve güçlü olduğunu gösteriyor. Ayrıca, Chris'in daha önce JavaScript ile kayıtlı özel özellikler kullanarak yaptığı imleç takibi çalışmasına benzer bir işlem, Prop For That ile çok daha basit hale geliyor.
Sistem Güvenliği
Prop For That, CSS'in sınırlarını zorlayan ve web geliştiricilere yeni olanaklar sunan bir araç. Tamamen açık kaynak olan kütüphane, GitHub üzerinden erişilebilir. Eğer CSS ile daha önce mümkün olmayan canlı veri etkileşimleri oluşturmak istiyorsanız, Prop For That kesinlikle denemeye değer. Adam Argyle'ın deyimiyle, 'Bu kütüphane ile CSS artık canlı verileri görebiliyor.'
