CSS Podcast'i - 012: Mantıksal Özellikler 'nı inceleyin.
Gerçekten yaygın bir kullanıcı arayüzü modeli, destekleyici bir satır içi simgesi içeren bir metin etiketidir.
Simge metnin solunda bulunur ve ikisi arasında küçük bir boşluk
margin-right tarafından sağlanır.
Ama bir sorun var.
çünkü bu yalnızca metin yönü soldan sağa olduğunda çalışır.
Metin yönü, Arapça gibi dillerin okunduğu şekilde sağdan sola olarak değiştiyse simge metnin yanında durur.
CSS'de bunu nasıl hesaba katıyorsunuz? Mantıksal özellikler bu durumları çözmenize olanak sağlar. Diğer birçok avantajının yanı sıra, uluslararasılaştırma için ücretsiz, otomatik destek sağlarlar. Daha dayanıklı ve kapsayıcı bir kullanıcı arabirimi oluşturmanıza yardımcı olur.
Terminoloji
Üst, sağ, alt ve sol öğelerinin 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 bir kutunun kenarlarına da (içerik akışı) göre hareket ettik. Bu nedenle, metin yönü veya yazma modu değişirse bu değişkenler de değişebilir. Bu, yön stillerinden büyük bir değişim ve ve arayüzlerimizin stilini belirlerken bize 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 gideceği yerdir. İngilizce bir belgede 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 cümle içinde nasıl aktığını gösterir.
İngilizce bir dokümanda satır içi akış soldan sağadır.
Web sayfanızın belge dilini Arapça olarak (<html lang="ar">) değiştirirseniz
satır içi akış sağdan sola olacaktır.
Metin, belgenin yazma moduna göre belirlenen yönde akar.
writing-mode özelliğinde metnin gösterildiği yönü değiştirebilirsiniz.
Bu, tüm belgeye veya ayrı ayrı öğelere uygulanabilir.
Akışa bağlı
Geçmişte CSS'de
kenar boşluğuna göre kenar boşluğu gibi özellikleri uygulayabildik.
Örneğin, margin-top, öğenin fiziksel üst kısmına uygulanır.
Mantıksal özelliklerle margin-top, margin-block-start haline gelir.
Yani, dil ve metnin yönü ne olursa olsun
engelleme akışı uygun kenar boşluğu kurallarına sahip olmalıdır.
Boyutlandırma
Bir öğenin belirli bir genişliği veya yüksekliği aşmasını önlemek için şuna benzer bir kural yaz:
.my-element {
max-width: 150px;
max-height: 100px;
}
Akışa bağlı eşdeğerleri, max-inline-size ve max-block-size'dır.
min-height ve min-width yerine min-block-size ve min-inline-size özelliklerini 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ön tarifleri kullanmak yerine, ve bitişi olsun. Bu size blok başlangıç, satır içi bitiş, blok bitiş ve satır içi başlangıç özelliklerini sunar. Bunlar, yazma modundaki değişikliklere yanıt veren CSS özellikleri 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ğla
uyumlu değilse
okuma yönünün başlangıcı yerine
faydalı olmaz.
Mantıksal değerlerle, metin yönüyle eşleşen daha yararlı start ve end değerleri de elde edersiniz.
Metin hizalama kuralı artık şu şekilde görünür:
p {
text-align: end;
}
Boşluklar ve konumlandırma
margin, padding ve inset için mantıksal özellikler
ve bu öğelerin yazma modlarında birbiriyle nasıl etkileşime girdiğini daha kolay ve verimli hâle getiriyor.
Kenar boşluğu ve dolguyla ilgili özellikler hâlâ yol tariflerine doğrudan eşlemedir,
Ancak aradaki temel fark, yazma modu değiştiğinde
bunun da değişmesidir.
.my-element {
padding-top: 2em;
padding-bottom: 2em;
margin-left: 2em;
position: relative;
top: 0.2em;
}
Bu, padding ile dikey bir alan ekler ve margin ile soldan dışarı iter.
top özelliği de aşağı kaydırır.
Mantıksal özellik eşdeğerleriyle aşağıdaki gibi 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çinde padding ile satır içi bir alan ekler ve bunu margin ile satır içi başlangıçtan dışarı iter.
inset-block özelliği, bloğu blok başlangıcından içeri doğru taşır.
inset-block özelliği, mantıksal özelliklere sahip tek kısa seçenek değildir.
Bu kural daha da daraltılabilir.
kenar ve dolgu özelliklerinin stenolarını kullanarak yapabilirsiniz.
.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 eklemek de yapılabilir.
Sağa ve alta kenarlık eklemek için sağ yarıçapla birlikte aşağıdaki gibi 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 de 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çtur.
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 mülk eşdeğeri: vw.
vb birimi, blok yönünde görüntü alanının% 1'idir.
Mantıksal olmayan mülk eşdeğeri: vh.
Bu birimler her zaman okuma yönüyle eşleşir.
Örneğin, bir öğenin bir görüntü alanının kullanılabilir 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 olacak şekilde değiştirilir.
Mantıksal özellikleri pragmatik olarak kullanma
Mantıksal özellikler ve yazma modları yalnızca uluslararasılaştırmaya yönelik değildir. Bunları, daha çok yönlü bir kullanıcı arayüzü üretmek için kullanabilirsiniz.
X ekseninde ve Y ekseninde etiketler olan bir grafiğiniz varsa Y etiketindeki metnin dikey olarak okunmasını isteyebilirsiniz.
Demodaki Y ekseni etiketinde writing-mode değeri vertical-rl olduğu için
her iki etikette de aynı margin değerlerini kullanabilirsiniz.
margin-block-start değeri her iki etiket için de geçerlidir
çünkü blok başlangıcı Y ekseni için sağda ve X ekseni için üsttedir.
Blok başlangıç kenarlarını görebilmeniz için kırmızı bir kenarlık vardır.
Simge sorununu çözme
Mantıksal özelliklere değindiğimize göre, bu bilgi, başladığımız tasarım problemine 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 ile metin arasındaki boşluğun tüm okuma yönlerini desteklemesi için
bunun yerine margin-inline-end özelliğinin kullanılması gerekiyor.
p {
display: inline-flex;
align-items: center;
}
p svg {
width: 1.2em;
height: 1.2em;
margin-inline-end: 0.5em;
flex: none;
}
Okuma yönünden bağımsız olarak yerleşir.
Öğrendiklerinizi sınayın
Mantıksal özellikler bilginizi test etme
Siz elinizle yazarken bileğiniz hangi mantıksal eksende hareket ediyor?
inlineblockMantıksal özelliklerden yararlanabilecek olanların tümünü işaretleyin
flex-start, block-end ve inline-startblock-start ve inline.inline-size ve max-block-size.border-end-end-radius.Bir kelimenin hangi mantıksal tarafının altı çizilir?