CSS Özel Özellikleriyle CSS'nizi Dinamik Hale Getirin

Bir süredir CSS yazıyorsanız, bir noktada değişkenlere ihtiyaç duymuş olmalısınız. CSS özel özellikleri, CSS'nin kendi değişken uygulamasına benzer. Ancak, doğru kullanıldıklarında, sadece değişkenlerden çok daha fazlası olabilirler.

CSS özel özellikleri şunları yapmanızı sağlar:

• Seçtiğiniz bir adla bir özelliğe isteğe bağlı değerler atayın
• Bu değerleri diğer özelliklerde kullanmak için var() işlevini kullanın.

CSS özel özellikleri için destek şu anda biraz zorlu bir yol olsa da ve bazı tarayıcılar bunları önceden etkinleştirilmesi veya doğru olarak ayarlanması gereken bayraklar altında desteklese de, desteklerinin ileriye doğru önemli ölçüde artması bekleniyor, bu yüzden anlamak önemlidir. nasıl kullanılır ve bunlardan yararlanılır. ¹

Bu makalede, stil sayfalarınızı biraz daha dinamik hale getirmek için CSS Özel Özelliklerini nasıl kullanabileceğinizi öğreneceksiniz, belki de varlık hattınızdaki bu ekstra Sass/LESS adımını geçersiz kılacaktır.

Orijinal ve Daha Az Güçlü, CSS Değişkeni

CSS özel özelliklerini tartışmaya başlamadan önce, uzun süredir CSS'nin bir tür değişkene sahip olduğunu ve bu da currentColor anahtar sözcüğünün olduğunu belirtmek gerekir. Bu nadiren kullanılan ancak yaygın olarak desteklenen değişken, bir öğenin mevcut renk değerini ifade eder. Bir color değeri kabul eden herhangi bir bildirimde kullanılabilir ve mükemmel bir şekilde basamaklanır.

Bir örneğe bakalım:

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

Basamaklamaya ek olarak, bu aşağıdakileri de üretebilir:

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

currentColor ile ilgili ana sorun, spesifikasyonda kendi başına bir değişken olarak bulunmamasının yanı sıra, yalnızca color özelliğinin değerini kabul etmesidir, bu da bazı durumlarda çalışmayı zorlaştırabilir.

Tam teşekküllü CSS Değişkenleri

CSS ön/son işlemcileri kullanmanın başlıca avantajlarından biri, değerlerin bir anahtar kelimede saklanmasına izin vermeleri ve gerekirse belirli bir seçiciye göre kapsamlandırılmalarıdır.

Geliştiriciler tarafından uzun süre talep edildikten sonra, CSS için yerel değişkenlerin yorumlanması için bir taslak yazılmıştır. Bunlara resmi olarak CSS özel özellikleri denir, ancak bazen CSS değişkenleri olarak da adlandırılır.

Yerel CSS özel özellikleri için mevcut belirtim, ön/son işlemci değişkenleriyle aynı davranışların tümünü kapsar. Bu, renk kodlarını, boyutları bilinen tüm birimlerle veya gerekirse yalnızca tam sayıları (örneğin, aynı böleni veya çarpanı kullanmanız gerektiğinde) saklamanızı sağlar.

CSS özel özelliklerinin sözdizimi diğer dillere kıyasla biraz tuhaftır, ancak sözdizimlerini aynı CSS ekosistemindeki diğer özelliklerle karşılaştırırsanız çok mantıklı olur:

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

Şimdi, “Bu nasıl bir sözdizimi!” diye düşünüyor olabilirsiniz.

Lea Verou, CSS Variables: var(–subtitle) muhteşem konuşmasında söylediği gibi, bu "tire-çizgi" sözdiziminin nedenini mutlak bir basitlikle açıklıyor:

Diğer CSS özellikleriyle tam olarak aynı şekilde çalışırlar […]. Pek çok insan bana neden dolar [işareti] veya buna benzer bir şey kullanmadığımızı soruyor ve dolar [işareti] kullanmamamızın nedeni, insanların hem SASS'ı hem de önişlemci değişkenlerini kullanabilmelerini ve CSS değişkenleri. İkisi de farklı şeyler, farklı hedeflere ulaşıyorlar, CSS değişkenleriyle yapabileceğiniz, SASS ile kesinlikle yapamayacağınız şeyler var ve SASS değişkenleriyle yapabileceğiniz, CSS değişkenleriyle yapamayacağınız şeyler var, yani biz istiyoruz. insanların her ikisini de aynı stil sayfasında kullanabilmelerini sağlar, böylece kısa çizgi sözdizimini boş bir önek içeren bir önek özelliği gibi düşünebilirsiniz.

Seçiciler, özellik adları veya ortam sorgu bildirimleri dışında her yerde kullanabileceğimiz var() işlevini kullanarak özel özelliğin değerini alabiliriz.

Ön/son işlemci değişkenleri yalnızca derleme zamanında kullanılırken, CSS değişkenlerinin dinamik olarak kullanılıp güncellenebileceğini belirtmekte fayda var. Ne anlama geliyor? Bu, gerçek CSS stil sayfasında korundukları anlamına gelir. Bu nedenle, bunların değişken oldukları fikri, stil sayfaları derlendikten sonra bile kalacaktır.

Daha açık hale getirmek için, durumu bazı örnekler kullanarak açıklayayım. Aşağıdaki kod bloğu, bir SASS stil sayfasının parçasıdır:

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

Bu SASS bildirimleri ve kuralları pasajı, CSS'ye aşağıdaki gibi derlenir:

 .corners { border-radius: 30px; }

