CSS Mantıksal Özellikler

Ömer Gülçiçek
Mar 28 · 3 min read

Web site geliştirirken varsayılan olarak yazı dilimiz soldan sağa (Left to Right — LTR) kullanıyoruz. Arapça gibi sağdan sola doğru okuma yönü olan diller için site geliştiriyorsak, <html> etiketinize dir özelliği ekleyerek yazı dilinin sağdan sola olacağını belirtmelisiniz (<html dir="rtl">).

CSS mantıklar özelliklerin temel fikri, CSS özelliklerinde fiziksel yönleri kullanmayacak olmamızdır. Bunun yerine HTML belgesinin yazım yönüne bağlı olan özellikleri kullanacağız. Bu özelliklere mantıksal özellik deniyor ve tarayıcı desteği oldukça iyi (tarayıcıların CSS Logical Properties desteği).

Mantıksal Özellikler Olmadan Önce

.avatar {
margin-right: 16px;
}
html[dir="rtl"] .avatar {
margin-right: 0;
margin-left: 16px;
}

Görüldüğü gibi çok dilli bir sitede sadece avatar ile yazı arasına boşluk verebilmek için bile çok kod yazmak zorunda kaldık. Bunu tüm projede her yere uyguladığınızı düşünün… İşte CSS’in mantıktal özellikleri burada yardımımıza koşuyor. Aynı işi margin-inline-end ile tek satırda yapabiliriz.

.avatar {
margin-inline-end: 16px;
}

Bu kod, HTML belgesinin yönüne bağlı olarak farklı şekilde çalışacaktır.

Inline — Block — Start — End

Türkçe, İngilizce, Arapça gibi diller yatay boyuttur; yani soldan sağa yada sağdan sola yazılırlar. Fakat Japonca ise yukarıdan aşağı yazılır, yani dikey boyuttur. inline yazının okunma yönünü belirtir.

start ve end ise okunma yönüne göre yazının başını yada sonunu belirtir.

Örnek olarak aşağıdaki görselde avatar ile yazının arasına aralık vermek istediğimizde margin-inline-end kodu işimizi görecektir. Türkçe, İngilizce gibi dillerde yazı soldan sağa okunduğu için end kodu sağdan manasına gelecektir ve avatarın sağına boşluk verecektir; yani inline-end burada margin-right işlevi görecektir. Arapça gibi okuma yönünün sağdan sola olduğu dillerde ise end kodu soldan manasına gelecektir ve avatarın soluna boşluk verecektir; yani inline-end burada margin-left işlevi görecektir.

Mantıksal Olarak Hangi Özellikleri Kullanabiliriz?

Örnek olması açısından mantıksal özelliklerin olmadığı ve olduğu iki kodu inceleyelim.

.card {
padding-left: 2.5rem;
padding-right: 1rem;
border-left: 6px solid blue;
}
.card__icon {
margin-right: 1rem;
}
html[dir="rtl"] .card {
//Yazı dili sağdan sola ise bu kodlar çalışacak
padding-right: 2.5rem;
padding-left: 1rem;
//Önceki kodu sıfırlamamız gerekiyor
border-left: 0;
border-right: 6px solid blue;
}
html[dir="rtl"] .card__icon {
margin-right: 1rem;
}

Aynı kodu CSS mantıksal özellikleri ile şu şekilde yapabilirdik;

  • html[dir="rtl"] kontrolü yok
  • Önceki kodu sıfırlamak yok
  • Fazladan CSS satırları yok…
.card {
padding-inline-start: 2.5rem;
padding-inline-end: 1rem;
border-inline-start: 6px solid blue;
}
.card__icon {
margin-inline-end: 1rem;
}

Metin Hizalama

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹

Kodcular

Bu yayın yazılım üzerine üretilen blogların bir araya…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store