Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma
Fiziksel CSS özelliklerinin RTL yerleşimlerini neden bozduğunu ve mantıksal özelliklerin bunu nasıl düzelttiğini anlayın.
Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Fiziksel Özelliklerin Sorunu
Geleneksel CSS fiziksel yönleri kullanır: üst, sağ, alt, sol. Bunlar İngilizce gibi soldan sağa (LTR) yazılan diller için uygundur; ancak Arapça ve İbranice gibi sağdan sola (RTL) yazılan dillerde veya geleneksel Japonca gibi dikey yazı sistemlerinde sorun çıkarır.
Fiziksel ve Mantıksal Özellikler
Karşılaştırın:
- Fiziksel: üst, sağ, alt, sol — ekrana sabitlenir
- Mantıksal: block-start, block-end, inline-start, inline-end — yazma moduna göre belirlenir
Blok ve Satır İçi Eksenler
Her yazı sisteminde şunlar bulunur:
- Blok ekseni: metin bloklarının istiflendiği yön (LTR/RTL'de dikey, dikey yazıda yatay)
- Satır içi eksen: metnin bir satır içinde aktığı yön (LTR/RTL'de yatay, dikey yazıda dikey)
LTR ve RTL Yerleşimi
LTR'de (İngilizce): inline-start = sol, inline-end = sağ. RTL'de (Arapça): inline-start = sağ, inline-end = sol. Mantıksal özellikler, medya sorgularına veya JavaScript'e gerek kalmadan otomatik olarak uyarlanır.
Fiziksel Özelliklerin Gerçek Maliyeti
Fiziksel özelliklerle yazılmış bir site, çevrilmesi gereken her margin, padding, border, position ve text-alignment özelliği için ayrı bir RTL geçersiz kılma stil sayfasına veya özellik bazında geçersiz kılmalara ihtiyaç duyar. Bu da bakım işini iki katına çıkarır.
Yazma Modu Eksenleri Etkiler
writing-mode: vertical-rl ayarlandığında (dikey Japonca/Korece), blok ekseni yatay, satır içi eksen ise dikey olur. Mantıksal özellikler otomatik olarak uyarlanır.
<div class="vertical-text">縦書きテキスト Vertical Text</div>
Modern CSS'de Kullanım
Tüm büyük tarayıcılar mantıksal özellikleri destekler. CSS belirtimi artık yazma moduyla veya yönle değişebilecek bir yöne bağlı olan tüm özelliklerde mantıksal özelliklerin kullanılmasını önerir.
Pratik Etki
Mantıksal özellikleri doğru kullanan tek bir kod tabanı, kod tekrarı olmadan LTR, RTL ve dikey yazıyı destekler. CSS, kök öğedeki direction ve writing-mode değerlerini izler.
HTML'de dir="rtl"
Yazı yönünü yalnızca CSS'de değil, HTML'de de ayarlayın:
<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>
Aşamalı Geçiş
Tüm CSS'nizi bir kerede yeniden yazmanız gerekmez. Yeni bileşenlerde mantıksal özellikleri kullanmaya başlayın. Zaman içinde, uluslararasılaştırmaya duyarlı alanların parçası olan bileşenlerdeki fiziksel özellikleri yeniden düzenleyin.
CSS direction Özelliği
direction CSS özelliği (ltr veya rtl), satır içi akış yönünü etkiler. Öğe için eksiksiz yazı sistemi bağlamını tanımlamak üzere writing-mode ile birlikte çalışır.
Hızlı Kontrol
margin-left gibi fiziksel CSS özellikleri RTL yerleşimlerinde neden sorunlara yol açar?
Özet
CSS mantıksal özellikleri, fiziksel üst/sağ/alt/sol yerine blok ve satır içi modelini kullanır. Bu sayede tek bir stil sayfası LTR, RTL ve dikey yazı sistemlerinde çalışabilir. direction ve writing-mode özellikleri, mantıksal özelliklerin otomatik olarak uyarlandığı bağlamı tanımlar.
Sıkça Sorulan Sorular
“Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma” dersi ücretsiz mi?
Evet — “Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma” dersinde ne öğreneceğim?
Fiziksel CSS özelliklerinin RTL yerleşimlerini neden bozduğunu ve mantıksal özelliklerin bunu nasıl düzelttiğini anlayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma
- Blok ve Satır İçi Yönler
- Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık
- RTL Yerleşimlerinde Mantıksal Özellikler