CSS Özel Özellikleri için 7 Kullanım

Özel özellikler (CSS değişkenleri olarak da bilinir), stil sayfalarımızda yeniden kullanım için özellik değerlerini saklamamıza izin verir. Onlar için nispeten yeniyseniz, bunları ne zaman önişlemci değişkenlerinin üzerinde kullanabileceğinizi merak edebilirsiniz (eğer gerçekten bir önişlemci kullanıyorsanız). Bu günlerde iş akışımda özel özellikleri çok kullanıyorum ve burada bazı kullanım durumlarını harmanlayacağımı düşündüm.

Bu, özel özelliklerin nasıl çalıştığına dair ayrıntılı bir kılavuz değildir, bu nedenle bir astara ihtiyacınız varsa aşağıdaki kaynakları öneririm:

Renk fonksiyonları

Özel özellikler sadece tüm özellik değerlerini temsil eder – kısmi değerleri de saklamak için kullanılabilirler. Yaygın olarak belirtilen bir kullanım durumu, CSS renk işlevlerindedir. HSLA Özel özelliklere özellikle iyi bir şekilde katkıda bulunur ve renklerin karıştırılması söz konusu olduğunda geliştiriciler olarak bize benzeri görülmemiş bir kontrol düzeyi sağlar.

.some-element {
  background-color: hsla(
    var(--h, 120),
    var(--s, 50),
    var(--l, 50),
    var(--a, 1)
  );
}

.some-element.darker {
  --l: 20;
}

Tamamlayıcı renkleri hesaplamak gibi çok havalı şeyler de yapabiliriz. Bu makale Geçen yıl yazdım, özel özelliklerle renk manipülasyonu için çok daha derinlemesine bir rehber ve Sara Soueidan konuyla ilgili harika bir makalesi de var.

steno özellikleri

gibi bir stenografi özelliği kullanıyorsanız animationve farklı bir öğe için bir değeri değiştirmeniz gerekir, ardından tüm özelliği yeniden yazmak hataya açık olabilir ve fazladan bir bakım yükü ekler. Özel özellikleri kullanarak, steno özelliğindeki tek bir değeri çok kolay bir şekilde ayarlayabiliriz:

.some-element {
  animation: var(--animationName, pulse) var(--duration, 2000ms) ease-in-out
    infinite;
}

.some-element.faster {
  --duration: 500ms;
}

.some-element.shaking {
  --animationName: shake;
}

tekrarlanan değerler

Üst dolgusu için tutarlı bir değere sahip, ancak diğer tüm taraflar için aynı değere sahip bir öğemiz olduğunu varsayalım. Özellikle dolgu değerlerini ayarlamak istiyorsak, aşağıdakileri yazmak biraz sıkıcı olabilir:

.some-element {
  padding: 150px 20px 20px 20px;
}

@media (min-width: 50em) {
  .some-element {
    padding: 150px 60px 60px 60px;
  }
}

Özel özellikleri kullanmak, bu dolguyu ayarlamak için tek bir yerimiz olduğu anlamına gelir. Daha da iyisi, site genelinde kullanılan standart bir değerse, onu değişken bir kısmi, yapılandırma dosyasında veya sitemizin tasarım belirteçleri.

:root {
  --pad: 20px;
}

@media (min-width: 50em) {
  :root {
    --pad: 60px;
  }
}

.some-element {
  padding: 150px var(--pad) var(--pad) var(--pad);
}

Karmaşık hesaplamalar

Özel özellikler, hesaplanan değerleri depolamak için gerçekten kullanışlı olabilir ( calc() işlevi), kendileri diğer özel özelliklerden bile hesaplanabilir. Bir örnek, daha önce belirtildiği gibi tamamlayıcı renkleri hesaplamaktır. Diğeri, bir özelliğin tersini hesaplamak istediğiniz zamandır. Kısa bir süre önce CSS Tricks için bir makale yazdım. bir gevşeme eğrisinin tersinin hesaplanması özel özellikleri ile.

