CSS Houdini, CSS oluşturma motorunun parçalarını açığa çıkaran ve alt düzey API'ler geliştiricilerin CSS Nesne Modeli'ne erişmesini sağlar. Bu, muazzam bir CSS ekosistemindeki bir değişime dayanır. Bu da geliştiricilerin, tarayıcıya nasıl bir dönüşüm tarayıcı tedarikçi firmalarının sağlamasını beklemeden özel CSS'yi okumak ve ayrıştırmak için yerleşik destek bulabilirler. Heyecan verici.
Houdini şemsiyesi kapsamında CSS'ye eklenen en heyecan verici şeylerden biri Özellikler ve Değerler API.
Bu API, CSS özel özelliklerinizi güçlendirir (genellikle CSS değişkenleri) anlam ifade eder (söz dizimiyle tanımlanır) ve hatta CSS testini etkinleştirir.
Houdini özel özelliklerini yazma
Aşağıda özel mülk oluşturmaya ilişkin bir örnek verilmiştir (örneğin, CSS değişkeni).
söz dizimi (tür), ilk değer (fallback) ve devralma boole (
değeri üst öğesinden devralıp devralmayacak mı?). Bunu yapmanın şu anki yolu
JavaScript'te CSS.registerProperty()
aracılığıyla yükleyebilirsiniz, ancak destekleyici tarayıcılarda
@property
:
CSS.registerProperty({ name: '--colorPrimary', syntax: '<color>', initialValue: 'magenta', inherits: false });
@property --colorPrimary { syntax: '<color>'; initial-value: magenta; inherits: false; }
Artık --colorPrimary
hizmetine diğer CSS özel mülklerinde olduğu gibi erişebilirsiniz:
var(--colorPrimary)
. Ancak buradaki fark şudur: --colorPrimary
,
dize olarak okunur. Veri içeriyor.
Yedek değerler
Diğer tüm özel mülklerde olduğu gibi, (var
kullanarak) veya
(yazma/yeniden yazma) değerleri kullanılır ancak bir falsey değeri ayarlarsanız
değerine ayarlanırsa CSS oluşturma motoru başlangıç değerini gönderir
(yedek değeri) kullandığınızdan emin olun.
Aşağıdaki örneği inceleyin. --colorPrimary
değişkeni
initial-value
/magenta
. Ancak geliştirici, geçersiz
"23" değerine ayarlayın. @property
olmasaydı CSS ayrıştırıcısı
geçersiz kod. Şimdi ayrıştırıcı, magenta
değerine geri döner. Bu da
ve testler yürütebilirsiniz. Çok 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 tür. İzin verilen geçerli 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 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, gradyan değerleri arasında yumuşak bir animasyon (veya ara değer) yapmak mümkün değildir; her gradyan bildirimi bir dize olarak ayrıştırılır.
Bu örnekte, gradyan durak yüzdesi değerini% 40'lık bir bitiş değerine veya% 100'lük bir bitiş değerine yükseltmesi gerekir. Bir yumuşak bir geçiş sağlar.
Soldaki tarayıcı Houdini Properties andvalues API'yi destekliyor. Böylece yumuşak bir gradyan durdurma geçişi sağlanabilir. Sağdaki tarayıcı bunu yapmaz. İlgili içeriği oluşturmak için kullanılan desteklenmeyen bir tarayıcı, bu değişikliği yalnızca bir kontrol dizesi olarak anlayabilir noktası A noktasından B noktasına. Değerlerin interpolasyonu için herhangi bir fırsat yoktur ve Dolayısıyla bu yumuşak geçişi göremezsiniz.
Ancak, özel özellikleri yazarken söz dizimi türünü tanımlar ve daha sonra,
animasyonun etkinleştirilmesi için bu özel özellikleri kullanıyorsanız geçişi görürsünüz. Siz
--gradPoint
özel özelliğini şu şekilde örneklendirebilir:
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
Ardından animasyon zamanı geldiğinde ilk 40%
olan değeri 100%
olarak güncelleyebilirsiniz:
.post:hover,
.post:focus {
--gradPoint: 100%;
}
Böylece yumuşak gradyan geçişi etkinleştirilir.
Sonuç
@property
kuralı, heyecan verici bir teknolojiyi
Bu özellik, CSS'nin kendi içinde anlam açısından anlamlı CSS yazmanıza olanak tanır. Öğrenmek için
daha fazla bilgi edinmek için aşağıdaki konulara göz atın:
kaynaklar:
- 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 tarafından Unsplash'te