CSS var() İşlevi
Örnek
Önce, "--main-bg-color" adında bir global değişken tanımlayın, ardından değişkenin değerini daha sonra stil sayfasına eklemek için var() işlevini kullanın:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
var() işlevi, bir CSS değişkeninin değerini eklemek için kullanılır.
Sürüm: | CSS3 |
---|
Tarayıcı Desteği
Tablodaki sayılar, işlevi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS Sözdizimi
var(--name, value)
Value | Description |
---|---|
name | Required. The variable name (must start with two dashes) |
value | Optional. The fallback value (used if the variable is not found) |
Daha fazla örnek
Örnek
Birkaç CSS değişken değeri eklemek için var() işlevini kullanan başka bir örnek:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
İlgili Sayfalar
CSS eğitimi: CSS Değişkenleri