css :root özelliği ne işe yarar ?

Hayırlı akşamlar arkadaşlar, css'de yeniyim.

:root özelliği ne işe yarar? Araştırma yaptım bir kaç video izledim ama ne yani bi işe yaramıyor gibi sanki, bilen varsa somut örnekle anlatabilir mi ?

global olarak değişken tanımladığın alan.
Mesela bir buton hazırladın, ona background olarak bir renk atadın.
Fakat bu butonu 1+ sayfa da kullandın ve renklerini aynı yapmak istedin, renk verme kısmında sadece değişkenin adını yazarak tanımladığın rengi kullanmış oluyorsun.
Bu sayede tek bir yerden rengi değiştirdiğin zaman 1+ sayfa da o butonun background rengi değiştirilmiş oluyor.

Mesela bir sitede gece gündüz modu olsun. Eğer root ile renkler tanımlanmamış bir site ise her elemanı seçip işlem yapmak gerekir ama root ile renkler tanımlı ise body.night olduğunda root'daki renk kodlarını şunla değiştir şeklinde bir kod yazılarak çok kolay şekilde site gece moduna entegre edilebilir.

CSS değişken özelliği ile ilgili tanımlama kısmıdır. Örneğin aşağıdaki gibi kullanılır. Tek bir yerden tüm renk paletini ya da tüm margin ve padding boyutlarını ayarlamak gibi kolaylıklarlar sağlar.

:root {
    --arkaplan: #151515;
}

body {
    background: var(--arkaplan)
}

Tamamdır, şimdi daha anlaşılır oldu. Teşekkür ederim, hocam.

Bende gereksiz birşey sanmıştım, baya önemliymiş, teşekkür ederim.

http://www.erbilen.net/etiket/css-root/
gayet ıyı anlatmıs bı ınceleyın hocam

Hocalarım şunuda biliyorsanız yardımcı olur musunuz ?

Şimdi ben buttona tıkladığım zaman active ile arka planını green verdim, ama sorun şu ki tıkladığım zaman çok hızlı değişiyor arka plan neredeyse 0.1sn de oluyor
bunu yavaşlatmak için transition kullandım, araştırma yaptım yok bi türlü beceremedim. Böyle bir özellik falan varsa nasıl kullanabiliriz ? yada js falan mı bilmek gerekiyor bunu yapmak için.

Anlatamadıysam ufak bir video yükleyebilirim buraya.

Muhtemelen yanlış ama
Kodlar şöyle:

button:active{
 background-color: green;
 transition-property: color;
 transition-duration: 2s;
 transition-delay: 2s;
 transition: ease-in-out;
}

Butonun kendisine transition 500ms gibi bir değer verip deneyin. O kullanımı ben hiç kullanmadım bu zamana kadar.