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ı tedarikçi firmalarının bu özellikler için yerleşik destek sunmasını beklemeden tarayıcıya özel CSS'yi nasıl okuyacağını ve ayrıştıracağını söylemesine olanak tanıdığı için CSS ekosistemi için büyük bir değişikliktir. Çok 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ştirerek CSS özel özelliklerinizi güçlendirir.
Houdini özel özelliklerini yazma
Aşağıda, özel bir özelliği (CSS değişkeni gibi) ayarlama örneği verilmiştir. 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 almaktadı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
özelliğine diğer tüm CSS özel mülkleri gibi var(--colorPrimary)
üzerinden erişebilirsiniz. Ancak buradaki fark, --colorPrimary
'ün yalnızca bir dize olarak okunmamasıdır. Verileri var.
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şkeninin initial-value
değeri magenta
. Ancak geliştirici, bu alana "23" değerini girmiştir. @property
olmadan CSS ayrıştırıcı, geçersiz kodu yok sayar. Ardından ayrıştırıcı, magenta
değerine geri döner. Bu sayede CSS'de gerçek yedekleme ve test yapılabilir. 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 anlamsal 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 dizimi ayarlamak, tarayıcının özel özellikleri yazım açısından kontrol etmesini sağlar. Bunun birçok avantajı vardır.
Bu noktayı açıklamak için bir degradenin nasıl animasyonlu hale getirileceğini göstereceğim. Her gradyan beyanı bir dize olarak ayrıştırıldığı için şu anda gradyan değerleri arasında sorunsuz bir şekilde animasyon oluşturmak (veya ara değer hesaplamak) 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 geçiş yaptığını göreceksiniz.
Soldaki tarayıcı, Houdini Properties and Values API'yi destekler ve pürüzsüz bir degrade durak geçişi sağlar. Sağdaki tarayıcıda bu seçenek yoktur. Desteklemeyen tarayıcı, bu değişikliği yalnızca A noktasından B noktasına giden bir dize olarak anlayabilir. Değerleri interpole etme fırsatı olmadığından bu sorunsuz geçişi göremezsiniz.
Ancak özel özellikler yazarken söz dizimi türünü belirtirseniz ve ardından 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, yumuşak degrade geçişi etkinleştirilir.
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 mülkler
- Houdini CSSWG Sorun Sırası
Fotoğraf: Cristian Escobar, Unsplash.