- Konu sahibi
- #1
CSS
Burada
Bir kart ve düğme için ortak renk kullanacağınızı varsayalım. Değeri doğrudan her kuralda tekrarlamak yerine kökte tanımlayıp ilgili özelliklerde çağırabilirsiniz:
Değişkenin nerede tanımlanacağı, kullanılacağı alanın kapsamına bağlıdır:
Örneğin yalnızca kart bileşeninde kullanılacak bir gölge değerini
Kural çalışmıyorsa önce değişken adının tanım ve kullanımda aynı yazıldığını, iki tireyle başladığını ve tanımın geçerli bir seçici bloğu içinde bulunduğunu kontrol edin. Tanımlanmamış bir değişkeni yedek değersiz kullanmak, o değişkeni kullanan CSS bildirimini geçersiz hale getirebilir.
HTML belgesinde ikisi aynı kök elementi hedefler; ancak
Hayır. CSS özel özelliklerini
:root, bir belgedeki en üst seviyedeki kök elementi seçen sözde sınıftır. HTML belgelerinde bu element html elementidir. En yaygın kullanım alanı, sayfanın tamamında kullanılacak CSS özel özelliklerini yani değişkenlerini tanımlamaktır. Böylece renk, boşluk veya yazı boyutu gibi değerleri tek bir yerden yönetebilirsiniz.:root nasıl çalışır?
:root bir element oluşturmaz ve HTML içine ayrıca yazılmaz; CSS seçicisi olarak kullanılır. Örneğin aşağıdaki tanımda --ana-renk ve --icerik-bosluk adlı özel özellikler kök elementte tanımlanır:
Kod:
:root {
--ana-renk: #2457a6;
--icerik-bosluk: 1rem;
}
.button {
background-color: var(--ana-renk);
padding: var(--icerik-bosluk);
}Burada
var(--ana-renk) ifadesi, :root içinde tanımlanan değeri kullanır. Değişken tanımı yapılmamışsa CSS özelliği geçersiz kalabilir. Tanım bulunamıyorsa yedek değer verebilirsiniz. Ancak tanımlı değişkenin içeriği hedef özelliğin beklediği türe uygun değilse var yedeği otomatik tür doğrulaması yapmaz:
Kod:
.button {
background-color: var(--ana-renk, #333);
}:root özgüllüğü 0-1-0, html seçicisininki 0-0-1 değerindedir. Tek bir sınıf seçicisiyle :root aynı özgüllüktedir; aynı öğedeki yarışmada katman, önem ve kural sırası da sonucu belirler. Bir alt öğeye doğrudan yazılan özel özellik ise kökten kalıtılan değerin yerini alır; bu, kökün seçici özgüllüğünü yenme meselesi değildir. Değişkenler kalıtımla alt elementlere aktarıldığı için, :root üzerinde tanımlanan değerler çoğu alt elementte kullanılabilir.Somut kullanım: tema rengini tek yerden değiştirme
Bir kart ve düğme için ortak renk kullanacağınızı varsayalım. Değeri doğrudan her kuralda tekrarlamak yerine kökte tanımlayıp ilgili özelliklerde çağırabilirsiniz:
Kod:
:root {
--arka-plan: #ffffff;
--metin: #222222;
--vurgu: #0b63ce;
}
.card {
background: var(--arka-plan);
color: var(--metin);
border: 1px solid var(--vurgu);
}
.card a {
color: var(--vurgu);
}--vurgu değerini değiştirdiğinizde karta ait kenarlık ve bağlantı rengi birlikte değişir. Bu, tekrarları azaltır; fakat değişkenin kullanıldığı tüm yerleri etkilediği için adını kullanım amacını açıklayacak şekilde seçmek gerekir.Ne zaman :root, ne zaman yerel kapsam?
Değişkenin nerede tanımlanacağı, kullanılacağı alanın kapsamına bağlıdır:
| Tanım yeri | Uygun kullanım | Sonuç |
|---|---|---|
:root | Site genelindeki renk, yazı tipi veya boşluklar | Değer çoğu alt elementten erişilebilir |
| Belirli bir sınıf | Sadece bileşene ait değerler | Değer o bileşenin kapsamında kalır |
:root altında tema seçicisi | Tema veya mod değiştirme | Seçilen kapsamda değer geçersiz kılınır |
Örneğin yalnızca kart bileşeninde kullanılacak bir gölge değerini
:root içine koymak yerine .card içinde tanımlamak daha anlaşılır olabilir. Site genelinde paylaşılacak tasarım değerlerini ise :root altında tutabilirsiniz.Uygulama adımları
- Genel olarak paylaşılacak değerleri belirleyin; örneğin
--ana-renkveya--sayfa-boslugu. - Bu değerleri stil dosyanızda
:root { ... }bloğu içine yazın. - Kullanmak istediğiniz CSS özelliğinde
var(--degisken-adi)biçimini kullanın. - Gerekliyse
var(--degisken-adi, yedek-deger)ile yedek değer ekleyin. - Tarayıcıda ilgili elementi inceleyerek değişkenin tanımlı ve kullanılan değerin beklediğiniz gibi olduğunu kontrol edin.
Kural çalışmıyorsa önce değişken adının tanım ve kullanımda aynı yazıldığını, iki tireyle başladığını ve tanımın geçerli bir seçici bloğu içinde bulunduğunu kontrol edin. Tanımlanmamış bir değişkeni yedek değersiz kullanmak, o değişkeni kullanan CSS bildirimini geçersiz hale getirebilir.
Kaynaklar
Sık sorulan sorular
:root ile html aynı şey midir?
HTML belgesinde ikisi aynı kök elementi hedefler; ancak
:root bir sözde sınıf seçicisidir, html ise element seçicisidir. Özgüllükleri de aynı değildir.CSS değişkenlerini kullanmak için JavaScript gerekir mi?
Hayır. CSS özel özelliklerini
:root içinde tanımlamak ve var() ile kullanmak için JavaScript gerekmez. JavaScript yalnızca değeri çalışma anında değiştirmek gibi ek bir davranış istendiğinde kullanılabilir.