CSS'de geçişler ve veri koruması
CSS değişkenleri olarak da bilinen CSS özel özellikleri, CSS'de kendi özelliklerinizi tanımlamanıza ve değerlerini CSS'nizde kullanmanıza olanak tanır. Günümüzde son derece kullanışlı olsalar da, çalışmayı zorlaştırabilecek eksiklikleri vardır: Herhangi bir değeri alabilirler, bu nedenle yanlışlıkla beklenmedik bir değerle geçersiz kılınabilirler, değerlerini her zaman üst öğelerinden devralırlar ve bunları geçiş yapamazsınız. Houdini'nin artık Chrome 78'de kullanılabilen CSS Properties and Values API Level 1 özelliği sayesinde bu eksiklikler giderildi ve CSS özel özellikleri inanılmaz derecede güçlü hale geldi.
Houdini nedir?
Yeni API'den bahsetmeden önce Houdini'den kısaca bahsedelim. CSS-TAG Houdini Görev Gücü (daha çok CSS Houdini veya kısaca Houdini olarak bilinir), "web'de stil ve düzenin 'sihrini' açıklayan özellikler geliştirmek" için kurulmuştur. Houdini spesifikasyonları koleksiyonu, tarayıcının oluşturma motorunun gücünü ortaya çıkarmak için tasarlanmıştır. Bu sayede hem stillerimiz hakkında daha ayrıntılı bilgi edinebilir hem de oluşturma motorumuzu genişletebiliriz. Bu sayede, JavaScript'te yazılan CSS değerleri ve performans kaybı olmadan yeni CSS'ler oluşturmak veya polyfill kullanmak artık mümkün. Houdini, web'de yaratıcılığı güçlendirme potansiyeline sahiptir.
CSS Özellikleri ve Değerleri API Düzeyi 1
CSS Properties and Values API Düzeyi 1 (Houdini Props and Vals), özel niteliklerimizi yapılandırmamıza olanak tanır. Özel nitelikler kullanılırken mevcut durum şu şekildedir:
.thing {
--my-color: green;
}
Özel özelliklerin türleri olmadığından beklenmedik şekillerde geçersiz kılınabilirler. Örneğin, --my-color öğesini bir URL ile tanımlarsanız ne olacağını düşünün.
.thing {
--my-color: url('not-a-color');
color: var(--my-color);
}
Burada --my-color yazılmadığı için URL'nin geçerli bir renk değeri olmadığını bilmiyor. Bu özelliği kullandığımızda varsayılan değerlere (color için siyah, background için şeffaf) geri döner. Houdini Props and Vals ile özel özellikler kaydedilebilir. Böylece tarayıcı, ne olması gerektiğini bilir.
--my-color özel niteliği artık renk olarak kaydedildi. Bu, tarayıcıya hangi tür değerlere izin verildiğini ve bu özelliği nasıl yazıp ele alabileceğini söyler.
Kayıtlı bir mülkün anatomisi
Bir mülkü kaydetme işlemi şu şekilde görünür:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
Aşağıdaki seçenekleri destekler:
name: string
Özel niteliğin adı.
syntax: string
Özel niteliğin nasıl ayrıştırılacağı. Olası değerlerin tam listesini CSS Değerleri ve Birimleri spesifikasyonunda bulabilirsiniz. Varsayılan değer: *.
inherits: boolean
Üst öğesinin değerini devralıp almadığı. Varsayılan değer: true.
initialValue: string
Özel niteliğin ilk değeri.
syntax daha yakından inceleniyor. Sayılar, renkler ve <custom-ident> türleri gibi çeşitli geçerli seçenekler vardır. Bu söz dizimleri, aşağıdaki değerler kullanılarak da değiştirilebilir:
+eklenmesi, bu söz diziminin boşlukla ayrılmış bir değer listesini kabul ettiğini gösterir. Örneğin,<length>+, boşlukla ayrılmış uzunluk listesi olur.#eklenmesi, bu söz diziminin virgülle ayrılmış değer listesini kabul ettiğini gösterir. Örneğin,<color>#, virgülle ayrılmış bir renk listesi olur.- Söz dizimleri veya tanımlayıcılar arasına
|eklemek, sağlanan seçeneklerden herhangi birinin geçerli olduğunu belirtir. Örneğin,<color># | <url> | magic, virgülle ayrılmış renk listesine, URL'ye veyamagickelimesine izin verir.
Gotchas
Houdini Props and Vals ile ilgili iki sorun vardır. Birincisi, tanımlandıktan sonra mevcut kayıtlı bir özelliği güncellemenin bir yolu yoktur ve bir özelliği yeniden kaydetmeye çalışmak, özelliğin zaten tanımlandığını belirten bir hata verir.
İkinci olarak, standart özelliklerin aksine, kayıtlı özellikler ayrıştırıldıklarında doğrulanmaz. Bunun yerine, hesaplandıkları zaman doğrulanırlar. Bu, öğenin özellikleri incelenirken geçersiz değerlerin geçersiz olarak görünmeyeceği ve geçerli bir özellikten sonra geçersiz bir özellik eklemenin geçerli özelliğe geri dönmeyeceği anlamına gelir. Ancak geçersiz bir özellik, kayıtlı özelliğin varsayılan değerine geri döner.
Özel özelliklere animasyon ekleme
Kayıtlı bir özel özellik, tür kontrolünün ötesinde eğlenceli bir bonus sunar: animasyon oluşturma özelliği. Temel bir animasyon örneği şu şekildedir:
<script>
CSS.registerProperty({
name: '--stop-color',
syntax: '<color>',
inherits: false,
initialValue: 'blue',
});
</script>
<style>
button {
--stop-color: red;
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
</style>
Fareyle düğmenin üzerine geldiğinizde kırmızıdan yeşile döner. Özelliği kaydetmezseniz bir renkten diğerine atlar. Tarayıcı, kayıtlı olmayan bir özelliğin değerleri arasında ne olacağını bilmediğinden geçişi garanti edemez. Ancak bu örnek, CSS gradyanlarına animasyon eklemek için bir adım daha ileri götürülebilir. Aşağıdaki CSS, aynı kayıtlı özellik kullanılarak yazılabilir:
button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
button:hover {
--stop-color: green;
}
Bu işlem, linear-gradient öğesinin bir parçası olan özel niteliğimizi animasyonlu hale getirir. Böylece doğrusal renk geçişimiz animasyonlu hale gelir. Kodun tamamını çalışırken görmek ve kendiniz denemek için aşağıdaki Codepen'e göz atın.
Sonuç
Houdini, tarayıcılara geliyor ve beraberinde CSS ile çalışmanın ve CSS'yi genişletmenin tamamen yeni yollarını getiriyor. Paint API'nin kullanıma sunulması ve şimdi de özel özellikler ve değerlerin eklenmesiyle reklam öğesi araç kutumuz genişliyor. Bu sayede, yazılı CSS özelliklerini tanımlayabilir ve bunları kullanarak yeni ve heyecan verici tasarımlar oluşturup animasyonlar ekleyebiliriz. Houdini sorun sırasına daha fazla özellik eklenecek. Buradan geri bildirim verebilir ve Houdini'nin gelecekteki özelliklerini görebilirsiniz. Houdini, web'de stil ve düzenin "sihrini" açıklayan özellikler geliştirmek için var. Bu nedenle, bu sihirli özellikleri iyi bir şekilde kullanın.