CSS Mantıksal Özellikler Seviye 2: Gelişmiş Yazma Modu Desteği ile Gerçek Anlamda Küresel Bir Web Oluşturma

Onlarca yıldır web geliştiricileri, düzenlerini fiziksel dünyaya dayanan bir kelime dağarcığı kullanarak oluşturdular: top, bottom, left, ve right. Bir margin-left, bir padding-top ve bir border-right belirledik. Bu zihinsel model, web ağırlıklı olarak soldan sağa, yukarıdan aşağıya bir mecra olduğunda işimize yaradı. Ancak web küreseldir. Tüm diller ve kültürler için bir platformdur ve bunların çoğu bu basit yön akışını takip etmez.

Arapça ve İbranice gibi diller sağdan sola yazılır. Geleneksel Japonca ve Çince dikey olarak, yukarıdan aşağıya ve sağdan sola yazılabilir. Bu yazı sistemlerine fiziksel, soldan sağa bir CSS modelini zorlamak, bozuk düzenlere, sinir bozucu bir kullanıcı deneyimine ve yığınla kodun üzerine yazılmasına neden olur. İşte bu noktada, fiziksel yönlerden akışa göreli, mantıksal yönlere temel bir paradigma kaymasını temsil eden CSS Mantıksal Özellikler ve Değerler devreye giriyor. Seviye 1 temeli atmış olsa da, CSS Mantıksal Özellikler Seviye 2 resmi tamamlayarak, gerçekten evrensel, yazma moduna duyarlı kullanıcı arayüzleri oluşturmak için ihtiyaç duyduğumuz araçları sağlıyor.

Bu kapsamlı rehber, sizi Seviye 2'nin getirdiği geliştirmelere derinlemesine bir yolculuğa çıkaracak. Temel kavramları tazeleyerek başlayacak, ardından boşlukları dolduran yeni özellikleri ve değerleri keşfedecek ve son olarak, her yazı moduna sorunsuz bir şekilde uyum sağlayan bir bileşen oluşturarak tüm bunları uygulamaya dökeceğiz. CSS düzeni hakkındaki düşüncelerinizi sonsuza dek değiştirmeye hazır olun.

Hızlı Bir Hatırlatma: Mantıksal Özelliklerin Temel Kavramları (Seviye 1)

Seviye 2'deki eklemeleri takdir edebilmek için önce Seviye 1 tarafından atılan temeli sağlam bir şekilde anlamamız gerekir. Tüm sistem iki temel kavram üzerine kuruludur: yazma modu (writing mode) ve bunun sonucunda ortaya çıkan blok ve satır içi eksenler (block and inline axes).

Dört Yazma Modu

writing-mode CSS özelliği, metnin yerleştirileceği yönü belirler. Genellikle varsayılanı kanıksasak da, içeriğin sayfada nasıl aktığını temelden değiştiren birkaç değer vardır:

• horizontal-tb: Bu, çoğu Batı dili için varsayılandır. Metin yatay olarak (satır içi eksen) soldan sağa (veya yöne bağlı olarak sağdan sola) akar ve satırlar yukarıdan aşağıya (blok ekseni) istiflenir.
• vertical-rl: Geleneksel Doğu Asya tipografisi (örneğin Japonca, Çince) için kullanılır. Metin dikey olarak yukarıdan aşağıya (satır içi eksen) akar ve satırlar sağdan sola (blok ekseni) istiflenir.
• vertical-lr: Yukarıdakine benzer, ancak satırlar soldan sağa (blok ekseni) istiflenir. Daha az yaygındır, ancak Moğol alfabesi gibi bazı bağlamlarda kullanılır.
• sidelong-rl / sidelong-lr: Bunlar, glifleri yan yatırmak istediğiniz özel kullanım durumları içindir. Genel web içeriğinde daha az yaygındırlar.

Kritik Kavram: Blok ve Satır İçi Eksen

Bu, kavranması gereken en önemli kavramdır. Mantıksal bir dünyada, "dikey" ve "yatay" hakkında düşünmeyi bırakıp blok (block) ve satır içi (inline) eksenler açısından düşünmeye başlarız. Yönelimleri tamamen writing-mode'a bağlıdır.

• Satır İçi Eksen (Inline Axis), metnin tek bir satır içinde aktığı yöndür.
• Blok Eksen (Block Axis), yeni satırların istiflendiği yöndür.

Bunun nasıl işlediğini görelim:

