Daha İyi UX için CSS Özel Özelliklerini Kullanma
Yayınlanan: 2019-11-29
Son güncelleme - 8 Temmuz 2021
CSS3, CSS spesifikasyonunun uzun süredir sahip olduğu en büyük eklemelerden birini beraberinde getirdi. Geliştiricileri yıllardır rahatsız eden önemli bir sorunu ele aldığı ve insanların SASS gibi ön işlemcileri kullanmayı tercih etmelerinin ana nedeni olduğu için çok fazla ses getirdi: değişkenleri kullanma yeteneği.
CSS değişkenlerinin eklenmesiyle, tema oluşturma gibi temel özellikleri desteklemek için yazılması gereken birçok kod artık gerekli değildir. Tekrarlamayı önlemek ve bir web uygulamasında yanıt verme özelliğinin yanı sıra dinamik yazı tipi boyutları ve basitlik gibi daha fazla kullanım örneğini sağlamak için kullanılabilecek kullanışlı bir özelliktir.
CSS değişkenleriyle dağınıklıktan kurtulma
Çoğu uygulamanın ortak bir özelliği, uygulama genelinde aynı ve tutarlı kalması gereken marka renkleridir. Hiç kimse, ileride başvurmak üzere on farklı onaltılık değeri kafasında saklamaya sahip değildir ve dosyalar arasında değerleri kopyalamak için ileri geri gitmek yalnızca zahmetli olmakla kalmaz, aynı zamanda üretkenlik için de zararlıdır. Şimdi, bu renklerin değişmesi gerekiyorsa yapılması gereken iş miktarını hayal edin.
WordPress ile CSS ön işlemcilerini kullanmak , sorunla baş etmenin en yaygın yoludur. Bunlar, karışımlar, iç içe bildirimler ve tabii ki üretkenlik için büyük bir artış olan değişkenler gibi bir dizi özellik için destek sunar.
Tek yapmanız gereken kodunuzu bir kez yazmak ve dilerseniz özgürce erişip değiştirebileceğiniz CSS'ye derlenmesi. Ancak, çalışma zamanında bu değerleri bulup değiştirememek, örneğin web uygulamanıza karanlık bir tema ekleyememeleri en büyük dezavantajıdır. Bu sadece SASS desteklemediği için değil, muhtemelen asla desteklemeyeceği için büyük bir sorun.
CSS açılışlarına özel yerleşik değişkenlerin eklenmesi, özellikle tema ve duyarlı tasarımla ilgili olarak, uygulamaları nasıl yazdığımız üzerinde büyük bir etkiye sahip oldu.
CSS değişkenleri için tarayıcı desteği nasıldır?
Bu, CSS değişkenleri bir tartışmaya dahil edildiğinde ortaya çıkan en yaygın sorudur. Caniuse'a göre CSS değişkenleri için tarayıcı desteği %93.16 seviyesinde bulunuyor. Tüm modern tarayıcılarda desteklenir (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ ve Edge 16+). Her zaman olduğu gibi, IE gösteriden yoksun ve şaşırtıcı bir şekilde %6.47 pazar payına sahip. Eski tarayıcıları desteklemesi gereken zavallı geliştiriciler için endişelenmeyin. Polyfills veya daha doğrusu midilli dolgular günü kurtarmak için buradalar.
CSS değişkenlerine resmi bir giriş
CSS değişkenlerine aşina iseniz, CSS değişkenleriyle ilgili herhangi bir sorun yaşamamalısınız.
SASS değişkenleri şu şekilde bildirilir:
<pre>
$facebook-mavi: #4267B2;
</pre>
CSS değişkenleri biraz farklı bildirilirken:
<pre>
:kök {
–marka rengi: #4267B2;
}
.brand-navbar {
arka plan: var(- -marka rengi);
}
</pre>
İki sözdizimi arasındaki birkaç farklılığa dikkat edin:
- CSS değişkenlerinin önünde iki tire olması gerekir
- CSS değişkenleri normalde ':root' içinde bildirilir, ancak herhangi bir zamanda yeniden bildirilebilir.
- CSS özellikleri, 'var()' işlevi kullanılarak alınır.
CSS değişkenleri ayrıca birkaç ek özelliğe erişim sağlar.
basamaklı değerler
CSS özellikleri, normal basamaklama kurallarına göre basamaklanır. Başka bir deyişle, aşağıdaki beyanlar yukarıdakileri etkilemez.
<pre>
:root { –renk: sarı; }
div { –renk: mavi; }
#harika { –renk: yeşil; }
* { color: var(–color); }
<p>Kökten miras kalan sarı olacağım!</p>
<div>Ben maviyim!</div>
<div id=”harika”>
İşe yaradı! ben yeşilim!
<p>Ben de yeşilim! Yukarıdan devralındı!</p>
</div>
</pre>
geri dönüş değerleri
'var()' işlevi birkaç parametreyi kabul eder. İkincisi, özel CSS özelliğinin tanımlanmaması durumunda bir geri dönüş değeri olarak kullanılabilir. Bu, JavaScript aracılığıyla CSS değişkenlerine erişmesi gereken herkes için kullanışlı bir özelliktir.
İmzası 'var(<custom-property-name> [, <declaration-value> ]?)' gibi görünür ve aşağıdaki şekilde kullanılabilir
<pre>
.brand-navbar {
arka plan: var(–marka rengi, “#4267B2”);
}
</pre>
'–brand-color' tanımlı değilse, bunun yerine “#4267B2” kullanılacaktır,
JavaScript ile erişim
Bir önişlemci üzerinden CSS değişkenlerini kullanmanın en iyi nedenlerinden biri, JavaScript aracılığıyla özel değişkenlere erişme yeteneğidir. Önişlemci değişkenleri tarayıcıda yaşamıyor. Kod derlendiğinde değerlendirilirler. Bu şekilde, önişlemci değişkenlerine tarayıcıda erişilemez. CSS değişkenleriyle, özellik tarayıcıda yaşar ve değerleri anında düzenleme yeteneği verir.
Kullanıcının bir açılır pencere veya benzeri bir şey aracılığıyla özel renkleri seçmesine olanak tanıyan bir gösterge panosu düşünün.
<pre>
.brand-navbar {
arka plan: var(–marka rengi, “#4267B2”);
}
//Geçerli değeri almak için
getComputedStyle(document.documentElement).getPropertyValue('–marka rengi');
// Değeri ayarlamak için
Document.documentElement.style.setProperty('–marka rengi', 'kırmızı');
// Hatta bir CSS özelliğini diğerine atayabilirsiniz
document.documentElement.style.setProperty('–marka-renk','var(–ikincil-renk)');
</pre>
Küresel ve yerel kapsam
JavaScript'e (veya herhangi bir programlama diline) aşina iseniz, muhtemelen kapsam kavramını anlamışsınızdır. Değişkenler normal olarak, yerel kapsam adı verilen veya genel kapsam adı verilen uygulama genelinde kullanıma sunulan kodun yalnızca belirli bölümlerine erişilebilecek şekilde tanımlanabilir .
CSS değişkenleri benzer şekilde çalışır. Marka renkleri ve dikey boşluk gibi bazı değişkenler, daha kolay referans için genel olarak kapsamlandırılmalıdır. Bunlar genellikle uygulama genelinde aynı kalır ve bir değişiklik olması durumunda her yere yansıtılması gerekir. Buna karşılık, yerel kapsam gerektirebilecek değişkenler, farklı büyük ve küçük değişkenlere sahip düğmeleri içerir. Belirli bir düğmedeki dolguyu değiştirmek isterseniz, değişikliklerin tüm DOM'yi geçmesini istemezsiniz. Uygulamada sadece tek bir noktada değiştirilmesi gerekiyor.
Varsayılan olarak, CSS özellikleri yerel olarak kapsamlandırılmıştır. JavaScript veya başka bir programlama dili ile çalıştıysanız, kapsam belirlemenin kendi sorunları vardır. Kalıtsal olarak alınabildikleri için, nasıl kullanıldıklarına dikkat etmezseniz bazı ilginç sonuçları olabilecek yerel değişkenler gibi de hareket ederler. Değerler kademeli olduğundan, özellikle JavaScript söz konusu olduğunda, onları nasıl değiştirdiğinize dikkat etmeniz gerekir.
Medya sorgularıyla özel özellikleri kullanma
Tıpkı ön işlemcilerde olduğu gibi, CSS özelliklerini kullanmanın önemli bir dezavantajı, medya sorgularında kullanılamamasıdır. Örneğin, bu işe yaramayacak.
<pre>
@media (min-width: var(–breakpoint)){
dolgu: 1rem;
}
</pre>
Bunun yerine yapabileceğiniz şey, medya sorgularında özel özellikleri yeniden tanımlamaktır. Tarayıcı küçüldüğünde yazı tipi boyutunu değiştirmeniz gerekiyorsa, şanslısınız. CSS değişkenleriyle, JavaScript kullanarak tarayıcı değişikliklerini dinleyebilir ve yalnızca bir kez küçültülmesi gereken boyutları değiştirebilirsiniz.
Özel CSS özelliklerinin bazı pratik uygulamaları nelerdir?
Özel bir kağıt yazma hizmeti web tasarımcısı olan Colby Stuart, "Bugün, site performansını artırmak için CDN hizmetlerini kullanmanın yanı sıra, CSS özel özelliklerini kullanmak üretkenliği artırmanın en hızlı yollarından biridir" diyor.
İyi vurgulanmış faydaların yanı sıra üretkenliğe katkıda bulunur, bunların bir web uygulamasında nasıl kullanılabileceğine dair gerçek dünyadan örnekler var mı?
Karanlık mod ekleme
Tüketici pazarını yakalayan yeni bir trend, web uygulamaları da dahil olmak üzere tüm modern yazılımlarda karanlık mod talebidir. Koyu bir arka plan rengi eklemekten biraz daha karmaşık olabilir. Dikkate alınması gereken diğer şeyler, metin renklerinin nasıl değişeceği ve beyaz arka plana sahip görüntülerin nasıl etkileneceğidir.
Tüm bunlar, önce uygulamanız boyunca değişkenler bildirerek mümkün olur. Kullanıcı, web sitesi temasını koyu hale getirmek için anahtarı tetiklediğinde, CSS değişkenlerini değiştiren bir JavaScript işlevini tetikleyin. Web uygulamanız daha karmaşıksa, bu, mevcut görüntülerin karanlık mod dostu olanlarla değiştirilmesini de içerebilir.
WordPress'te Karanlık mod ekleme
CSS değişkenleri o kadar etkili oldular ki WordPress dünyasına ulaştılar. Bugün, bir WordPress uygulaması karanlık bir mod (veya daha genel olarak tema) oluşturmak oldukça önemsizdir.
Çoğu WordPress geliştiricisi, sitelerinin görünümünü ve işlevselliğini değiştirmek için Özelleştiriciye güvenir. Sitenizin CSS'sine erişerek renkler, yazı tipleri, arka plan resimleri vb. şeylere erişim sağlar. Bununla ilgili en büyük sorun, CSS'yi bu şekilde değiştirerek PHP'yi HTML'nizi yeniden oluşturmaya zorlaması ve bunu yaparken sunucunun tüm dosyayı tarayıcıya yeniden göndermesine neden olmasıdır. Uygulamanız, gereğinden fazla veri tüketerek gereksiz bir istekte bulunuyor.
"Böyle bir uygulama tüketiciye yönelik olsaydı, muhtemelen çok fazla şikayet alırdınız. Değiştirmek istediğiniz değişkenler için özel CSS dosyalarınız yoksa, işler çok daha kötü hale gelir.” Papersowl incelemesinde kıdemli bir geliştirici ve özgeçmiş yazma hizmetleri yayıncısı Helena Newman, bunu CSS spesifikasyonuna gerekli bir ek olarak görüyor.
CSS değişkenleri kullanılarak, tüm renkler JavaScript kullanılarak tarayıcıda değiştirilir. Yapılacak tek istek, gerekirse mevcut temayı sunucuya devam ettirmektir. Ve o zaman bile, böyle bir değişken tarayıcıya kaydedilebilir.
Bir web sitesine duyarlı tasarım ekleme
İnternette her zamankinden daha fazla cep telefonu varken, duyarlı web sitelerine duyulan ihtiyaç hiç bu kadar belirgin olmamıştı. Duyarlı tasarımın geliştiricileri ayaklarının ucundan tutan en önemli yönü yazı tipi boyutlarını değiştirmektir. Birden çok yazı tipi veya dinamik yazı tipi kullanan bir uygulama için bunları takip etmek ve farklı tarayıcılar için değiştirmek bir angaryadır.
Bunun yerine, özel CSS özellikleri, web sitenizde kullanılabilecek ve yeniden kullanılabilecek evrensel bir yazı tipi boyutu tanımlamanıza olanak tanır. Değişmesi gerekiyorsa, tek yapmanız gereken bir JavaScript işlevi çağırmak ve hepsi işe yarıyor.
Eski tarayıcıları desteklemeniz gerekmiyorsa, medya sorgularına olan ihtiyacı tamamen ortadan kaldırmak için (nispeten) yeni ızgara CSS sistemi ile birlikte özel CSS değişkenleri kullanılabilir.
Ayrıca, CSS'nin kendi içindeki genişlik değişikliklerini dinlemeniz gerekiyorsa, medya sorguları yine de gerekli olabilir. JavaScript'in çalışmasına izin vermeyen tarayıcıları desteklemenin tek yolu budur.
Çözüm
Özel CSS değişkenleri, bir süredir spesifikasyona yapılan en önemli eklemelerden bazılarıdır. CSS dosyalarınızdaki dağınıklığı ortadan kaldırarak ve gereksiz ek istekler yapma ihtiyacını ortadan kaldırarak tasarım sürecinizi basitleştirebilirler.