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'nizde 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-TAG Houdini Görev Gücü (CSS Houdini veya kısaca Houdini olarak da bilinir), "web'de stil ve düzenin "sihirini" 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ığı güçlendirme potansiyeline sahiptir.

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 parametresini bir URL ile tanımlarsanız ne olur?

.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 ve Vals ile özel özellikler kaydedilebilir. Böylece tarayıcı, ne olması gerektiğini bilir.

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 mülkü nasıl yazabileceğini ve işleyebileceğini söyler.

Kayıtlı bir mülkün anatomisi

Mülk kaydetme işlemi aşağıdaki gibidir:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Aşağıdaki seçenekleri destekler:

name: string

Özel mülkün adı.

syntax: string

Özel mülkü ayrıştırma. 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 dizimi, 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>+, boşlukla ayrılmış bir uzunluk listesi olur.
  • # 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> | magic için virgülle ayrılmış bir renk listesi, bir URL veya magic kelimesine izin verilir.

Dikkat edilmesi gereken noktalar

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ı alırsınız.

İkinci olarak, standart mülklerin aksine kayıtlı mülkler ayrıştırılırken 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 gelmek üzere. Bu özellikle birlikte CSS ile çalışmanın ve CSS'yi genişletmenin tamamen yeni yolları da kullanıma sunulacak. Paint API'nin kullanıma sunulmasının ardından şimdi de Özel Öğeler ve Değerler ile reklam öğesi araç setimiz genişledi. Bu sayede, yazı tipi CSS özelliklerini tanımlayabilir ve bunları yeni ve heyecan verici tasarımlar oluşturup animasyonlu hale getirmek için kullanabiliriz. Houdini sorun sırası'nda geri bildirimde bulunabilir ve Houdini'nin geleceğiyle ilgili gelişmeleri takip edebilirsiniz. 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: Unsplash'taki Maik Jonietz