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

CSS Houdini CSS işleme motorunun parçalarını ortaya çıkaran ve geliştiricilere CSS Nesne Modeli’ne erişim sağlayan bir dizi düşük seviyeli API’yi kapsayan bir şemsiye terimdir. Bu, geliştiricilerin tarayıcıya, tarayıcı satıcılarının bu özellikler için yerleşik destek sağlamasını beklemeden özel CSS’yi nasıl okuyacağını ve ayrıştıracağını söylemesini sağladığından, CSS ekosistemi için büyük bir değişikliktir. Çok heyecanlı!

Houdini şemsiyesi içinde CSS’ye yapılan en heyecan verici eklemelerden biri, Özellikler ve Değerler API’sı.

Bu API, CSS testine olanak tanıyan semantik anlam (sözdizimi tarafından tanımlanan) ve hatta geri dönüş değerleri vererek CSS özel özelliklerinizi (genellikle CSS değişkenleri olarak da adlandırılır) güçlendirir.

Houdini özel özelliklerini yazma #

İşte özel bir özellik (düşün: CSS değişkeni) ayarlamanın bir örneği, ancak şimdi bir sözdizimi (tür), başlangıç ​​değeri (geri dönüş) ve kalıtım boole (ebeveyninden miras alıyor mu, almıyor mu?). Bunu yapmanın şu anki yolu, CSS.registerProperty() JavaScript’te, ancak Chromium 85 ve sonrasında @property sözdizimi CSS dosyalarınızda desteklenecektir:

CSS.registerProperty({
name: '--colorPrimary',
syntax: '&LTcolor>',
initialValue: 'magenta',
inherits: false
});

@property --colorPrimary {
syntax: '&LTcolor>';
initial-value: magenta;
inherits: false;
}

Şimdi erişebilirsiniz --colorPrimary diğer herhangi bir özel CSS özelliği gibi var(--colorPrimary). Ancak buradaki fark, --colorPrimary sadece bir dizi olarak okunmaz. Verileri var!

Yedek değerler #

Diğer herhangi bir özel özellikte olduğu gibi, değerleri alabilir (var kullanarak) veya ayarlayabilirsiniz (yazma/yeniden yazma) ancak Houdini özel özellikleriyle, geçersiz kılarken bir falsey değeri ayarlarsanız, CSS işleme motoru satırı yok saymak yerine ilk değeri (geri dönüş değeri) gönderir.

Aşağıdaki örneği düşünün. bu --colorPrimary değişken bir initial-value ile ilgili magenta. Ancak geliştirici ona “23” geçersiz değerini verdi. Olmadan @property, CSS ayrıştırıcısı geçersiz kodu yok sayar. Şimdi, ayrıştırıcı geri düşüyor magenta. Bu, CSS içinde gerçek geri dönüşlere ve testlere izin verir. Düzenli!

.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özdizimi #

Sözdizimi özelliği ile artık bir tür belirterek semantik CSS yazabilirsiniz. İzin verilen mevcut türler şunları içerir:

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (özel bir tanımlayıcı dizesi)

Bir sözdizimi ayarlamak, tarayıcının özel özellikleri kontrol etmesini sağlar. Bunun birçok faydası var.

Bu noktayı açıklamak için size bir degradeyi nasıl canlandıracağınızı göstereceğim. Şu anda, her bir degrade bildirimi bir dize olarak ayrıştırıldığından, degrade değerleri arasında düzgün bir şekilde canlandırmanın (veya enterpolasyonun) bir yolu yoktur.

Bu örnekte, gradyan durma yüzdesi, bir fareyle üzerine gelme etkileşimi aracılığıyla %40’lık bir başlangıç ​​değerinden %100’lük bir bitiş değerine canlandırılıyor. Bu üst degrade rengin aşağı doğru yumuşak bir geçişini görmelisiniz.

Soldaki tarayıcı, Houdini Properties and Values ​​API’yi destekleyerek yumuşak bir gradyan durdurma geçişine olanak tanır. Sağdaki tarayıcı değil. Desteklemeyen tarayıcı bu değişikliği ancak A noktasından B noktasına giden bir dizi olarak anlayabilir. Değerleri enterpolasyon yapma imkanı yoktur ve dolayısıyla bu yumuşak geçişi göremezsiniz.

Ancak, özel özellikleri yazarken sözdizimi türünü bildirirseniz ve ardından bu özel özellikleri animasyonu etkinleştirmek için kullanırsanız, geçişi görürsünüz. Özel özelliği başlatabilirsiniz --gradPoint şöyle:

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

Ardından, onu canlandırma zamanı geldiğinde, değeri başlangıçtaki değerden güncelleyebilirsiniz. 40% ile 100%:

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

Bu, şimdi o yumuşak gradyan geçişini sağlayacaktır.

Çözüm #

bu @property rule, CSS’nin kendi içinde anlamsal olarak anlamlı CSS yazmanıza izin vererek 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 şu kaynaklara göz atın:

fotoğrafı çeken Cristian Escobar Unsplash’ta.