• Standart İngilizce'de (writing-mode: horizontal-tb): Satır içi eksen yatay olarak, blok eksen ise dikey olarak çalışır.
• Geleneksel Japonca'da (writing-mode: vertical-rl): Satır içi eksen dikey olarak, blok eksen ise yatay olarak çalışır.

Bu eksenler yer değiştirebildiği için width ve height gibi özellikler belirsiz hale gelir. width, yatay eksen boyunca mı yoksa satır içi eksen boyunca mı olan boyuttur? Mantıksal özellikler bu belirsizliği çözer. Artık her eksen için start ve end değerlerine sahibiz:

• block-start: İngilizce'de "üst" (top), ancak dikey Japonca'da "sağ" (right).
• block-end: İngilizce'de "alt" (bottom), ancak dikey Japonca'da "sol" (left).
• inline-start: İngilizce'de "sol" (left), ancak dikey Japonca'da "üst" (top).
• inline-end: İngilizce'de "sağ" (right), ancak dikey Japonca'da "alt" (bottom).

Fiziksel Özellikleri Mantıksal Özelliklerle Eşleştirme (Seviye 1)

Seviye 1, fizikselden mantıksal özelliklere kapsamlı bir eşleştirme seti sundu. İşte birkaç önemli örnek:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (konumlandırma için) → inset-inline-start / inset-inline-end
• top / bottom (konumlandırma için) → inset-block-start / inset-block-end

Seviye 1 ayrıca bize margin-inline (başlangıç ve bitiş için) ve padding-block (başlangıç ve bitiş için) gibi kullanışlı kısaltmalar da verdi.

Seviye 2'ye Hoş Geldiniz: Yenilikler ve Neden Önemli Oldukları

Seviye 1 ileriye doğru atılmış devasa bir adım olsa da, bazı göze çarpan boşluklar bıraktı. float, clear ve resize gibi belirli temel CSS özelliklerinin mantıksal karşılıkları yoktu. Ayrıca, border-radius gibi özellikler mantıksal olarak kontrol edilemiyordu, bu da geliştiricileri ince taneli stil için fiziksel özelliklere geri dönmeye zorluyordu. Bu, bir düzeni %90 oranında mantıksal özelliklerle oluşturabileceğiniz, ancak farklı yazma modları için yine de fiziksel üzerine yazmalara ihtiyaç duyacağınız anlamına geliyordu ki bu da amacını kısmen boşa çıkarıyordu.

CSS Mantıksal Özellikler Seviye 2 bu eksiklikleri doğrudan ele alıyor. Bu, radikal yeni bir sistem getirmekle ilgili değil, Seviye 1'de başlatılanı tamamlamakla ilgilidir. Bunu iki temel yolla başarır:

1. Doğası gereği fiziksel olan eski CSS özellikleri için yeni mantıksal özellikler ve değerler getirmek (float gibi).
2. Daha önce göz ardı edilen karmaşık kısaltmalar için mantıksal özellik eşleştirmeleri eklemek (border-radius gibi).

Seviye 2 ile, tamamen akışa göreli bir stil sistem vizyonu neredeyse tamamlanmış olup, hilelere veya üzerine yazmalara gerek kalmadan her yerde, herkes için çalışan karmaşık, güzel ve sağlam bileşenler oluşturmamıza olanak tanır.

Derinlemesine Bakış: Seviye 2'deki Yeni Mantıksal Değerler ve Özellikler

Seviye 2'nin geliştirici araç setimize getirdiği en etkili eklemeleri keşfedelim. Bunlar, boşlukları dolduran ve gerçekten evrensel bileşen tasarımını güçlendiren araçlardır.

Float ve Clear: Mantıksal Devrim

float özelliği yıllardır CSS düzeninin temel taşlarından biri olmuştur, ancak değerleri olan left ve right, fiziksel yönün tanımıdır. İngilizce bir paragrafın soluna bir resim float ederseniz, doğru görünür. Ancak belge yönünü Arapça için sağdan sola (RTL) çevirdiğinizde, resim artık metin bloğunun "yanlış" tarafındadır. Satırın başlangıcı olan sağda olmalıdır.

Seviye 2, float özelliği için iki yeni, mantıksal anahtar kelime sunar:

• float: inline-start; Bu, bir öğeyi satır içi yönün başlangıcına float eder. LTR dillerinde bu soldur. RTL dillerinde ise sağdır. vertical-rl yazma modunda ise üsttür.
• float: inline-end; Bu, bir öğeyi satır içi yönün sonuna float eder. LTR'de bu sağdır. RTL'de ise soldur. vertical-rl'de ise alttır.

