CSS Houdini, CSS oluşturma motorunun bölümlerini gösteren ve geliştiricilere CSS nesne modeline erişim sağlayan bir dizi düşük düzey API'yi kapsayan bir çatı terimidir. Bu, geliştiricilerin tarayıcıya, tarayıcı tedarikçi firmalarının bu özellikler için yerleşik destek sağlamasını beklemeden özel CSS'nin nasıl okunacağını ve ayrıştırılacağını söylemesini sağladığından CSS ekosisteminde büyük bir değişikliktir. Heyecan verici.
Houdini çatısı altında CSS'ye eklenen en heyecan verici özelliklerden biri Özellikler ve Değerler API'sidir.
Bu API, CSS özel özelliklerinize (genellikle CSS değişkenleri olarak da adlandırılır) anlamsal anlam (söz dizimi ile tanımlanır) ve hatta yedek değerler vererek CSS testini etkinleştirir.
Houdini özel özelliklerini yazma
Özel bir özelliği (CSS değişkeni gibi) ayarlama örneğini aşağıda bulabilirsiniz. Bu örnekte söz dizimi (tür), ilk değer (yedek) ve devralma boole değeri (özelliği üst öğesinden devralınıyor mu yoksa değil mi?) yer alır. Bunu yapmanın mevcut yolu JavaScript'te CSS.registerProperty()
kullanmaktır ancak destekleyen tarayıcılarda @property
kullanabilirsiniz:
CSS.registerProperty({
name: '--colorPrimary',
syntax: '<color>',
initialValue: 'magenta',
inherits: false
});
@property --colorPrimary {
syntax: '<color>';
initial-value: magenta;
inherits: false;
}
Artık --colorPrimary
'e diğer tüm CSS özel mülkleri gibi var(--colorPrimary)
üzerinden erişebilirsiniz. Ancak buradaki fark, --colorPrimary
'ün yalnızca bir dize olarak okunmasıdır. Veri içeriyor.
Yedek değerler
Diğer tüm özel özelliklerde olduğu gibi, değerleri alabilir (var
kullanarak) veya ayarlayabilirsiniz (yazma/yeniden yazma). Ancak Houdini özel özelliklerinde, geçersiz kılarken yanlış bir değer ayarlarsanız CSS oluşturma motoru satırı yoksaymak yerine ilk değeri (yedek değerini) gönderir.
Aşağıdaki örneği inceleyin. --colorPrimary
değişkeni initial-value
değerine magenta
sahip. Ancak geliştirici, bu alana "23" değerini girmiştir. @property
olmadan, CSS ayrıştırıcı geçersiz kodu yoksayar. Şimdi ayrıştırıcı, magenta
değerine geri döner. Bu, CSS içinde doğru yedeklere ve testlere olanak tanır. Güzel.
.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)
Söz diziminin ayarlanması, tarayıcının özel özellikleri yazım denetimi yapmasına olanak tanır. Bunun birçok avantajı vardır.
Bu noktayı göstermek için, bir gradyana nasıl animasyon uygulayacağınızı göstereceğim. Şu anda, her gradyan bildirimi bir dize olarak ayrıştırıldığından, gradyan değerleri arasında sorunsuz bir şekilde animasyon oluşturmak (veya ara değer eklemek) mümkün değildir.
Bu örnekte, degrade bitiş yüzdesi, fareyle üzerine gelme etkileşimi aracılığıyla% 40'lık başlangıç değerinden% 100'lük bitiş değerine kadar animasyonlu olarak gösterilmektedir. Üstteki renk geçişinin aşağıya doğru yumuşak bir şekilde değiştiğini göreceksiniz.
Soldaki tarayıcı, Houdini Properties and values API'yi destekler ve böylece yumuşak bir gradyan durdurma geçişini mümkün kılar. Sağdaki tarayıcıda bu seçenek yoktur. Desteklenmeyen tarayıcı, bu değişikliği yalnızca A noktasından B noktasına giden bir dize olarak anlayabilir. Değerleri enterpolasyonla belirleme imkanı yoktur ve bu nedenle bu sorunsuz geçişi görmezsiniz.
Bununla birlikte, özel özellikleri yazarken söz dizimi türünü bildirir ve animasyonu etkinleştirmek için bu özel özellikleri kullanırsanız geçişi görürsünüz. Özel --gradPoint
mülkünü aşağıdaki gibi örneklendirebilirsiniz:
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
Ardından, animasyon oluşturma zamanı geldiğinde değeri ilk 40%
değerinden 100%
değerine güncelleyebilirsiniz:
.post:hover,
.post:focus {
--gradPoint: 100%;
}
Bu sayede, pürüzsüz bir degrade geçişi elde edebilirsiniz.
Sonuç
@property
kuralı, CSS içinde anlamlı CSS yazmanıza olanak tanıyarak heyecan verici bir teknolojiyi daha da erişilebilir hale getirir. CSS Houdini ve Properties and Values API hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:
- Houdini 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, Unsplash.