CSS Podcast'i - 012: Mantıksal Özellikler
Gerçekten yaygın bir kullanıcı arayüzü kalıbı, destekleyici bir satır içi simgeye sahip metin etiketidir.
Simge, simge üzerinde margin-right tarafından sağlanan simgenin sol tarafında bulunur ve ikisi arasında küçük bir boşluk bırakır.
Ama bir sorun var, çünkü
bu yalnızca metin yönü soldan sağa doğru yapıldığında işe yarayacaktır.
Metin yönü sağdan sola olarak değiştiyse (Arapça gibi dillerin okuduğu dillerdir) simge metnin yanında durur.
Bunu CSS'de nasıl hesaba katarsınız? Mantıksal özellikler bu durumları çözmenizi sağlar. Diğer avantajlarının yanı sıra, uluslararasılaştırma için ücretsiz, otomatik destek sağlarlar. Daha dayanıklı, kapsayıcı bir kullanıcı arabirimi oluşturmanıza yardımcı olurlar.
Terminoloji
Üst, sağ, alt ve sol fiziksel özellikleri, görüntü alanının fiziksel boyutlarını ifade eder. Bunları haritadaki bir pusula gülü gibi düşünebilirsiniz. Diğer yandan, mantıksal özellikler içerik akışıyla ilgili olduğundan bir kutunun kenarlarını ifade eder. Bu nedenle, metin yönü veya yazma modu değiştiğinde de değişebilir. Bu, yönlü stillerden büyük bir geçiş ve arayüzlerimizin stilini belirlerken bize çok daha fazla esneklik sağlıyor.
Akışı engelle
Blok akışı, içerik bloklarının yerleştirildiği yöndür. Örneğin, iki paragraf varsa blok akışı, ikinci paragrafın ekleneceği yerdir. İngilizce dokümanlarda blok akışı yukarıdan aşağıya doğrudur. Bunu, yukarıdan aşağıya doğru birbirini izleyen metin paragrafları bağlamında düşünün.
Satır içi akış
Satır içi akış, metnin bir cümle içinde nasıl aktığını ifade eder.
İngilizce bir dokümanda satır içi akış soldan sağa doğrudur.
Web sayfanızın doküman dilini Arapça (<html lang="ar">) olarak değiştirirseniz satır içi akış sağdan sola olur.
Metin, dokümanın yazma modu tarafından belirlenen yönde akıyor.
writing-mode özelliği ile metnin yerleştirildiği yönü değiştirebilirsiniz.
Bu, dokümanın tamamına veya tek tek öğelere uygulanabilir.
Akış göreli
Geçmişte CSS'de, kenarlarının yönüne göre marj gibi özellikleri yalnızca uygulayabiliyorduk.
Örneğin, öğenin fiziksel üst kısmına margin-top uygulanır.
margin-top, mantıksal özelliklerle margin-block-start haline gelir.
Bu, dil ve metin yönünden bağımsız olarak engelleme akışının uygun kenar boşluğu kurallarına sahip olduğu anlamına gelir.
Boyutlandırma
Bir öğenin belirli bir genişliği veya yüksekliği aşmasını önlemek için şöyle bir kural yazın:
.my-element {
max-width: 150px;
max-height: 100px;
}
Akışa bağlı eşdeğerleri max-inline-size ve max-block-size'dir.
min-height ve min-width yerine min-block-size ve min-inline-size de kullanabilirsiniz.
Mantıksal özelliklerle, maksimum genişlik ve yükseklik kuralı şöyle görünür:
.my-element {
max-inline-size: 150px;
max-block-size: 100px;
}
Başlangıç ve bitiş
Üst, sağ, alt ve sol gibi yönler yerine başlangıç ve bitiş yerlerini kullanın. Bu size blok başlangıç, satır içi bitiş, blok sonu ve satır içi başlangıç sağlar. Bunlar, yazma modu değişikliklerine yanıt veren CSS özelliklerini uygulamanıza olanak tanır.
Örneğin, metni sağa hizalamak için şu CSS'yi kullanabilirsiniz:
p {
text-align: right;
}
Amacınız fiziksel sağ tarafa hizalanmak yerine okuma yönünün başlangıcına ulaşmaksa bu faydalı olmaz.
Mantıksal değerler sayesinde, metnin yönüyle eşleşen daha faydalı start ve end değerleri vardır.
Metin hizalama kuralı artık şu şekilde görünür:
p {
text-align: end;
}
Boşluk bırakma ve konumlandırma
margin, padding ve inset için mantıksal özellikler, konumlandırma öğelerini ve bu öğelerin, yazma modlarında birbirleriyle nasıl etkileşim kurduğunu belirlemeyi daha kolay ve verimli hale getirir.
Kenar boşluğu ve dolgu ile ilgili özellikler hâlâ yönlere doğrudan eşlemelerdir ancak temel fark, yazma modu değiştiğinde bu modla birlikte de değişmesidir.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Bu işlem, padding ile alanın içine bir miktar dikey ekler ve margin ile soldan dışa iter.
top özelliği de aşağı kaydırır.
Mantıksal özellik eşdeğerleriyle birlikte, durum şöyle görünür:
.my-element {
padding-block-start: 2em;
padding-block-end: 2em;
margin-inline-start: 2em;
position: relative;
inset-block-start: 0.2em;
}
Bu işlem, padding ile boşluk içine bir miktar satır içi ekler ve margin ile birlikte satır içi başlangıcından dışarı iter.
inset-block özelliği, öğeyi blok başlangıcından içe taşır.
inset-block özelliği, mantıksal özellikler içeren tek kısaltma seçeneği değildir.
Bu kural, kenar boşluğu ve dolgu özelliklerinin kestirme versiyonları kullanılarak daha da daraltılabilir.
.my-element {
padding-block: 2em;
margin-inline: 2em 0;
position: relative;
inset-block: 0.2em 0;
}
Kenarlıklar
Mantıksal özelliklerle border ve border-radius eklenebilir.
Sağ alta ve sağa doğru yarıçapı olan bir kenarlık eklemek için şöyle bir kural yazabilirsiniz:
.my-element {
border-bottom: 1px solid red;
border-right: 1px solid red;
border-bottom-right-radius: 1em;
}
Alternatif olarak, aşağıdaki gibi mantıksal özellikleri kullanabilirsiniz:
.my-element {
border-block-end: 1px solid red;
border-inline-end: 1px solid red;
border-end-end-radius: 1em;
}
border-end-end-radius içindeki end-end, blok sonu ve satır içi uçudur.
Birimler
Mantıksal özellikler iki yeni birim getirir: vi ve vb.
vi birimi, satır içi yöndeki görüntü alanı boyutunun% 1'idir.
Mantıksal olmayan özellik eşdeğeri: vw.
vb birimi, blok yönündeki görüntü alanının% 1'idir.
Mantıksal olmayan özellik eşdeğeri: vh.
Bu birimler her zaman okuma yönüyle eşleşir.
Örneğin, bir öğenin bir görüntü alanındaki mevcut satır içi alanının% 80'ini kaplamasını istiyorsanız, yazma modu dikeyse vi birimini kullandığınızda bu boyut otomatik olarak yukarıdan aşağıya ayarlanır.
Mantıksal özellikleri pragmatik olarak kullanma
Mantıksal özellikler ve yazma modları yalnızca uluslararasılaştırma için değildir. Bunları kullanarak daha çok yönlü bir kullanıcı arayüzü oluşturabilirsiniz.
X ekseninde ve Y ekseninde etiketleri olan bir grafiğiniz varsa Y etiketindeki metnin dikey olarak okunmasını isteyebilirsiniz.
Demodaki Y ekseni etiketinde vertical-rl writing-mode olduğu için her iki etikette de aynı margin değerlerini kullanabilirsiniz.
Engelleme başlangıcı Y ekseninin sağında ve X ekseni için en üstte olduğundan margin-block-start değeri her iki etiket için de geçerlidir.
Blok-başlangıç kenarlarında görülebilen kırmızı bir kenarlık vardır.
Simge sorununu çözme
Mantıksal özellikleri işlediğimize göre bu bilgiler başladığımız tasarım problemine de uygulanabilir.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
flex: none;
}
Kenar boşluğu, simge öğesinin sağına uygulandı.
Simge ve metin arasındaki boşluğun tüm okuma yönünü desteklemesi için bunun yerine margin-inline-end özelliğinin kullanılması gerekir.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Artık okuma yönünden bağımsız olarak simge kendini ve alanı uygun şekilde konumlandıracaktır.
Öğrendiklerinizi sınayın
Mantıksal özellikler hakkındaki bilginizi test etme
Elinizle yazarken bileğiniz hangi mantıksal eksende hareket ediyor?
inlineblockMantıksal özelliklerden yararlanabilecek tüm seçenekleri işaretleyin
flex-start, block-end ve inline-startblock-start ve inline.inline-size ve max-block-size.border-end-end-radius.Bir kelimenin mantıksal yönünün altı çizilir?