Houdini'nin yeni API'si ile daha akıllı özel mülkler

CSS'de geçişler ve veri koruması

Sam Richard

CSS değişkenleri olarak da bilinen CSS özel özellikleri, CSS'de kendi özelliklerinizi tanımlamanıza ve değerlerini CSS'niz genelinde kullanmanıza olanak tanır. Günümüzde son derece faydalı olsalar da bazı eksiklikleri vardır ve bu eksiklikler, bunlarla çalışmayı zorlaştırabilir: Herhangi bir değeri alabilirler, bu nedenle yanlışlıkla beklenmedik bir şeyle geçersiz kılınabilirler, değerlerini her zaman üst öğelerinden devralırlar ve bunları geçiremezsiniz. Chrome 78'de kullanıma sunulan Houdini'nin CSS Properties and Values API Level 1 ile bu eksiklikler giderilerek CSS özel özellikleri inanılmaz derecede güçlü hale getiriliyor.

Houdini nedir?

Yeni API'den bahsetmeden önce Houdini'den kısaca bahsedelim. CSS-TAG Houdini Görev Gücü, CSS Houdini veya kısaca Houdini olarak bilinir ve "web'deki stil ve düzenin 'sihrini' açıklayan özellikler geliştirmek" için kurulmuştur. Houdini spesifikasyonları, tarayıcının oluşturma motorunun gücünü açığa çıkarmak için tasarlanmıştır. Böylece hem stillerimiz hakkında daha derin bilgiler edinilebilir hem de oluşturma motorumuz genişletilebilir. Böylece, JavaScript'te yazılan CSS değerleri ve performans kaybı olmadan yeni CSS'ler oluşturmak veya CSS'leri doldurmak mümkün hale geldi. Houdini, web'de yaratıcılığı güçlendirme potansiyeline sahip.

CSS Özellikleri ve Değerleri API Seviyesi 1

CSS Özellikleri ve Değerleri API Seviyesi 1 (Houdini Props and Vals), özel özelliklerimize yapı kazandırmamıza olanak tanır. Özel özellikler kullanılırken geçerli olan durum şudur:

.thing {
  --my-color: green;
}

Özel özelliklerin türü olmadığından beklenmedik şekillerde geçersiz kılınabilirler. Örneğin, --my-color parametresini 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 özellik kullanıldığında varsayılan değerlere (color için siyah, background için şeffaf) geri dönülür. Houdini Props and Vals ile özel özellikler kaydedilebilir. Böylece tarayıcı, bu özelliklerin ne olması gerektiğini bilir.

Artık --my-color özel özelliği renk olarak kaydediliyor. Bu, tarayıcıya hangi tür değerlere izin verildiğini ve bu özelliğin nasıl yazılıp işlenebileceğini söyler.

Kayıtlı bir mülkün anatomisi

Bir mülk kaydettiğinizde aşağıdaki gibi bir görünüm elde edersiniz:

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 özelliğin nasıl ayrıştırılacağı. Olası değerlerin tam listesini CSS Değerleri ve Birimleri spesifikasyonunda bulabilirsiniz. Varsayılan olarak * değerine ayarlanır.

inherits: boolean

Üst öğenin değerini devralıp almadığı. Varsayılan olarak true değerine ayarlanır.

initialValue: string

Özel özelliğin başlangıç değeri.

syntax daha yakından inceleyelim. Sayılar, renkler ve <custom-ident> türleri gibi çeşitli geçerli seçenekler mevcuttur. Bu söz dizimleri aşağıdaki değerler kullanılarak da değiştirilebilir.

• + eklenmesi, bu söz diziminin boşlukla ayrılmış değer listesini kabul ettiğini gösterir. Örneğin, <length>+, uzunlukların boşlukla ayrılmış bir listesi olur.
• Ekleme#, bu söz diziminin virgülle ayrılmış değer listesini kabul ettiğini gösterir. Örneğin, <color>#, renklerin virgülle ayrılmış bir listesi olur.
• Söz dizimleri veya tanımlayıcılar arasına | eklemek, sağlanan seçeneklerden herhangi birinin geçerli olduğunu gösterir. Örneğin, <color># | <url> | magic, virgülle ayrılmış renk listesine, URL'ye veya magic kelimesine izin verir.

Gotchas

Houdini Props ve Vals ile ilgili iki önemli nokta vardır. Birincisi, tanımlandıktan sonra mevcut kayıtlı bir mülkün güncellenememesidir. Bir mülkü yeniden kaydetmeye çalışırsanız mülkün zaten tanımlandığını belirten bir hata mesajı gösterilir.

İkinci olarak, standart mülklerin aksine, kayıtlı mülkler ayrıştırıldıklarında doğrulanmaz. Bunun yerine, hesaplandıklarında doğrulanırlar. Bu, hem geçersiz değerlerin öğenin özelliklerini incelerken geçersiz olarak görünmeyeceği hem de geçerli bir özellikten sonra geçersiz bir özellik eklemenin geçerli olana geri dönmeyeceği anlamına gelir. Ancak geçersiz bir özellik, kayıtlı özelliğin varsayılanına geri döner.

Özel özelliklere animasyon uygulama

Kayıtlı bir özel özellik, tür kontrolünün ötesinde eğlenceli bir bonus sağlar: animasyon oluşturma ö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 kırmızıdan yeşile döner. Mülk kaydedilmediğinde, tarayıcı bir değer ile bir sonraki değer arasında ne bekleyeceğini bilmediğinden renkler arasında geçiş yapamaz. Bu nedenle, renkler arasında geçiş yapma özelliği garanti edilemez. Ancak bu örnek, CSS gradyanlarına animasyon eklemek için bir adım daha ileriye taşınabilir. Aşağıdaki CSS, aynı kayıtlı özellik ile yazılabilir:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

Bu, linear-gradient'nın parçası olan özel özelliğimizi animasyonlu hale getirerek doğrusal gradyanımızı animasyonlu hale getirir. Tam kodu çalışırken görmek ve kendiniz denemek için aşağıdaki Codepen'i inceleyin.

Sonuç

Houdini, tarayıcılara geliyor. Bu yeni araçla birlikte CSS'yi kullanmak ve genişletmek için tamamen yeni yöntemler sunulacak. Paint API'nin kullanıma sunulmasının ardından Custom Props and Vals'ın da eklenmesiyle reklam öğesi araç kutumuz genişliyor. Bu sayede, türü belirlenmiş CSS özellikleri tanımlayabiliyor ve bunları yeni ve heyecan verici tasarımlar oluşturup canlandırmak için kullanabiliyoruz. Houdini sorun kuyruğunda daha fazla bilgiye ulaşabilir, geri bildirimde bulunabilir ve Houdini'de sırada neler olduğunu görebilirsiniz. Houdini, web'deki stil ve düzenin "sihrini" açıklayan özellikler geliştirmek için vardır. Bu nedenle, sihirli özellikleri kullanmaya başlayın.

Fotoğrafçı: Maik Jonietz Unsplash