CSS'de geçişler ve veri koruma
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 veyamagic
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ıç