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

Una Kravets

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:

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 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.

Belirli bir syntax ile kayıtlı bir özel özellik yazarken initial-value eklemeniz de gerekir.

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.

"number" değerine sahip bir özel özellik kullanma söz dizimini kullanıyorsanız, soldaki gradyan yumuşak bir durma değerleri arasında geçiş yapar. Sağdaki gradyan, varsayılan bir özel özellik kullanır (söz dizimi tanımlanmamış) ve ani bir geçiş gösteriyor.

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:

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

Ardından animasyon zamanı geldiğinde ilk 40% olan değeri 100% olarak güncelleyebilirsiniz:

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

Böylece yumuşak gradyan geçişi etkinleştirilir.

Gradyan kenarlıkları yumuşak geçiş yapıyor. Glitch'teki Demoyu İnceleyin

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