Sıklıkla özel özellikleri kullanırım clip-path diğerine göre veya bilinen değişkenlere göre bir yol hesaplamam gerekirse. Yakın tarihli bir demodan alınan aşağıdaki kod, ikiye bölünmüş bir öğenin görünümünü vermek için iki sözde öğe için klip yolu noktalarını hesaplar.

.element {
  --top: 20%;
  --bottom: 80%;
  --gap: 1rem;
  --offset: calc(var(--gap) / 2);
}

.element::before {
  clip-path: polygon(
    calc(var(--top) + var(--offset)) 0,
    100% 0,
    100% 100%,
    calc(var(--bottom) + var(--offset)) 100%
  );
}

.element::after {
  clip-path: polygon(
    calc(var(--top) - var(--offset)) 0,
    calc(var(--bottom) - var(--offset)) 100%,
    0 100%,
    0 0
  );
}

Kalemi Gör CSS ile His Dark Materials TV dizisi logosu Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

sendeleyerek animasyonlar

Bir dizi alt öğe için animasyonları kademelendirmek istiyorsak, şık bir şekilde ayarlayabiliriz. animation-delay her birinde, özel özelliği öğenin dizini olarak tanımlayarak:

.element {
  --delay: calc(var(--i, 0) * 500ms);
  animation: fadeIn 1000ms var(--delay, 0ms);
}

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

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

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

Ne yazık ki şu anda değişkeni açıkça atamamız gerekiyor, bu da belirsiz sayıda çocuğumuz varsa sorun olabilir. JS’yi bölme öğenin dizinini bir değişken olarak atayarak bununla ilgilenen harika bir Javascript kitaplığıdır ve bu tür kademeli animasyonlar için çok kullanışlıdır. Ancak JS kullanmak zorunda kalmamak harika olurdu!

Adam Argyle yakın zamanda gönderdi bir teklif iki yeni CSS işlevi için, sibling-count() ve sibling-index()CSS ile bir sürü yeni şeyi mümkün kılan bir oyun değiştirici olurdu. Bu noktada herhangi bir tarayıcı tarafından benimsenmeye yakın değiller, ancak inanılmaz derecede güçlü bir ekleme olurdu, bu yüzden göz önünde bulundurulması gereken biri.

Duyarlı ızgaralar

bunun hakkında yazdım önce bu blogda, ancak özel özellikler, karmaşık Izgara düzenlerinin yönetimini kolaylaştırmaya yardımcı olabilir. Belirli bir kesme noktasında 12 sütunlu bir ızgaraya dönüştürmek istediğimiz 8 sütunlu bir ızgaramız olduğunu varsayalım:

:root {
  --noOfColumns: 8;
}

@media (min-width: 60em) {
  :root {
    --noOfColumns: 12;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--noOfColumns), 1fr);
}

Sütun sayısını güncellemek istediğimizde tüm özellik değerini yazmamız gerekmez – özel özellikleri kullanabiliriz. Bu nispeten basit bir örnek, ancak daha karmaşık bir ızgaramız varsa çok daha faydalı olabilir. Teknik, parça boyutu veya eşya yerleştirme gibi şeylere de uygulanabilir.

Satıcı önekleri

Bazı özellikler (gibi clip-path) hala bazı tarayıcılarda satıcı önekleri gerektiriyor – neyse ki bu sayı düşüyor. Bir satıcı öneki yazmanız gerekiyorsa ve ardından özellik değerini değiştirmek istiyorsanız, bunu önek özelliğinde de değiştirdiğinizden emin olmanız gerekir. Özel özelliklerle bunun yerine şunu yazabiliriz:

.some-element {
  --clip: polygon(0 0, 100% 0, 50% 100%, 0 100%);

  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

Şimdi değiştirmemiz gereken tek bir yerimiz var.

Çözüm

Bunlar, özel özelliklerin tek kullanımlarından çok uzaktır, ancak genellikle iş akışımda ulaştığımı bulduğum özelliklerdir ve kodunuzu daha verimli ve sürdürülebilir hale getirmeye yardımcı olabilir. Hiç şüphe yok ki, kendinize ait birçok kullanım alanı keşfedeceksiniz!