CSS Inheritance

css
property

Entry posted by Doğuhan ELMA in Properties Kasım 12

23 views

https://www.herseyibul.com/entry/6-css-inheritance/

1. INHERITANCE NEDİR?

Inheritance (Kalıtım), bazı CSS özelliklerinin parent elementlerden child elementlere otomatik olarak geçmesidir.

<div style="color: blue; border: 1px solid red;">
    <p>Bu metin mavi olur</p>
    <span>Bu da mavi olur</span>
</div>

color: blue → Miras alınır (inherit edilir)
border: 1px solid red → Miras alınmaz

2. HANGİ ÖZELLİKLER MIRAS ALINIR?

Miras Alınan Özellikler (Inherited Properties)

Tipografi/Metin Özellikleri:

color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
text-align
text-indent
text-transform
white-space
word-spacing
direction

Liste Özellikleri:

list-style
list-style-image
list-style-position
list-style-type

Tablo Özellikleri:

border-collapse
border-spacing
caption-side
empty-cells

Diğer:

cursor
visibility (kısmen)
quotes
orphans
widows

Miras Alınmayan Özellikler (Non-Inherited)

Box Model:

margin
padding
border
width
height
max-width
min-height
/* vb. */

Positioning:

position
top, right, bottom, left
z-index
float
clear

Background:

background
background-color
background-image
background-position
/* vb. */

Display:

display
overflow
opacity

Transform & Animation:

transform
transition
animation

3. INHERITANCE NASIL ÇALIŞIR?

Doğal Kalıtım

<style>
body {
    font-family: Arial;
    color: #333;
    line-height: 1.6;
}
</style>

<body>
    <div>
        <p>Bu metin Arial, #333 renk, 1.6 line-height</p>
        <span>Bu da aynı özellikleri alır</span>
    </div>
</body>

Kalıtım Zinciri

<style>
.grandparent {
    color: red;
    font-size: 20px;
}

.parent {
    font-size: 16px; /* Override eder */
    /* color hala red */
}
</style>

<div class="grandparent">
    <div class="parent">
        <p>Metin: red renk, 16px boyut</p>
    </div>
</div>

4. INHERITANCE KONTROL DEĞERLERİ

inherit

/* Zorla parent'tan miras al */
.child {
    border: inherit; /* Normal şartlarda miras alınmaz */
}

<style>
.parent {
    border: 2px solid blue;
}

.child {
    border: inherit; /* Parent'ın border'ını alır */
}
</style>

<div class="parent">
    <div class="child">Mavi border alır</div>
</div>

initial:

/* Özelliği başlangıç değerine döndür */
.element {
    color: initial; /* Browser'ın default değeri (genelde black) */
}

.parent {
    color: red;
}

.child {
    color: initial; /* red değil, black olur */
}

unset

/* Eğer inherit edilebilir ise inherit, değilse initial */
.element {
    color: unset; /* inherit gibi davranır */
    border: unset; /* initial gibi davranır */
}

<style>
.parent {
    color: blue;
    border: 2px solid red;
}

.child {
    all: unset;
    /* color: blue olur (inherit)
       border: none olur (initial) */
}
</style>

revert

/* User agent stylesheet'e geri döner */
h1 {
    font-size: 12px;
}

h1.special {
    font-size: revert; /* Browser default h1 size'a döner (32px gibi) */
}

revert-layer

@layer base {
    p { color: blue; }
}

@layer theme {
    p { 
        color: red;
        font-size: revert-layer; /* base layer'a döner */
    }
}

5. ALL ÖZELLİĞİ

/* TÜM özellikleri kontrol et */
.reset {
    all: initial; /* Tüm özellikleri initial yap */
}

.inherit-all {
    all: inherit; /* Tüm özellikleri miras al */
}

.unset-all {
    all: unset; /* Tüm özellikleri unset yap */
}

.revert-all {
    all: revert; /* Tüm özellikleri user agent'a döndür */
}

Pratik Örnek:

<style>
.card {
    color: red;
    font-size: 18px;
    border: 1px solid black;
    padding: 20px;
}