Benzer şekilde, float edilmiş öğelerin etrafındaki içeriğin kaydırılmasını kontrol etmek için kullanılan clear özelliği de mantıksal karşılıklarını alır:

• clear: inline-start; Satır içi başlangıç tarafındaki float'ları temizler.
• clear: inline-end; Satır içi bitiş tarafındaki float'ları temizler.

Bu, oyunun kurallarını değiştiren bir özelliktir. Artık tek bir satır ekstra CSS olmadan herhangi bir dil yönüne otomatik olarak uyum sağlayan klasik metin kaydırmalı resim düzenleri oluşturabilirsiniz.

Mantıksal Yeniden Boyutlandırma ile Gelişmiş Kontrol

Genellikle bir textarea'da kullanılan resize özelliği, kullanıcıların bir öğeyi yeniden boyutlandırmasına olanak tanır. Geleneksel değerleri horizontal, vertical ve both'dur. Ancak dikey bir yazma modunda "yatay" ne anlama gelir? Bu hala fiziksel yatay eksen boyunca yeniden boyutlandırma anlamına gelir ki bu, kullanıcının veya tasarımcının niyeti olmayabilir. Kullanıcı muhtemelen satırları daha uzun veya daha kısa yapmak için öğeyi satır içi ekseni boyunca yeniden boyutlandırmak ister.

Seviye 2, resize için mantıksal değerler sunar:

• resize: inline; Satır içi eksen boyunca yeniden boyutlandırmaya izin verir.
• resize: block; Blok ekseni boyunca yeniden boyutlandırmaya izin verir.

İngilizce bir metin alanında resize: block; kullanmak, kullanıcının onu daha uzun yapmasına olanak tanır. Dikey bir yazma modunda kullanmak ise kullanıcının onu daha geniş yapmasına olanak tanır (ki bu blok yönüdür). Sadece çalışır.

`caption-side`: Tablo Başlıkları için Mantıksal Konumlandırma

caption-side özelliği, bir tablonun caption'ının (başlığının) yerleşimini belirler. Eski değerler top ve bottom idi. Yine, bunlar fizikseldir. Bir tasarımcının amacı başlığı tablonun içeriğinden "önce" yerleştirmekse, top yatay yazma modları için işe yarar. Ancak vertical-rl modunda, blok akışının "başlangıcı" üstte değil, sağdadır.

Seviye 2 mantıksal çözümü sunar:

• caption-side: block-start; Başlığı blok akışının başlangıcına yerleştirir.
• caption-side: block-end; Başlığı blok akışının sonuna yerleştirir.

`text-align`: Temel Bir Mantıksal Değer

start ve end değerleri text-align için bir süredir mevcut olsa da, mantıksal özellikler felsefesinin temel bir parçasıdır ve pekiştirmeye değer. text-align: left; kullanmak, RTL dillerinde anında düzen sorunlarına neden olan yaygın bir hatadır. Doğru, modern yaklaşım her zaman şunları kullanmaktır:

• text-align: start; Metni satır içi yönün başına hizalar.
• text-align: end; Metni satır içi yönün sonuna hizalar.

Seviye 2'nin Göz Bebeği: Mantıksal `border-radius`

Belki de Seviye 2'deki en önemli ve güçlü ekleme, kenarlık yarıçaplarını mantıksal olarak kontrol etmeye yönelik özellikler setidir. Daha önce, bir kartın yalnızca "üst" köşelerinin yuvarlak olmasını isteseydiniz, border-top-left-radius ve border-top-right-radius kullanırdınız. Bu, "üst" köşelerin artık start-start ve end-start köşeleri olduğu dikey bir yazma modunda tamamen bozulur.

Seviye 2, bir öğenin dört köşesini akışa göreli bir şekilde eşleyen dört yeni uzun el özelliği sunar. Adlandırma kuralı şöyledir: border-[blok-kenarı]-[inline-kenarı]-radius.

• border-start-start-radius: Blok başlangıcı ve satır içi başlangıç taraflarının birleştiği köşe.
• border-start-end-radius: Blok başlangıcı ve satır içi bitiş taraflarının birleştiği köşe.
• border-end-start-radius: Blok bitişi ve satır içi başlangıç taraflarının birleştiği köşe.
• border-end-end-radius: Blok bitişi ve satır içi bitiş taraflarının birleştiği köşe.

Bunu ilk başta görselleştirmek zor olabilir, bu yüzden farklı yazma modları için haritalayalım:

`border-radius`'u `writing-mode: horizontal-tb`'de Eşleştirme (ör. İngilizce)

