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

CSS'de geçişler ve veri koruma

Sam Richard

CSS olarak da bilinen CSS özel özellikleri değişkenleri, Böylece CSS'de kendi özelliklerinizi tanımlayabilir ve bu özelliklerin değerlerini CSS'ye dokunun. Bugün son derece kullanışlı olsalar da, eksiklikleri nedeniyle zor olabilir: Herhangi bir değeri alabilirler, bu yüzden beklenmedik bir şeyle geçersiz kılınırsa değerlerini her zaman anne veya babasına ait olur ve onun geçişini yapamazsınız. Houdini'nin CSS Mülkleri ve Değerler API Düzeyi 1, Chrome 78'de kullanıma sunulduktan sonra bu eksiklikler ortadan kalktık ve bu da son derece güçlü özel özellikler sağlar.

Houdini Nedir?

Yeni API'den bahsetmeden önce biraz Houdini'den bahsedelim. CSS-TAG CSS Houdini ya da kısaca Houdini olarak bilinen Houdini Görev Gücü "sihrini" açıklayan özellikler hale getiriyoruz". Houdini spesifikasyonları koleksiyonu tarayıcının oluşturma motorunun gücünü açığa çıkaracak şekilde tasarlanmıştır. Böylece hem stillerimize ve oluşturma motorumuzu genişletme becerimize ilişkin daha derinlikli bir analiz elde ettik. Bununla, CSS değerlerinin JavaScript'te yazılması ve çoklu dolgu yapılması ya da yeni CSS'nin icat edilmesi performans isabeti olmadan da gerçekten mümkün. Houdini, kariyerine en iyi reklam biçimlerine odaklanacağız.

CSS Properties andvalues API düzeyi 1

CSS Özellikleri ve Değerleri API Düzeyi 1 (Houdini Props ve Vals), özel özelliklerimize yapı vermemize olanak tanır. Bu, aşağıdaki durumlarla karşılaşabilirsiniz:

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

Özel özelliklerde tür olmadığından beklenmedik özelliklerde geçersiz kılınabilirler yolları. Ö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 bir URL'nin geçerli olmadığını anlamaz renk değeri! Kullandığımızda varsayılan değerlere (color için siyah, background için şeffaf) girin. Houdini Dekorları ve Valsleri ile, Tarayıcının ne olması gerektiğini bilmesi için kayıtlı olmalıdır!

Artık --my-color özel özelliği renk olarak kaydedilir! Bu sayede hangi tür değerlere izin verildiğini ve bunların nasıl sahip!

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 alıp almadığı. Varsayılan olarak true değerine ayarlanır.

initialValue: string

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

syntax uygulamasına daha yakından bakalım. Paydaşlar için geçerli seçenekleri sayılardan, renklere ve <custom-ident> bulunur. Bu söz dizimleri, aşağıdaki değerler kullanılarak da değiştirilebilir

• + eklenmesi, değer listesinin boşlukla ayrılmış listesini kabul ettiği anlamına gelir söz dizimini söyler. Örneğin, <length>+, uzunluklar
• Ek#, değerin virgülle ayrılmış bir değer listesini kabul ettiğini söz dizimini söyler. Örneğin, <color>#, renkler
• Sözdizimleri veya tanımlayıcılar arasına | eklenmesi, sağlanan geçerlidir. Örneğin, <color># | <url> | magic şunlardan birine izin verir: virgülle ayrılmış bir renk listesi, bir URL veya magic kelimesi.

Gotchas

Houdini aksesuarı ve Vals'in yer aldığı iki getchas var. İlki, bir kez tanımlı bir mülkü güncellemenin yolu yoktur ve bir özelliği yeniden kaydetmek, özelliğin yeniden kaydedildiğini belirten bir hata verir tanımlanmıştır.

İkinci olarak, standart mülklerden farklı olarak kayıtlı mülkler ayrıştırılırlar. Bunun yerine, hesaplandıklarında doğrulanırlar. Yani hem öğenin özellikleri incelenirken geçersiz değerlerin geçersiz ve geçerli bir mülkten sonra geçersiz özellik eklenmesi, bu yeni özellikleri aynı olmalıdır; ancak geçersiz bir mülk, kayıtlı olan site varsayılan değerini alır.

Özel özelliklere animasyon ekleme

Kayıtlı özel mülk, tür kontrolünün ötesinde eğlenceli bir bonus sunar: animasyon ekleme yeteneği. Temel 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>

Düğmenin üzerine geldiğinizde kırmızıdan yeşile geçiş yapar. Yok: özellik kaydedilirse bir renkten diğerine atlar. Çünkü, olmadan, tarayıcı başka bir web sitesi arasında ne olacağını ve bu nedenle de bunların geçişini garanti edemez. Ancak bu örneği bir adım daha öteye taşıyarak CSS renk geçişlerini canlandırabilirsiniz! İlgili içeriği oluşturmak için kullanılan 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 kapsamındaki özel özelliğimize animasyon ekler ve böylece çizgisel gradyanımızı değiştiriyoruz. Kodun tamamını görmek için aşağıdaki Glis'i inceleyin. bir uygulamadır.

Sonuç

Houdini artık tarayıcılara gidiyor ve bununla birlikte, ve CSS'yi genişletmek için tamamen yeni yollar sunuyor. Boya ile API zaten gönderilmiş Şimdi Özel Sahneler ve Valsler olan reklam öğesi araç kutumuz genişliyor. yazılan CSS özelliklerini tanımlama ve bunları kullanarak yeni ve heyecan verici yeni öğeler oluşturup animasyon oluşturma tasarımlar. Daha fazlası da var, Houdini meselesinde. Bu sıra Houdini için sonraki ürüne bakacağız. Houdini, özellik geliştirmek için kurulmuştur "sihrini" açıklayan web'deki stil ve düzen açısından farklılık gösterir. Bu yüzden, bu büyülü özellikleri kullanmaya başlayın.

Fotoğrafı çeken: Maik Jonietz açık Başlangıç