.card-content {
    all: unset;
    /* color, font-size miras alınır
       border, padding sıfırlanır */
}
</style>

<div class="card">
    <div class="card-content">
        Temiz başlangıç
    </div>
</div>

6. COMPUTED VALUE & INHERITANCE

Relative Değerler ve Kalıtım

.parent {
    font-size: 20px;
}

.child {
    font-size: 1.5em; /* 30px olur (20px × 1.5) */
}

.grandchild {
    font-size: 1.5em; /* 45px olur (30px × 1.5) - COMPOUNDİNG! */
}

Problem: Em değerleri katlanarak büyür!

Çözüm: Rem kullan:

.parent {
    font-size: 1.25rem; /* 20px (root 16px ise) */
}

.child {
    font-size: 1.5rem; /* 24px - parent'tan bağımsız */
}

Percentage ve Kalıtım

.parent {
    font-size: 20px;
    line-height: 150%; /* 30px computed value */
}

.child {
    /* line-height: 30px miras alır (computed value) */
    /* percentage değil, pixel değeri miras alınır */
}

Unitless değerler daha iyi:

.parent {
    font-size: 20px;
    line-height: 1.5; /* Unitless! */
}

.child {
    font-size: 16px;
    /* line-height: 1.5 miras alır (ratio)
       computed: 24px (16px × 1.5) */
}

7. INHERITANCE VE SPECİFİCİTY

/* Specificity: 1 */
p {
    color: red;
}

/* Specificity: 0 (inherited) */
div {
    color: blue;
}

<div>
    <p>Kırmızı olur!</p>
</div>

Kural: Doğrudan targeting her zaman inheritance'ı yener, specificity ne olursa olsun!

8. CUSTOM PROPERTIES VE INHERITANCE

CSS Variables her zaman inherit edilir:

:root {
    --main-color: blue;
    --spacing: 20px;
}

.parent {
    --main-color: red; /* Override */
}

.child {
    color: var(--main-color); /* red kullanır */
    padding: var(--spacing); /* 20px kullanır */
}

Cascade ve Inheritance ile Güçlü Patern:

:root {
    --theme-color: blue;
}

.dark-mode {
    --theme-color: white;
}

button {
    background: var(--theme-color);
    /* Parent'a göre otomatik değişir */
}
.dark-mode {
        --theme-color: white;
    }

button etiketinin background kuralı hiç değişmez. Değişen tek şey, var(--theme-color) fonksiyonunun bulduğu değerdir.

var() fonksiyonu, button elemanının kendisinden başlayarak "ata" zincirinde (parent, grandparent...) yukarı doğru --theme-color değişkenini arar:

Normal Buton:
- Tarayıcı butona bakar: --theme-color tanımlı mı? Hayır.
- Butonun ebeveyni <body>'ye bakar: Tanımlı mı? Hayır.
- En tepeye, :root'a bakar: Tanımlı mı? Evet! Değer: blue.
- Sonuç: background: blue;
.dark-mode İçindeki Buton:
- Tarayıcı butona bakar: Tanımlı mı? Hayır.
- Butonun ebeveynine bakar (diyelim ki <div class="dark-mode">😞 Tanımlı mı? Evet! Değer: white.
- (Aramayı durdurur, :root'a gitmesine gerek kalmaz.)
- Sonuç: background: white;

Container Queries:

.container {
    color: blue;
}

@container (min-width: 400px) {
    .item {
        /* color: blue inherit edilir */
        font-size: 18px;
    }
}

Scope:

@scope (.card) {
    p {
        /* .card'ın color'unu inherit eder */
    }
}

ÖZET

Inheritance mantığı:

Tipografi ve metin özellikleri miras alınır
Layout ve box model özellikleri miras alınmaz
inherit, initial, unset, revert ile kontrol edilir
Direct targeting her zaman inheritance'ı yener
Computed values miras alınır (percentage'ler değil)
CSS Variables her zaman inherit edilir
all property ile toplu kontrol

Inheritance, CSS'in en güçlü özelliklerinden biri - doğru kullanıldığında kod tekrarını önler ve maintainable stil sistemleri oluşturmayı sağlar!

Sign In

CSS