Devralma

CSS Podcast'i - 005: Devralma

Öğelerin düğme gibi görünmesi 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;
}

Ardından bir içerik makalesine bağlantı öğesi eklersiniz. class .my-button değerine sahip. Ancak bir sorun var; Metin, beklediğiniz renkte değilse. Bu nasıl oldu?

Bazı CSS özellikleri için değer belirtmezseniz bunu devralırsınız. Bu düğmede color öğesini şu CSS'den devralındı:

article a {
  color: maroon;
}

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

Devralma akışı

Şimdi, devralmanın işleyiş şekline kullanarak aşağıdaki HTML snippet'ini kullanabilirsiniz:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

Kök öğe (<html>), dokümandaki ilk öğe olduğu için hiçbir şeyi devralmaz. HTML öğesine CSS ekleyin, belgenin kademeli olarak aşağı inmeye başladığını.

html {
  color: lightslategray;
}

color özelliği, varsayılan olarak diğer öğeler tarafından devralınır. html öğesi color: lightslategray, bu nedenle, renk devralabilen tüm öğelerin rengi lightslategray olur.

body {
  font-size: 1.2em;
}
ziyaret edin. 
p {
  font-style: italic;
}

En derin iç içe yerleştirilmiş öğe olduğu için yalnızca <p> italik metin içerir. Devralma yalnızca aşağı doğru ilerler, üst öğelere yedeklenmez.

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

Varsayılan olarak tüm CSS özellikleri devralınmaz. ama gerçek pek çok şey var. Varsayılan olarak devralınan mülklerin tam listesini aşağıda bulabilirsiniz. tüm CSS özelliklerinin W3 referansından alınmıştır:

Devralmanın işleyiş şekli

Her HTML öğesi varsayılan olarak bir başlangıç değeriyle tanımlanmış her CSS özelliğine sahiptir. Başlangıç değeri, devralınmamış ve varsayılan olarak gösterilen bir özelliktir. bu öğe için bir değer hesaplayamazsa.

Devralınabilen özellikler aşağı basamaklara doğru, ve alt öğeler, üst öğesinin değerini temsil eden hesaplanan bir değer alır. Bu, bir üst öğede font-weight değerinin bold değerine ayarlandığı durumlarda tüm alt öğelerin kalın olacağı anlamına gelir. font-weight farklı bir değere ayarlanmadığı sürece veya kullanıcı aracısı stil sayfasında bu öğe için font-weight değeri bulunur.

Devralmayı açık bir şekilde devralma ve kontrol etme

Devralma, öğeleri beklenmedik şekillerde etkileyebileceğinden CSS'nin bu konuda size yardımcı olacak araçları vardır.

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 kullanışlı bir yoludur.

strong {
  font-weight: 900;
}

Bu CSS snippet'i, tüm <strong> öğelerini font-weight değeri 900 olacak şekilde ayarlar. yerine varsayılan bold değeri (font-weight: 700 eşdeğeri olur).

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

.my-component sınıfı, bunun yerine font-weight öğesini 500 olarak ayarlar. .my-component içindeki <strong> öğelerini font-weight: 500 haline getirmek için şunları da ekleyin:

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

Artık .my-component içindeki <strong> öğelerinde font-weight olarak 500 olacak.

Bu değeri açıkça ayarlayabilir, ancak gelecekte inherit ve .my-component CSS'si değişikliği yaparsanız <strong> cihazınızın otomatik olarak güncel kalacağını garanti edebilirsiniz.

initial anahtar kelimesi

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

CSS'de her özelliğin varsayılan bir değeri olduğunu daha önce öğrenmiştiniz. initial anahtar kelimesi, bir özelliği tekrar varsayılan olan bu başlangıç değerine ayarlar.

aside strong {
  font-weight: initial;
}

Bu snippet, bir <aside> öğesindeki tüm <strong> öğelerinde kalın yazı tipini kaldırır ve bunun yerine o da başlangıç değeri olan normal ağırlıkta olmalarını sağlar.

unset anahtar kelimesi

Bir mülk varsayılan olarak devralınırsa veya devralınmazsa unset özelliği 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ınmazsa unset anahtar kelimesi initial değerine eşit olur.

Varsayılan olarak hangi CSS özelliklerinin devralındığını hatırlamak zor olabilir. unset bu bağlamda faydalı olabilir. Örneğin, color varsayılan olarak devralınır. ancak margin olmadığı için ş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 hesaplanan değere geri döner.

unset değerini all özelliğiyle de kullanabilirsiniz. Yukarıdaki örneğe dönersek, Genel p stilleri birkaç özellik daha alırsa ne olur? Yalnızca margin ve color için ayarlanan kural uygulanacak.

/* 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, p için hangi genel stillerin uygulanacağı önemli değildir; her zaman ayarlanmamış olur.

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 geçmez.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Devralınacak bir şey olmadığı sürece inherit gibi davranan ve initial gibi davranır mı?

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

Kaynaklar