Devralma

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:

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
Animasyonlar çocuklara aktarılmaz.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Devralınacak bir şey yoksa hangi değer inherit gibi, ardından initial gibi davranır?

reset
geçerli bir değer değil, tekrar deneyin!
unset
🎉
superset
geçerli bir değer değil, tekrar deneyin!

Kaynaklar