CSS Podcast - 005: Devralma
Öğelerin düğme gibi görünmesini sağlamak için birkaç CSS yazdığınızı varsayalım.
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
Daha sonra, .my-button
olan class
değeriyle bir içerik makalesine bağlantı öğesi ekliyorsunuz. Bir sorun vardır ancak metin,
düşündüğünüz renkte değildir. Bu nasıl oldu?
Bazı CSS mülkleri için değer belirtmediğiniz takdirde değerleri devralır.
Bu düğmenin kullanılması durumunda, color
şu CSS'den devralınır:
article a {
color: maroon;
}
Bu derste, bunun neden meydana geldiğini ve devralmanın daha az CSS yazmanıza yardımcı olan güçlü bir özellik olduğunu öğreneceksiniz.
Devralma akışı
Bu HTML snippet'ini kullanarak devralmanın nasıl çalıştığına göz atalım:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
Kök öğe (<html>
), dokümandaki ilk öğe olduğundan hiçbir şeyi devralmaz.
HTML öğesine biraz CSS ekleyin,
ardından HTML öğesi belgede basamaklamaya başlar.
html {
color: lightslategray;
}
color
özelliği varsayılan olarak diğer öğeler tarafından devralınır.
html
öğesi color: lightslategray
değerine sahip olduğundan renk devralabilen tüm öğelerin rengi artık lightslategray
olur.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
En derin iç içe yerleştirilmiş öğe olduğu için yalnızca <p>
öğesinde italik metin olur.
Devralma yalnızca aşağı doğru akar, üst öğelere geri dönmez.
Hangi mülkler varsayılan olarak devralınır?
Varsayılan olarak tüm CSS özellikleri devralınmaz, ancak çok fazla özellik vardır. Referans olması amacıyla, tüm CSS özelliklerinin W3 referansından alınan, varsayılan olarak devralınan özelliklerin tam listesini burada bulabilirsiniz:
- azimut
- border-collapse
- border-spacing
- altyazı tarafı
- color [renk]
- imleç
- direction
- boş hücreler
- font-family
- font-size
- font-style
- font-variant
- font-weight
- yazı tipi
- harf-aralığı
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- orphans
- alıntılar
- text-align
- text-indent
- metin dönüşümü
- görünürlük
- white-space
- dullar
- word-spacing
Devralmanın işleyiş şekli
Her HTML öğesinin varsayılan olarak bir başlangıç değeriyle tanımlanmış her CSS özelliği vardır. Başlangıç değeri, devralınmayan bir özelliktir ve basamakla ilgili öğe için bir değer hesaplanamaması durumunda bu özellik varsayılan olarak gösterilir.
Devralınabilen özellikler aşağı doğru basamaklar ve alt öğeler üst öğesinin değerini temsil eden hesaplanan bir değer alır.
Bu, bir üst öğenin font-weight
değeri bold
olarak ayarlanmışsa font-weight
farklı bir değere ayarlanmadığı veya kullanıcı aracısı stil sayfasında bu öğe için font-weight
değeri olmadığı sürece tüm alt öğeler kalın olur.
Devralma işlemini açık bir şekilde devralma ve kontrol etme
Devralma, öğeleri beklenmedik şekillerde etkileyebilir. Bu nedenle CSS, bu konuda size yardımcı olacak araçlar sunar.
inherit
anahtar kelimesi
inherit
anahtar kelimesini kullanarak, herhangi bir mülkün, üst öğesinin hesaplanan değerini devralmasını sağlayabilirsiniz.
İstisnalar oluşturmak, bu anahtar kelimeyi kullanmanın yararlı bir yoludur.
strong {
font-weight: 900;
}
Bu CSS snippet'i, tüm <strong>
öğelerini 900
değerine sahip varsayılan bold
değeri yerine font-weight
olacak şekilde ayarlar. Bu değer font-weight: 700
değerine eşdeğerdir.
.my-component {
font-weight: 500;
}
.my-component
sınıfı font-weight
değerini 500
olarak ayarlar.
.my-component
içindeki <strong>
öğelerini yapmak için font-weight: 500
öğesini de ekleyin:
.my-component strong {
font-weight: inherit;
}
Şimdi, .my-component
içindeki <strong>
öğelerinde 500
font-weight
olacaktır.
Bu değeri açıkça belirleyebilirsiniz ancak gelecekte inherit
özelliğini ve .my-component
CSS'sini kullanırsanız <strong>
aboneliğinizin otomatik olarak güncel kalacağını garanti edebilirsiniz.
initial
anahtar kelimesi
Devralma, öğelerinizle ilgili sorunlara yol açabilir. initial
, size güçlü bir sıfırlama seçeneği sunar.
CSS'de her mülkün varsayılan bir değere sahip olduğunu daha önce öğrendiniz.
initial
anahtar kelimesi, bir özelliği tekrar söz konusu varsayılan değere ayarlar.
aside strong {
font-weight: initial;
}
Bu snippet, bir <aside>
öğesi içindeki tüm <strong>
öğelerinin kalınlığını kaldırır ve bunun yerine bunları başlangıç değeri olan normal ağırlık haline getirir.
unset
anahtar kelimesi
Bir mülk varsayılan olarak devralınsa da devralınsa da unset
özelliği farklı davranır.
Bir özellik varsayılan olarak devralınırsa unset
anahtar kelimesi inherit
ile aynı olur.
Mülk varsayılan olarak devralınmazsa unset
anahtar kelimesi initial
değerine eşit olur.
Hangi CSS özelliklerinin varsayılan olarak devralındığını hatırlamak zor olabilir, unset
bu bağlamda faydalı olabilir.
Örneğin, color
varsayılan olarak devralınır ancak margin
devralınmadığından şunu yazabilirsiniz:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
Şimdi margin
kaldırılır ve color
, devralınan hesaplanmış değere geri döner.
unset
değerini all
özelliğiyle de kullanabilirsiniz.
Yukarıdaki örneğe dönersek, genel p
stilleri ek birkaç özellik alırsa ne olur?
Yalnızca margin
ve color
için ayarlanan kural geçerli olur.
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
Bunun yerine aside p
kuralını all: unset
olarak değiştirirseniz gelecekte p
öğesine hangi genel stillerin uygulandığı önemli değildir, bunlar her zaman ayarlanmaz.
aside p {
margin: unset;
color: unset;
all: unset;
}
Öğrendiklerinizi sınayın
Kalıtım bilginizi test etme
Aşağıdaki özelliklerden hangisi devralınabilir?
animation
font-size
color
text-align
line-height
Devralınacak bir şey yoksa hangi değer inherit
gibi, ardından initial
gibi davranır?
reset
unset
superset