• border-start-start-radius, top-left-radius ile eşleşir.
• border-start-end-radius, top-right-radius ile eşleşir.
• border-end-start-radius, bottom-left-radius ile eşleşir.
• border-end-end-radius, bottom-right-radius ile eşleşir.

`dir="rtl"` ile `writing-mode: horizontal-tb`'de `border-radius` Eşleştirmesi (ör. Arapça)

Burada, satır içi yön ters çevrilmiştir.

• border-start-start-radius, top-right-radius ile eşleşir. (Blok başlangıcı üst, satır içi başlangıcı sağdır).
• border-start-end-radius, top-left-radius ile eşleşir.
• border-end-start-radius, bottom-right-radius ile eşleşir.
• border-end-end-radius, bottom-left-radius ile eşleşir.

`writing-mode: vertical-rl`'de `border-radius` Eşleştirmesi (ör. Japonca)

Burada, her iki eksen de döndürülmüştür.

• border-start-start-radius, top-right-radius ile eşleşir. (Blok başlangıcı sağ, satır içi başlangıcı üsttür).
• border-start-end-radius, bottom-right-radius ile eşleşir.
• border-end-start-radius, top-left-radius ile eşleşir.
• border-end-end-radius, bottom-left-radius ile eşleşir.

Bu yeni özellikleri kullanarak, fiziksel ekrana değil, içeriğin akışına anlamsal olarak bağlı köşe yarıçapları tanımlayabilirsiniz. Bir "start-start" köşesi, dil veya metin yönü ne olursa olsun her zaman doğru köşe olacaktır.

Pratik Uygulama: Küresele Hazır Bir Bileşen Oluşturma

Teori harikadır, ama bunun pratikte nasıl çalıştığını görelim. Önce eski fiziksel özellikleri kullanarak basit bir profil kartı bileşeni oluşturacak, ardından onu hem Seviye 1 hem de Seviye 2'den modern mantıksal özellikleri kullanacak şekilde yeniden düzenleyeceğiz.

Kartın bir tarafına kaydırılmış bir resim, bir başlık, biraz metin ve dekoratif bir kenarlık ile yuvarlatılmış köşeleri olacak.

"Eski" Yöntem: Kırılgan, Fiziksel Özellikli Bir Kart

İşte bu kartı birkaç yıl önce nasıl şekillendirmiş olabileceğimiz:

/* --- CSS (Fiziksel Özellikler) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

Standart bir İngilizce LTR bağlamında bu iyi görünüyor. Ancak bunu dir="rtl" veya writing-mode: vertical-rl olan bir kapsayıcının içine yerleştirirsek, düzen bozulur. Dekoratif kenarlık yanlış tarafta, avatar yanlış tarafta, kenar boşluğu hatalı ve yuvarlatılmış köşeler yanlış yerleştirilmiş.

"Yeni" Yöntem: Sağlam, Mantıksal Özellikli Bir Kart

Şimdi, aynı bileşeni mantıksal özellikleri kullanarak yeniden düzenleyelim. Hem Seviye 1'den hem de Seviye 2'den gelen yeni eklemelerden yararlanacağız.

/* --- CSS (Mantıksal Özellikler) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` kısaltması zaten mantıksal! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Seviye 2 Gücü! */

  border-end-start-radius: 8px; /* Seviye 2 Gücü! */

}