Derlemeden sonra hem :root içindeki özelliklerin hem de media sorgusunun kaybolduğunu görebilirsiniz, çünkü SASS değişkenleri bir CSS dosyasında bulunamaz (veya daha kesin olmak gerekirse, bir CSS dosyasında var olmaya zorlanabilir, ancak yok sayılırlar). sözdizimlerinin bir kısmı geçersiz CSS olduğundan), bu nedenle değişkenin değeri daha sonra güncellenemez.

Şimdi aynı durumu ele alalım, ancak CSS ön/son işlemci uygulanmadan yalnızca CSS Değişkenleri kullanılarak uygulandı (yani, herhangi bir aktarma veya derleme yapılmadan):

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

Açıkçası, hiçbir şeyi derlemediğimiz/aktarmadığımız için hiçbir şey değişmez ve özel özelliğin değeri dinamik olarak güncellenebilir. Örneğin, JavaScript gibi bir şey kullanarak --value değerini değiştirirsek, değer, var() işlevi kullanılarak çağrıldığı her durumda güncellenir.

Özel özelliklerin yetenekleri, bu özelliği o kadar güçlü kılar ki, otomatik ön ek gibi şeyler bile yapabilirsiniz.

Lea Verou, clip-path özelliğini kullanarak bir örnek oluşturur. initial eklemek istediğimiz özelliğin değerini ayarlayarak başlarız, ancak özel bir özellik kullanırız ve ardından her bir ön ekli özelliğin değerini özel özellik değerine ayarlamaya devam ederiz:

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

Bundan sonra geriye kalan tek şey, bir seçici içindeki özel özelliğin değerini değiştirmektir:

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

Bununla ilgili biraz daha fazla bilgi edinmek isterseniz, Lea'nın CSS değişkenleriyle otomatik ön ek oluşturma hakkındaki tam makalesine göz atın.

Kurşun Geçirmez CSS Özel Özellikleri

Belirtildiği gibi, CSS Özel Özellikleri için tarayıcı desteği hala büyük ölçüde standart değildir. Peki bu nasıl aşılabilir?

İşte burada PostCSS ve eklentisi postcss-css-değişkenleri devreye giriyor.

PostCSS'nin ne olduğunu merak ediyorsanız, PostCSS: SASS'ın Yeni Oyun Tarihi makaleme bakın ve işiniz bittiğinde buna geri dönün. Daha sonra bu harika araçla neler yapabileceğiniz konusunda temel bir fikre sahip olacaksınız ve makalenin geri kalanını okurken kafanız karışmamış gibi hissetmeyeceksiniz.

postcss-css-variables eklentisi ve preserve seçeneği true olarak ayarlandığında, tüm var() işlev bildirimlerini çıktıda tutabilir ve hesaplanan değeri bir geri dönüş bildirimi olarak alabiliriz. Ayrıca hesaplanan --var bildirimlerini de tutar. Bu PostCSS eklentisini kullanarak, özel özelliklerin aktarım işleminden sonra dinamik olarak güncellenebileceğini, ancak özel olarak hedeflenmedikçe ve açıkça bireysel olarak değiştirilmedikçe yedek değerlerin aynı kalacağını unutmayın.

CSS değişkenlerini kullanmanın ön/sonrası işlemcisiz bir yolunu arıyorsanız, mevcut desteği her zaman CSS @support kuralıyla manuel olarak kontrol edebilir ve destek düzensiz olduğunda veya mevcut olmadığında uygun bir geri dönüş uygulayabilirsiniz. Örneğin:

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

JavaScript Kullanarak Özel Bir Özelliğin Değerini Değiştirme

Tüm bu makale boyunca değişkenlerin JavaScript kullanılarak güncellenebileceğinden bahsetmiştim, hadi buna girelim.

Açık bir temanız olduğunu ve aşağıdaki gibi bir CSS'niz olduğunu varsayarak onu karanlık bir temaya geçirmek istediğinizi varsayalım:

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

Aşağıdakileri yaparak --text-color ve --background-color özel özelliklerini güncelleyebilirsiniz:

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

İlginç Kullanım Örnekleri

CSS Özel Özelliklerinin özellikleriyle ilgili yıllar süren geliştirme ve tartışmalar boyunca, bazı ilginç kullanım örnekleri ortaya çıktı. İşte birkaç örnek:

Tema Oluşturma: Bir site için bir dizi tema kullanmak, CSS değişkenlerini uygularken oldukça kolaydır. Mevcut tarzınızın açık veya koyu bir varyasyonunu ister misiniz? Sadece JavaScript kullanarak bazı özel özelliklerin değerini değiştirin ve işiniz bitti.

Aralık ayarlamaları: Bir sitenin aralığına ince ayar yapmanız mı gerekiyor, örneğin sütunlar arasındaki oluk? Tek bir CSS değişkeninin değerini değiştirin ve bu değişikliğin site genelinde yansıtıldığını görün.

Tamamen dinamik calc() işlevleri: Artık bu işlevlerin içindeki özel özellikleri kullanarak tamamen dinamik calc() işlevlerine sahip olabilirsiniz, böylece JavaScript içinde karmaşık veya kısa ömürlü hesaplamalar yapma gereksinimini ortadan kaldırabilir ve ardından bu değerleri her bir örnekte manuel olarak güncelleyebilirsiniz.

CSS Dosyalarınıza Yeni Bir Hayat Verin

CSS özel özellikleri, stil sayfalarınıza daha fazla hayat getirmenin güçlü ve yenilikçi bir yoludur ve CSS'de ilk kez tamamen dinamik değerler sunar.

Spesifikasyon şu anda Aday Tavsiyesi statüsündedir; bu, standardizasyonun hemen köşede olduğu anlamına gelir, bu özelliğin derinliklerine dalmak ve bundan en iyi şekilde yararlanmak için iyi bir neden.