Merhaba arkadaşlar, bugün sizlere eskiden benim de gözümü korkutan, ama bir kere alışınca asla vazgeçemediğim bir CSS özelliğinden bahsedeceğim: Logical Properties. Özellikle çok dilli ve RTL (sağdan sola) desteği gerektiren projelerde, margin/padding için `left`, `right` yazmak baş ağrıtıyordu. İşte tam da bu noktada `margin-inline-start` gibi özellikler imdada yetişiyor.
Neden Bu Kadar Geç Öğrendim?
Diyelim ki bir butonun soluna `margin-left: 1rem;` verdiniz. Site harika görünüyor. Ta ki Arapça veya İbranice gibi RTL bir dil eklene kadar. O zaman her şey tersine döndü ve butonun margin-left'i, aslında artık sağ tarafında kaldı! Tüm layout'u düzeltmek için `[dir="rtl"]` seçicileriyle tek tek `margin-left`'i `margin-right` yapmak zorunda kalıyordunuz. Bu hatayı ilk gördüğümde, özellikle karmaşık bir component kütüphanesi üzerinde çalışıyorsam, gerçekten kafayı yemiştim.
Logical Properties Mantığı Nedir?
Logical Properties, fiziksel yönler yerine (sol, sağ, üst, alt) mantıksal yönleri kullanır. Yani yazı akışına (writing mode) ve yönüne (direction) göre kendini otomatik ayarlar.
Temel olarak iki eksen var:
- Block Ekseni: Yazının blok olarak ilerlediği yön (normalde dikey/yukarıdan-aşağıya).
- Inline Ekseni: Yazının satır içinde ilerlediği yön (normalde yatay/soldan-sağa).
Fiziksel vs. Logical Karşılaştırması ve Kodlar
İşte benim artık her projemde kullandığım, en temiz çözüm:
Şimdi de yeni, sihirli yönteme bakalım:
Bu kodu yazdığınızda, tarayıcı `dir="ltr"` ise `margin-inline-start` otomatik olarak `margin-left` olur. Eğer `dir="rtl"` ise, bu sefer otomatikman `margin-right`'a dönüşür! Aynı şey `border-inline-end` için de geçerli. padding-block ise zaten yön bağımsız, her zaman dikey eksende çalışır.
Hangi Özellikleri Kullanabiliriz?
En sık kullandıklarım şunlar:
- `margin-inline`, `margin-inline-start`, `margin-inline-end`
- `padding-block`, `padding-block-start`, `padding-block-end`
- `border-inline`, `border-block`
- `width`/`height` yerine `inline-size` ve `block-size`
Avantajları ve Dikkat Edilmesi Gerekenler
Avantajları bariz: Kod temizliği, bakım kolaylığı ve otomatik RTL/LTR desteği. Ancak dikkat etmeniz gereken nokta, tarayıcı desteği. Modern tarayıcıların hepsi destekliyor ama eski projelerde (özellikle IE) çalışmaz. CanIUse sitesinden kontrol etmeyi unutmayın. Ben genelde progressive enhancement mantığıyla kullanıyorum. Yani temel stil fiziksel özelliklerle, gelişmiş stil logical properties ile verilebilir.
Sizler de projelerinizde logical properties kullanıyor musunuz? Özellikle Tailwind CSS gibi framework'lerle entegre etmekte zorlandığınız oldu mu? Veya bu konuda farklı bir yaklaşımınız, taktiğiniz varsa yorumlarda paylaşın, hep birlikte öğrenelim!
Neden Bu Kadar Geç Öğrendim?Diyelim ki bir butonun soluna `margin-left: 1rem;` verdiniz. Site harika görünüyor. Ta ki Arapça veya İbranice gibi RTL bir dil eklene kadar. O zaman her şey tersine döndü ve butonun margin-left'i, aslında artık sağ tarafında kaldı! Tüm layout'u düzeltmek için `[dir="rtl"]` seçicileriyle tek tek `margin-left`'i `margin-right` yapmak zorunda kalıyordunuz. Bu hatayı ilk gördüğümde, özellikle karmaşık bir component kütüphanesi üzerinde çalışıyorsam, gerçekten kafayı yemiştim.
Logical Properties Mantığı Nedir?Logical Properties, fiziksel yönler yerine (sol, sağ, üst, alt) mantıksal yönleri kullanır. Yani yazı akışına (writing mode) ve yönüne (direction) göre kendini otomatik ayarlar.
Temel olarak iki eksen var:
- Block Ekseni: Yazının blok olarak ilerlediği yön (normalde dikey/yukarıdan-aşağıya).
- Inline Ekseni: Yazının satır içinde ilerlediği yön (normalde yatay/soldan-sağa).
Fiziksel vs. Logical Karşılaştırması ve Kodlarİşte benim artık her projemde kullandığım, en temiz çözüm:
CSS:
/ ESKİ YÖNTEM (Fiziksel) - RTL için baş ağrısı! /
.button {
margin-left: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-right: 2px solid #3498db;
}
/ RTL Desteği için ekstra kod gerekli /
[dir="rtl"] .button {
margin-left: 0;
margin-right: 1rem;
border-right: none;
border-left: 2px solid #3498db;
}Şimdi de yeni, sihirli yönteme bakalım:
CSS:
/ YENİ YÖNTEM (Logical) - Tarayıcı yönü kendi halleder! /
.button {
margin-inline-start: 1rem; / Yazım yönünün başlangıcına margin /
padding-block: 0.5rem; / Block ekseninde (üst+alt) padding /
border-inline-end: 2px solid #3498db; / Yazım yönünün sonuna border /
}Bu kodu yazdığınızda, tarayıcı `dir="ltr"` ise `margin-inline-start` otomatik olarak `margin-left` olur. Eğer `dir="rtl"` ise, bu sefer otomatikman `margin-right`'a dönüşür! Aynı şey `border-inline-end` için de geçerli. padding-block ise zaten yön bağımsız, her zaman dikey eksende çalışır.
Hangi Özellikleri Kullanabiliriz?En sık kullandıklarım şunlar:
- `margin-inline`, `margin-inline-start`, `margin-inline-end`
- `padding-block`, `padding-block-start`, `padding-block-end`
- `border-inline`, `border-block`
- `width`/`height` yerine `inline-size` ve `block-size`
Avantajları ve Dikkat Edilmesi GerekenlerAvantajları bariz: Kod temizliği, bakım kolaylığı ve otomatik RTL/LTR desteği. Ancak dikkat etmeniz gereken nokta, tarayıcı desteği. Modern tarayıcıların hepsi destekliyor ama eski projelerde (özellikle IE) çalışmaz. CanIUse sitesinden kontrol etmeyi unutmayın. Ben genelde progressive enhancement mantığıyla kullanıyorum. Yani temel stil fiziksel özelliklerle, gelişmiş stil logical properties ile verilebilir.
Sizler de projelerinizde logical properties kullanıyor musunuz? Özellikle Tailwind CSS gibi framework'lerle entegre etmekte zorlandığınız oldu mu? Veya bu konuda farklı bir yaklaşımınız, taktiğiniz varsa yorumlarda paylaşın, hep birlikte öğrenelim!