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

CSS'de geçişler ve veri koruma

Sam Richard

CSS değişkenleri olarak da bilinen CSS özel özellikleri, CSS'de kendi mülklerinizi tanımlamanıza ve bu mülklerin değerlerini CSS genelinde kullanmanıza olanak tanır. Günümüzde çok kullanışlı olan bu özellikler, çalışmayı zorlaştıran dezavantajlar içeriyor: Beklenmedik bir durum nedeniyle yanlışlıkla geçersiz kılınabilecek her türlü değeri alabilirler, değerlerini her zaman ebeveynlerinden alırlar ve geçiş yapamazsınız. Houdini'nin CSS Özellikleri ve Değerleri API Düzeyi 1 şu anda Chrome 78'de kullanılabilen bu eksikliklerin ötesine geçerek CSS özel özelliklerini son derece güçlü hale getiriyor.

Houdini Nedir?

Yeni API'den bahsetmeden önce hızlıca Houdini'den bahsedelim. CSS Houdini veya kısaca Houdini olarak bilinen CSS-TAG Houdini Görev Gücü, web'de stil ve düzen 'büyülü'nü açıklayan özellikler geliştirmeyi amaçlamaktadır. Houdini spesifikasyonları koleksiyonu, tarayıcının oluşturma motorunun gücünü ortaya çıkaracak ve hem stillerimiz hakkında daha ayrıntılı bilgi edinmeye hem de oluşturma motorumuzu genişletmemize imkan tanıyacak şekilde tasarlanmıştır. Bu sayede, JavaScript'te yazılan CSS değerleri ve çoklu doldurma ya da performans isabeti olmadan yeni CSS icat edilmesi nihayetinde mümkün olur. Houdini, web'deki yaratıcılığı çok güçlü bir şekilde gösterme potansiyeline sahip.

CSS Özellikleri ve Değerleri API'sı Düzey 1

CSS Özellikleri ve Değerleri API'si Düzey 1 (Houdini Önerileri ve Değerleri), özel özelliklerimizi yapılandırmamıza olanak tanır. Özel özellikleri kullanırken şu anki durum şudur:

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

Özel özelliklerin türü olmadığından beklenmedik yollarla 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ı bilmez! 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ının ne olması gerektiğini bilir!

Şimdi, --my-color özel özelliği bir renk olarak kaydedildi! Bu, tarayıcıya ne tür değerlere izin verildiğini ve bu özelliği nasıl yazıp işleyebileceğini bildirir.

Tescilli mülkün anatomisi

Mülk kaydı ş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 ö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 ürününe daha yakından bakalım. Sayılardan renklere ve <custom-ident> türlerine kadar birçok geçerli seçenek vardır. Bu söz dizimleri aşağıdaki değerler kullanılarak da değiştirilebilir

• + ekleme, söz konusu söz diziminin boşlukla ayrılmış bir değer listesini kabul ettiğini belirtir. Örneğin <length>+, boşlukla ayrılmış uzunluk listesidir
• Ekleme#, söz konusu söz diziminin değerlerin virgülle ayrılmış listesini kabul ettiğini belirtir. Örneğin <color>#, virgülle ayrılmış bir renk listesidir.
• Söz dizimi veya tanımlayıcılar arasına | eklenmesi, sağlanan seçeneklerden herhangi birinin geçerli olduğunu belirtir. Örneğin <color># | <url> | magic, virgülle ayrılmış renk listesine, URL'ye veya magic sözcüğüne izin verir.

Anladım

Houdini Props ve Vals ile iki özellik var. Birincisi, bir kez tanımlandıktan sonra mevcut bir kayıtlı özelliği güncellemenin mümkün olmamasıdır ve bir özelliği yeniden kaydetmeye çalışıldığında özelliğin zaten tanımlanmış olduğunu belirten bir hata verilir.

İkinci olarak, kayıtlı özellikler standart özelliklerden farklı olarak ayrıştırıldığında doğrulanmaz. Daha ziyade hesaplandığı zaman doğrulanırlar. Bu, hem öğenin özellikleri incelenirken geçersiz değerlerin, hem de geçerli bir özellikten sonra geçersiz bir özelliğin eklenmesi, geçerli özelliğe katılmayacağı anlamına gelir. Bununla birlikte, geçersiz bir özellik, kayıtlı mülkün varsayılan değerini kullanır.

Özel özelliklere animasyon ekleme

Kayıtlı bir özel mülk, tür kontrolünden çok daha eğlenceli bir bonus sunar: canlandırma ö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>

Düğmenin üzerine geldiğinizde kırmızıdan yeşile dönüşür! Özelliğin kaydı yapılmadığında, bir renkten diğerine atlar. Çünkü, tarayıcı kaydedilmeden bir değer ile bir sonraki değer arasında ne bekleyeceğini bilemez ve bu nedenle, bunları geçirmeyi garanti edemez. Ancak bu örnek, CSS renk geçişlerini canlandırmak için bir adım daha ileri götürülebilir. Aşağıdaki CSS aynı kayıtlı özellikle 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 parçası olan özel mülkümüze animasyon uygular ve böylece, doğrusal renk geçişimizi de canlandırır. Kodun tamamını görmek için aşağıdaki Glitch'e göz atın ve kodu kendiniz değiştirin.

Sonuç

Houdini, tarayıcılarla birlikte CSS ile çalışma ve CSS'yi genişletmenin yeni yollarıyla birlikte. Paint API'nin kullanıma sunulmasıyla birlikte artık Özel Görünüm ve Valsler'le birlikte reklam öğesi araç kutumuz, yazılan CSS özelliklerini tanımlayıp yeni ve heyecan verici tasarımlar oluşturmak ve canlandırmak için kullanmamıza olanak tanıyarak reklam öğesi araç kutumuzu genişletiyor. Geri bildirimde bulunabileceğiniz ve Houdini için sıradaki adımları öğrenebileceğiniz Houdini sayı sırasına da gelecek pek çok şey var. Houdini'nin amacı, web'de stil ve düzenin "sihirli" özelliğini açıklayan özellikler geliştirmektir. Harekete geçin ve bu sihirli özellikleri iyi kullanın.

Fotoğrafçı: Maik Jonietz on Unsplash