.logical-card .avatar {

  float: inline-start; /* Seviye 2 Gücü! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Test ve Doğrulama

Bu yeni CSS ile bileşeni herhangi bir kapsayıcıya bırakabilirsiniz ve otomatik olarak uyum sağlayacaktır.

• LTR bağlamında: Orijinal fiziksel sürümle aynı görünecektir.
• RTL bağlamında (dir="rtl"): Avatar sağa kayacak, kenar boşluğu solda olacak, dekoratif kenarlık sağda olacak ve metin başlangıca (sağa) hizalanacaktır. Yuvarlatılmış köşeler doğru bir şekilde sağ üst ve sağ altta olacaktır. Sadece çalışır.
• Dikey bir bağlamda (writing-mode: vertical-rl): Kartın "genişliği" (şimdi dikey inline-size'ı) 300 piksel olacaktır. Avatar, "altında" (inline-end) bir kenar boşluğu ile "üste" (inline-start) kayacaktır. Dekoratif kenarlık sağ tarafta (inline-start) olacak ve yuvarlatılmış köşeler sağ üst ve sol üstte olacaktır. Bileşen, herhangi bir medya sorgusu veya üzerine yazma olmadan kendini tamamen doğru bir şekilde yeniden yönlendirmiştir.

Tarayıcı Desteği ve Geriye Dönük Uyumluluk (Fallbacks)

Bunların hepsi harika görünüyor, ama tarayıcı desteği ne durumda? İyi haber şu ki, Seviye 1 mantıksal özellikler için destek tüm modern tarayıcılarda mükemmel. margin-inline-start ve padding-block gibi özellikleri bugün kullanabilirsiniz ve kullanmalısınız.

Daha yeni Seviye 2 özellikleri için destek hızla artıyor ancak henüz evrensel değil. float, clear ve resize için mantıksal değerler iyi desteklenmektedir. Mantıksal border-radius özellikleri en yenisidir ve hala özellik bayraklarının arkasında veya en son tarayıcı sürümlerinde olabilir. Her zaman olduğu gibi, en güncel uyumluluk verileri için MDN Web Docs veya CanIUse.com gibi kaynaklara başvurmalısınız.

Aşamalı Geliştirme Stratejileri

CSS esnek olacak şekilde tasarlandığından, eski tarayıcılar için kolayca geri dönüşler sağlayabiliriz. Basamaklama (cascade), bir tarayıcının mantıksal bir özelliği anlamaması durumunda onu basitçe görmezden gelmesini ve ondan önce tanımlanan fiziksel özelliği kullanmasını sağlayacaktır.

İşte geriye dönük uyumlu CSS'i nasıl yazabileceğiniz:

.card {

  /* Eski tarayıcılar için geri dönüş */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Geri dönüşü geçersiz kılacak modern mantıksal özellik */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Bu yaklaşım, modern tarayıcılardaki kullanıcılar için geliştirilmiş, uyarlanabilir bir düzen sağlarken herkes için sağlam bir temel deneyim sağlar. Birden çok yazma modunu desteklemesi gerekmeyen projeler için bu aşırıya kaçabilir. Ancak herhangi bir küresel uygulama, tasarım sistemi veya tema için bu, sağlam ve geleceğe dönük bir stratejidir.

Gelecek Mantıksal: Seviye 2'nin Ötesi

Fiziksel bir zihniyetten mantıksal bir zihniyete geçiş, modern CSS'deki en önemli değişimlerden biridir. Stil dilimizi çeşitli, küresel bir web'in gerçekliğiyle uyumlu hale getirir. Bizi kırılgan, ekran odaklı hilelerden uzaklaştırıp esnek, içerik odaklı tasarıma doğru yönlendirir.

Hala boşluklar var mı? Birkaç tane. background-position veya gradyanlar gibi özellikler için mantıksal değerler hala tartışılıyor. Ancak Seviye 2'nin yayınlanmasıyla, günlük düzen ve stil görevlerinin büyük çoğunluğu artık tamamen mantıksal bir yaklaşımla gerçekleştirilebilir.

Geliştiricilere yönelik eylem çağrısı açıktır: varsayılan olarak mantıksal özellikleri kullanmaya başlayın. width yerine inline-size'ı tercih edin. Sol ve sağ kenar boşluklarını ayrı ayrı ayarlamak yerine margin-inline kullanın. Bu sadece farklı dilleri desteklemekle ilgili değil; daha iyi, daha esnek CSS yazmakla ilgilidir. Mantıksal özelliklerle oluşturulmuş bir bileşen, ister LTR, ister RTL, isterse dikey bir düzende kullanılsın, doğası gereği daha yeniden kullanılabilir ve uyarlanabilirdir. Bu basitçe daha iyi mühendisliktir.

Sonuç: Akışı Benimseyin

CSS Mantıksal Özellikler Seviye 2, sadece yeni özellikler koleksiyonu değil; bir vizyonun tamamlanmasıdır. İçeriğin doğal akışına, bu akış ne olursa olsun saygı duyan düzenler oluşturmak için gereken son, kritik parçaları sağlar. float: inline-start ve border-start-start-radius gibi özellikleri benimseyerek, zanaatımızı sadece ekranda kutuları konumlandırmaktan, gerçekten küresel, kapsayıcı ve geleceğe dönük web deneyimleri tasarlamaya yükseltiriz.

Bir sonraki projenize başladığınızda veya yeni bir bileşen oluşturduğunuzda, margin-left yazmadan önce duraklayın. Kendinize sorun, "Solu mu kastediyorum, yoksa başlangıcı mı?" Bu küçük zihinsel kaymayı yaparak, her yerde, herkes için daha uyarlanabilir ve erişilebilir bir web'e katkıda bulunmuş olacaksınız.