CSS mantıksal tanımları Arapça, Çince, İbranice vb. diller için kodlama yaparken büyük avantaj sağlıyor. Bu konuda Ahmad Shadeed’in güzel biz yazısı (Digging Into CSS Logical Properties) var. Detayları bu yazıdan öğrenebilirsiniz.

Burada size bu özellikleri farklı bir amaç için kullanımını anlatacağım. Genelde dikeyde veya yatayda bir tanım yapacaksak özelliklerin dörtlü kısaltmalarını kullanırız. Sadece yatay veya sadece dikey tanımlama yapamıyorduk. İşte burada yardımımıza koşuyor mantıksal tanımlar. Örneğin klasik ortalama yöntemi margin: 0 auto aslında amaç sadece yatayda auto tanımı yapmak ama bunu yapamıyorduk.

.kapsul {
    width: 800px;
    margin: 0 auto;
}

Evet şimdi bu kodu sadece şöyle yazabiliyoruz.

.kapsul {
    width: 800px;
    margin-inline: auto;
}

Süper değil mi?

Benzer şekilde padding, margin, border tanımlarında aynı şeyi yapabiliyoruz.

Örneğin bir elemanın sadece dikey kenarlarına kenarlık tanımlamak için

.liste-ogesi {
    border-top: 1px solid blue;
    border-bottom: 1px solid blue;
}

gibi iki tanım yazmamız gerekirken

.liste-ogesi {
    border-block: 1px solid blue;
}

şeklinde bu işi tek satırda yapabiliyoruz.

Dikey için block yatay için ìnline eklemesi yeterli.

CSS aspect-ratio tanımı

CSS aspect-ratio tanımı Devamını oku

progress elementini stillendirelim

30 December 2022 tarihinde yayınlandı.

Metinlerin altındaki çizgileri stillendirelim

05 December 2022 tarihinde yayınlandı.