@property: CSS değişkenlerine süper güçler verme

Una Kravets

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:

Ayrı JavaScript dosyası (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
CSS dosyasına eklendi (Chromium 85)
@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.

"number" söz dizimine sahip özel bir mülk kullanarak sol taraftaki degrade, durak değerleri arasında sorunsuz bir geçiş gösterir. Sağdaki degrade, varsayılan bir özel mülkü kullanır (söz dizimi tanımlanmamıştır) ve ani bir geçiş gösterir.

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.

Gradyan kenarlıkları arasında yumuşak geçiş. Glitch'te Demoyu Görün

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:

Fotoğraf: Cristian Escobar, Unsplash.