Devralma

CSS Podcast'i - 005: Devralınma

Öğeleri düğme gibi göstermek için 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;
}

Ardından, bir içerik makalesine class değeri .my-button olan bir bağlantı öğesi ekleyin. Ancak bir sorun var. Metin, beklediğiniz renkte değil. Bu nasıl oldu?

Bazı CSS özellikleri, bunlar için bir değer belirtmezseniz devralınır. Bu düğme, color öğesini şu CSS'den devralıyordu:

article a {
  color: maroon;
}

Bu derste, bunun neden olduğunu ve devralınmanın daha az CSS yazmanıza yardımcı olacak güçlü bir özellik olduğunu öğreneceksiniz.

Devralınma akışı

Aşağıdaki HTML snippet'ini kullanarak devralınmanı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ümanda ilk öğe olduğu için hiçbir şey devralmaz. HTML öğesine biraz CSS eklediğinizde, CSS dokümanda aşağı doğru kademeli olarak uygulanmaya başlar.

html {
  color: lightslategray;
}

color mülkü varsayılan olarak diğer öğeler tarafından devralınır. html öğesinde color: lightslategray olduğundan, renk devralabilecek tüm öğeler artık lightslategray renginde olacaktır.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

En iç içe yerleştirilmiş öğe olduğundan yalnızca <p> italik metne sahip olacaktır. Devralma yalnızca alt öğelere doğru gerçekleşir, üst öğelere doğru gerçekleşmez.

Varsayılan olarak hangi özellikler devralınır?

Tüm CSS özellikleri varsayılan olarak devralınmaz ancak devralınan birçok özellik vardır. Referans olarak, tüm CSS özelliklerinin W3 referansından alınan ve varsayılan olarak devralınan özelliklerin tam listesini aşağıda bulabilirsiniz:

Devralmanın işleyiş şekli

Her HTML öğesinde, varsayılan olarak bir başlangıç değeriyle tanımlanmış her CSS özelliği bulunur. İlk değer, devralınmayan ve basamaklı yapı bu öğe için bir değer hesaplayamazsa varsayılan olarak görünen bir özelliktir.

Devralınabilen özellikler aşağı doğru basamak basamak aktarılır ve alt öğeler, üst öğesinin değerini temsil eden bir hesaplanmış değer alır. Yani bir üst öğenin font-weight değeri bold olarak ayarlanmışsa font-weight değerleri farklı bir değere ayarlanmadığı veya kullanıcı aracısı stil sayfasında ilgili öğe için font-weight değeri bulunmadığı sürece tüm alt öğeler kalın olur.

Özellikle devralma ve devralmayı kontrol etme

Devralma, öğeleri beklenmedik şekillerde etkileyebilir. Bu nedenle CSS'de bu konuda yardımcı olacak araçlar bulunur.

inherit anahtar kelimesi

inherit anahtar kelimesini kullanarak herhangi bir mülkün üst öğesinin hesaplanmış değerini devralmasını sağlayabilirsiniz. Bu anahtar kelimeyi kullanmanın yararlı bir yolu istisnalar oluşturmaktır.

strong {
  font-weight: 900;
}

Bu CSS snippet'i, tüm <strong> öğelerinin font-weight değerini font-weight: 700 değerine eşdeğer olan varsayılan bold değeri yerine 900 olarak ayarlar.

.my-component {
  font-weight: 500;
}

.my-component sınıfı, font-weight değerini 500 olarak ayarlar. .my-component içindeki <strong> öğelerinin font-weight: 500 olmasını sağlamak için şunları ekleyin:

.my-component strong {
  font-weight: inherit;
}

Artık .my-component içindeki <strong> öğelerinin 500 değerine sahip bir font-weight değeri olacak.

Bu değeri açıkça ayarlayabilirsiniz, ancak inherit kullanıyorsanız ve .my-component'ın CSS'si gelecekte değişirse <strong> öğenizin otomatik olarak güncel kalacağını garanti edebilirsiniz.

initial anahtar kelimesi

Devralma, öğelerinizde sorunlara neden olabilir. initial, güçlü bir sıfırlama seçeneği sunar.

CSS'de her mülkün varsayılan bir değeri olduğunu daha önce öğrenmiştiniz. initial anahtar kelimesi, bir özelliği ilk varsayılan değere geri ayarlar.

aside strong {
  font-weight: initial;
}

Bu snippet, bir <aside> öğesindeki tüm <strong> öğelerinin kalınlığını kaldırır ve bunların yerine başlangıç değeri olan normal ağırlığı uygular.

unset anahtar kelimesi

Bir mülk varsayılan olarak devralınır veya devralınmazsa unset mülkü farklı davranır. Bir mülk varsayılan olarak devralınırsa unset anahtar kelimesi inherit ile aynı olur. Mülk varsayılan olarak devralınmamışsa unset anahtar kelimesi initial değerine eşittir.

Varsayılan olarak hangi CSS özelliklerinin devralındığını hatırlamak zor olabilir. Bu bağlamda unset faydalı olabilir. Örneğin, color varsayılan olarak devralınır ancak margin devralınmaz. Bu nedenle, ş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;
}

Artık 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önecek olursak, genel p stillerine birkaç özellik daha eklenirse 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;
}

aside p kuralını all: unset olarak değiştirirseniz gelecekte p öğesine hangi genel stillerin uygulandığı önemli değildir. Bu stiller her zaman devre dışı bırakılır.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

Öğrendiklerinizi test etme

Devralma hakkındaki bilginizi test edin

Aşağıdaki özelliklerden hangileri varsayılan olarak devralınır?

animation
Animasyonlar çocuklara aktarılmaz.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Hangi değer, devralınacak bir şey olmadığı sürece inherit gibi, sonra da 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