Devralma

The CSS Podcast - 005: Inheritance

Örneğin, öğelerin düğme gibi görünmesini sağlamak 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, içerik makalesine class değeri .my-button olan bir bağlantı öğesi eklersiniz. Ancak bir sorun var: Metin, beklediğiniz renkte değil. Bu nasıl oldu?

Bazı CSS özellikleri, değer belirtmediğiniz takdirde devralınır. Bu düğme örneğinde, bu CSS'den color devralınmıştır:

article a {   color: maroon; }

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

Devralma akışı

Aşağıdaki HTML snippet'ini kullanarak devralma özelliğinin nasıl çalıştığına göz atın:

<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 eklediğinizde bu CSS, dokümana doğru basamaklanmaya başlar.

html {   color: lightslategray; }

color özelliği, varsayılan olarak diğer öğeler tarafından devralınır. html öğesi color: lightslategray içerdiğinden, rengi devralabilen tüm öğeler artık lightslategray rengine sahip olacak.

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

En iç içe yerleştirilmiş öğe olduğundan yalnızca <p> öğesinde italik metin bulunur. Devralma yalnızca aşağıya doğru gerçekleşir, üst öğelere geri dönmez.

Hangi özellikler varsayılan olarak 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, varsayılan olarak devralınan özelliklerin tam listesini aşağıda bulabilirsiniz:

Devralmanın işleyiş şekli

Her HTML öğesinde, her CSS özelliği varsayılan olarak başlangıç değeriyle tanımlanır. Başlangıç değeri, devretme işlemi ilgili öğe için bir değer hesaplayamadığında varsayılan olarak gösterilen ve devralınmayan bir özelliktir.

Devralınabilen özellikler aşağıya doğru sıralanır ve alt öğeler, üst öğenin değerini temsil eden hesaplanmış bir değer alır. Yani bir üst öğenin font-weight değeri bold olarak ayarlanmışsa font-weight değeri 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.

Devralmayı açıkça belirtme ve devralmayı kontrol etme

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

The inherit keyword

inherit anahtar kelimesiyle herhangi bir özelliğin üst öğesinin hesaplanmış değerini devralmasını sağlayabilirsiniz. Bu anahtar kelimeyi kullanmanın faydalı bir yolu, istisnalar oluşturmaktır.

strong {   font-weight: 900; }

Bu CSS snippet'i, varsayılan bold değeri yerine tüm <strong> öğelerinin font-weight değerini 900 olarak 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 de font-weight: 500 yapmak için şunu ekleyin:

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

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

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

The initial keyword

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

Daha önce, CSS'de her özelliğin varsayılan bir değeri olduğunu öğrenmiştiniz. initial anahtar kelimesi, bir özelliği ilk varsayılan değerine geri ayarlar.

aside strong {   font-weight: initial; }

Bu snippet, <aside> öğesi içindeki tüm <strong> öğelerinden kalın ağırlığı kaldırır ve bunun yerine, başlangıç değeri olan normal ağırlığı uygular.

The unset keyword

Bir özellik varsayılan olarak devralınıyorsa unset özelliği farklı şekilde davranır. Bir özellik varsayılan olarak devralınıyorsa unset anahtar kelimesi inherit ile aynı olur. Özellik varsayılan olarak devralınmıyorsa unset anahtar kelimesi initial değerine eşittir.

Hangi CSS özelliklerinin varsayılan olarak devralındığını hatırlamak zor olabilir. Bu durumda unset yardımcı 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. Önceki örneğe dönecek olursak, genel p stillerine birkaç özellik daha eklenirse ne olur? Yalnızca margin ve color için belirlenen 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 uygulanacağı önemli olmaz. Bu stiller her zaman ayarlanmamış olarak kalır.

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

The revert keyword

Basamaklandırma ile ilgili derste öğrendiğiniz gibi, stiller farklı kaynaklardan gelir: kullanıcı aracısı temel stilleri, kullanıcı tercihi stilleri ve sizin oluşturduğunuz stiller. revert anahtar kelimesi, revert anahtar kelimesinin kullanıldığı kaynakta ayarlanan stilleri geri alır.

Bu özellik, bir stil belirlediğiniz ancak bazı durumlarda uygulanmasını istemediğinizde kullanışlıdır. inherit, initial ve unset bir stilin değerinin nasıl hesaplanacağını belirtirken revert yalnızca yazdığınız diğer stillerin uygulanmadığını belirtir.

p {   padding: 2em; }  aside p {   padding: revert; }

Bu snippet, <p> öğelerine dolgu verir ancak <p> öğesi bir <aside> öğesinin içindeyken padding öğesini hiç belirtmez. Bunun yerine, kullanıcı tercihi stiline (ayarlanmışsa) veya kullanıcı aracısı temel stillerine geri döner.

The revert-layer keyword

Basamaklı katmanlar, stillerinizi düzenlemek ve basamaklı stilin yazar kaynağında stillerinize öncelik vermek için kullanışlı bir yöntem sunar. revert-layer anahtar kelimesi revert anahtar kelimesine benzer ancak bir özellik için yazar stillerinizin hiçbirinin uygulanmaması gerektiğini belirtmek yerine yalnızca geçerli katmandaki stilleri geri alır.

Üçüncü taraf kullanıcı arayüzü kitaplığı kullanıyorsanız bunu bir katmana aktarmak ve geçersiz kılmaları daha yüksek öncelikli bir katmana eklemek faydalı bir yöntemdir. Ardından, revert-layer kullanarak bir geçersiz kılmayı kaldırabilirsiniz. Bu durumda, kullanıcı arayüzü kitaplığının varsayılanları kullanılır.

Başka katmanlar özellik için değer belirtmezse revert gibi davranır ve önceki bir kaynaktan değer kullanır.

Anlayıp anlamadığınızı kontrol etme

Mirasla ilgili bilginizi test etme

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

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

Devralınacak bir şey yoksa inherit gibi davranan, aksi takdirde initial gibi davranan değer hangisidir?

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

Kaynaklar