Video: CSS Özel Özelliklerinde 90 Saniye

Faydalı Alternatif Metin Yazma

Geçen yıl konuştuğum Gelecek Senkronizasyon konferans ve bu yıl organizatörler bana bir CSS konusuna kısa bir kayıtlı giriş sunup sunamayacağımı sordular. En sevdiğim (nispeten) son CSS özelliklerinden biri olan CSS özel özellikleriyle ilgili 90 saniyelik bir video hazırladım ve burada sizinle paylaşayım dedim.

Aşağıda bir de transkript var.

Deşifre metni

CSS Özel Özellikleri, stil sayfalarınızda yeniden kullanım için değerleri saklamanıza olanak tanır.

Diğer programlama dillerine veya CSS ön işlemcilerine aşina iseniz, muhtemelen değişkenlerle karşılaşmışsınızdır. CSS Özel Özellikleri, CSS değişkenleri olarak da bilinir ve bazı benzerlikleri vardır.

Örnek olarak, diyeceğimiz bir renk değeri değişkeni tanımlayabiliriz. primaryColorüzerinde root eleman:

:root {
--primaryColor: #f542d7;
}

Bu, onu bir özellik değeri yerine stil sayfamızın herhangi bir yerinde kullanabileceğimiz global bir değişken yapar.

.some-element {
background-color: var(--primaryColor);
}

Alternatif olarak, bir seçicide özel özelliği tanımlayabilir ve seçiciyi ve onun alt öğelerini kapsayabilir.

.some-element {
--primaryColor: #f542d7;
background-color: var(--primaryColor);
}

Özel bir özellik kullandığımızda, varsayılan bir değer de belirleyebiliriz. Bu şekilde, custom özelliği kullandığımız noktada tanımlanmadıysa, varsayılana geri dönecektir.

.some-element {
background-color: var(--primaryColor, #6942f5);
}

Özel özellikler, CSS veya Javascript ile güncellenebilir, bu da onları gerçekten dinamik değişkenler haline getirir.

Bunları diğer özel özelliklerin değerlerini hesaplamak için bile kullanabiliriz ve bu da onlara çok güzel yaratıcı olasılıklar sağlar.

Bir örnek, kademeli bir animasyon efektidir.

İlk olarak, her öğeye, öğenin dizinine karşılık gelen özel bir özellik atarız:

.some-element:nth-child(2) {
--i: 2;
}

.some-element:nth-child(3) {
--i: 3;
}

Sonra bu değişkeni başka bir özel özelliği hesaplamak için kullanırız. delay:

.some-element {
--delay: calc(var(--i, 1) * 400ms);
}

Şimdi bu özel özelliği yerine kullanabiliriz. animation-delay steno özelliğindeki değer:

.some-element {
--delay: calc(var(--i, 1) * 400ms);
animation: fadeIn 1000ms var(--delay) forwards;
}

Bu, kodumuzu çok daha özlü ve sürdürülebilir kılıyor ve bir değişiklik yapmak istiyorsak birçok farklı yerde değerleri ayarlamamız gerekmiyor.

Bu Codepen demosu ile kendiniz deneyin:

Kalemi Gör Özel özelliklere sahip kademeli animasyon Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Veya kontrol et Bu makale yararlı olabilecekleri diğer bazı fikirler için.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.