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 bunların değerlerini CSS genelinde kullanmanıza olanak tanır. Günümüzde son derece yararlı olsalar da, çalışmayı zorlaştırabilecek bazı eksiklikleri vardır: Herhangi bir değeri alabilirler, bu nedenle beklenmedik bir şeyle yanlışlıkla geçersiz kılınabilirler, değerlerini her zaman üst öğelerinden devralırlar ve geçiş yapamazsınız. Houdini'nin artık Chrome 78'de kullanıma sunulan CSS Özellikleri ve Değerleri API 1. Seviyesi ile 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 Houdini veya kısaca Houdini olarak bilinen CSS-TAG Houdini Görev Gücü,"web'de stilin 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şletebilirsiniz. Bu sayede, JavaScript'te yazılmış CSS değerleri ve performans kaybına yol açmadan yeni CSS oluşturma veya mevcut CSS'yi doldurma artık mümkün. Houdini, web'de yaratıcılığı zirveye getirme potansiyeline sahip.
CSS Özellikleri ve Değerleri API 1. Seviye
CSS Properties and Values API Level 1 (Houdini Props and Vals), özel mülklerimize yapı kazandırmamıza olanak tanır. Özel mülkler kullanırken şu anda geçerli olan durum:
.thing {
--my-color: green;
}
Özel mülklerin türü 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. Kullandığımızda varsayılan değerlere geri döner (color için siyah, background için şeffaf). Houdini Props ve Vals ile özel özellikler kaydedilebilir. Böylece tarayıcı, özelliği kaydedebilir.
Artık --my-color özel mülkü renk olarak kayıtlı. Bu, tarayıcıya ne tür değerlere izin verildiğini ve bu özelliği nasıl yazıp işleyebileceğini bildirir!
Kayıtlı bir mülkün anatomisi
Mülk kaydetme şu şekilde yapılır:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});
Aşağıdaki seçenekleri destekler:
name: string
Özel özelliğin adı.
syntax: string
Özel özellik nasıl ayrıştırılır? Olası değerlerin tam listesini CSS Değerleri ve Birimleri spesifikasyonunda bulabilirsiniz. Varsayılan olarak * değerine ayarlanır.
inherits: boolean
Üst öğesinin değerini devralıp devralmadığı. Varsayılan olarak true değerine ayarlanır.
initialValue: string
Özel özelliğin başlangıç değeri.
syntax'e daha yakından bakalım. Sayılardan renklere ve <custom-ident> türlerine kadar çeşitli geçerli seçenekler vardır. Bu söz dizimleri, aşağıdaki değerler kullanılarak da değiştirilebilir
+eklendiğinde, söz konusu söz dizimi için boşlukla ayrılmış bir değer listesi kabul edildiği anlamına gelir. Örneğin,<length>+, uzunluk için boşlukla ayrılmış bir liste#eklendiğinde, söz konusu söz dizimi için virgülle ayrılmış bir değer listesi kabul edildiği anlamına gelir. Örneğin,<color>#, virgülle ayrılmış bir renk listesi olur.- Söz dizimi veya tanımlayıcıların arasına
|eklemek, sağlanan seçeneklerden herhangi birinin geçerli olduğunu gösterir. Örneğin,<color># | <url> | magiciçin virgülle ayrılmış bir renk listesi, bir URL veyamagickelimesine izin verilir.
Anladım
Houdini Props ve Vals'ta dikkat edilmesi gereken iki nokta vardır. Birincisi, tanımlandıktan sonra mevcut kayıtlı bir mülkü güncellemenin mümkün olmamasıdır. Bir mülkü yeniden kaydetmeye çalıştığınızda, mülkün zaten tanımlandığını belirten bir hata mesajı gösterilir.
İkinci olarak, standart özelliklerin aksine kayıtlı özellikler ayrıştırıldıklarında doğrulanmaz. Bunun yerine, hesaplanırken doğrulanırlar. Bu, hem geçersiz değerlerin öğenin özellikleri incelenirken geçersiz olarak görünmeyeceği hem de geçerli bir özelliğin ardından geçersiz bir özellik eklendiğinde geçerli özelliğe geri dönülmeyeceği anlamına gelir. Ancak geçersiz bir özellik, kayıtlı özelliğin varsayılan değerine geri döner.
Özel özelliklere animasyon uygulama
Kayıtlı özel mülkler, tür kontrolünün ötesinde eğlenceli bir avantaj sunar: animasyonlu hale getirme özelliği. Temel bir animasyon örneği şu şekilde görünür:
<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 düğme animasyonlu olarak kırmızıdan yeşile döner. Mülk kaydedilmeden bir renkten diğerine atlar. Çünkü kaydedilmeden tarayıcı bir değerden diğerine ne bekleyeceğini bilmez ve bu nedenle geçiş yapabilme özelliğini garanti edemez. Bu örnek, CSS degradelerinin animasyonunu yapmak için bir adım daha ileriye taşınabilir. Aşağıdaki CSS, aynı kayıtlı mülkle 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'ün parçası olan özel özelliğimizi hareketlendirir ve böylece doğrusal degrademizi hareketlendirir. Kodun tamamını çalışırken görmek ve kendiniz denemek için aşağıdaki Glitch'e göz atın.
Sonuç
Houdini, tarayıcılara ve CSS'yle birlikte CSS ile çalışmanın ve kapsamının genişletilmesine yönelik tamamen yeni yöntemlere yol açtı. Paint API'nin gönderilmiş olması ve şimdi de Özel Sahneler ve Valfler ile reklam öğesi araç kutumuz genişliyor. Böylece, yazılan CSS özelliklerini tanımlayıp bunları yeni ve heyecan verici tasarımlar oluşturup canlandırmak için kullanabiliyoruz. Houdini sorun sırası'nda geri bildirimde bulunabilir ve Houdini'nin gelecekteki planlarını görebilirsiniz. Houdini, web'de stil ve düzenin "sihirini" açıklayan özellikler geliştirmek için vardır. Bu nedenle, bu sihirli özellikleri iyi bir şekilde kullanın.
Fotoğrafçı: Maik Jonietz Unsplash