CSS Houdini, CSS oluşturma motorunun parçalarını açığa çıkaran ve geliştiricilerin CSS Nesne Modeli'ne erişmelerini sağlayan alt düzey API'ler grubunu kapsayan bir şemsiye terimdir. Bu, CSS ekosistemi için büyük bir değişikliktir çünkü geliştiricilerin, tarayıcı tedarikçilerinin bu özellikler için yerleşik destek sağlamalarını beklemeden tarayıcıya özel CSS'yi nasıl okuyacağını ve ayrıştıracağını söylemesini sağlar. Çok heyecan verici!
Houdini şemsiyesi içinde CSS'ye yapılan en heyecan verici eklemelerden biri Özellikler ve Değerler API'si.
Bu API, CSS özel özelliklerinizi (genellikle CSS değişkenleri olarak da adlandırılır) semantik anlam (söz dizimi ile tanımlanır) ve hatta yedek değerler vererek güçlendirir. Böylece CSS testini etkinleştirir.
Houdini özel özelliklerini yazma
Aşağıda, özel özellik (ör. CSS değişkeni) ayarlamayla ilgili bir örnek verilmiştir. Ancak bu örnekte söz dizimi (tür), başlangıç değeri (yedek) ve devralma boole'si (değer üst öğesinden devralınır mı?) Bunu yapmanın şu anki yolu JavaScript'te CSS.registerProperty()
kullanmaktır, ancak desteklenen tarayıcılarda @property
öğesini kullanabilirsiniz:
CSS.registerProperty({ name: '--colorPrimary', syntax: '', initialValue: 'magenta', inherits: false });
@property --colorPrimary { syntax: ''; initial-value: magenta; inherits: false; }
Artık var(--colorPrimary)
aracılığıyla diğer tüm CSS özel mülklerinde olduğu gibi --colorPrimary
özelliğine erişebilirsiniz. Ancak buradaki fark, --colorPrimary
öğesinin yalnızca bir dize olarak okunmamasıdır. Veriler var!
Yedek değerler
Diğer tüm özel mülklerde olduğu gibi (var
kullanarak) veya ayarlama (yazma/yeniden yazma) değerleri alabilirsiniz. Ancak Houdini özel özelliklerinde bu değeri geçersiz kılarken yanlış değer ayarlarsanız CSS oluşturma motoru, satırı yoksaymak yerine başlangıç değerini (yedek değerini) gönderir.
Aşağıdaki örneği inceleyin. --colorPrimary
değişkeni, initial-value
metriğinin magenta
değerine sahip. Ancak geliştirici buna geçersiz
değer olarak "23" verdi. @property
kullanılmadığında CSS ayrıştırıcı geçersiz kodu yoksayar. Ayrıştırıcı magenta
değerine geri döner. Bu, CSS içinde gerçek yedeklere ve testlere olanak tanır. Çok iyi!
.card {
background-color: var(--colorPrimary); /* magenta */
}
.highlight-card {
--colorPrimary: yellow;
background-color: var(--colorPrimary); /* yellow */
}
.another-card {
--colorPrimary: 23;
background-color: var(--colorPrimary); /* magenta */
}
Söz dizimi
Söz dizimi özelliğiyle artık bir tür belirterek semantik CSS yazabilirsiniz. Şu anda izin verilen türler şunlardır:
length
number
percentage
length-percentage
color
image
url
integer
angle
time
resolution
transform-list
transform-function
custom-ident
(özel tanımlayıcı dizesi)
Bir söz dizimi ayarlamak, tarayıcının özel özelliklerde yazma kontrolü yapmasına olanak tanır. Bunun pek çok avantajı vardır.
Bu noktayı göstermek için, bir renk geçişine nasıl animasyon uygulayacağınızı göstereceğim. Şu anda, gradyan değerleri arasında sorunsuz bir animasyon (veya interpolasyon) yapmanın bir yolu yoktur. Bunun nedeni, her gradyan bildiriminin bir dize olarak ayrıştırılmış olmasıdır.
Bu örnekte, gradyan durması yüzdesinin üzerine gelme etkileşimi aracılığıyla% 40'lık bir başlangıç değerinden% 100'lük bir bitiş değerine animasyon uygulanmaktadır. Üst gradyan renginin aşağı doğru yumuşak bir geçişini görmeniz gerekir.
Soldaki tarayıcı, Houdini Properties and Goals API'sini destekleyerek yumuşak bir renk geçişi durdurma geçişi sağlar. Sağdaki tarayıcı bunu yapmaz. Desteklenmeyen tarayıcı, bu değişikliği yalnızca A noktasından B noktasına giden bir dize olarak anlayabilir. Değerleri interpolasyona ayırma fırsatı yoktur ve dolayısıyla bu yumuşak geçişi görmezsiniz.
Ancak özel özellikler yazarken söz dizimi türünü beyan eder ve ardından animasyonu etkinleştirmek için bu özel özellikleri kullanırsanız geçişi görürsünüz. --gradPoint
özel özelliğini şu şekilde örnekleyebilirsiniz:
/* Check for Houdini support & register property */
@supports (background: paint(something)) {
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
}
Ardından animasyon oluşturma zamanı geldiğinde, baştaki 40%
değerini 100%
olarak güncelleyebilirsiniz:
@supports (background: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}
Bu, artık bu yumuşak renk geçişi geçişini etkinleştirir.
Sonuç
@property
kuralı, CSS'nin içinde semantik olarak anlamlı CSS yazmanıza olanak tanıyarak heyecan verici bir teknolojiyi daha da erişilebilir hale getirir. CSS Houdini ve Özellikler ve Değerler API'si hakkında daha fazla bilgi edinmek için şu kaynaklara göz atın:
- Houdini Henüz Hazır mı?
- MDN Houdini Referansı
- Houdini'nin yeni API'si ile daha akıllı özel özellikler
- Houdini CSSWG Sorun Sırası
Fotoğraf: Cristian Escobar'ın Unsplash'inde.