Merhaba arkadaşlar bugün CSS3 property'lerinden olan block-size property'sine değineceğim.
Giriş yapmadan önce block direction terimini anlamamız gerekiyor.
Metin içeriği olan her HTML elementinin yazım yönü vardır. Yazım yönü İngilizce gibi dillerde yukarıdan aşağıya ve sağdan sola şeklinde oluşturulur. Aslında bu bizim gündelik hayatta kağıda yazı yazarken kullandığımız pattern'dir de. Bir paragrafı soldan sağa ve yukarıdan aşağıya doğru yazarız. Yukarıdan aşağıya ifadesi burada block direction terimini ifade eder. Yeri gelmişken soldan sağa ise inline direction terimini ifade eder.
block direction terimini açıkladıktan sonra artık block-size property'sinin ne işe yaradığına değinebiliriz.
Bir HTML elementinin block direction'daki boyutunu block-size property'si ile belirleyebiliriz. Bir element için block-size property'sini kullandığımızda boyutu yukarından aşağı doğru olacaktır yani elementin yüksekliğine etki edecektir.
"Elementin boyutunu height property'si ile değiştiriyorduk. block-size property'sininin height property'sinden farkı ne?" şeklinde aklınıza bir soru gelebilir.
➖ block-size ile height Arasındaki Fark
block-size property'si writing-mode property'sinin kullanımına bağlı olarak farklı etki gösterir arkadaşlar. block-size property'si normalde elementin yüksekliğine etki ederken writing-mode:vertical-tb şeklinde yapılan bir deklarasyonda block-size property'si elementin genişliğine etki eder.
Aklınıza writing-mode property'sinin ne işe yaradığına dair soru gelebilir. Kısaca buna da değinelim.
writing-mode property ile bir elementin yazım yönünü ayarlarız. Varsayılan olarak değeri horizontal-tb'dir.Yani varsayılan durumda bir elementin içeriği yatay eksende ve yukarıdan aşağı şeklinde oluşturulur. Söz gelimi writing-mode property'sinin değeri vertical-tb olduğunda elementin içeriği dikey eksende yukarıdan aşağı şeklinde oluşturulur. Örneğin İngilizce ve Çince içerikli bir sitemiz var. Çince'yi seçtiğimizde metin içerikli ögelerin dikey eksende oluşturulması gerekir. Bu durumda writing-mode property'sini kullanabiliriz.
Aşağıdaki imajlarda writing-mode property'sinin kullanım durumuna block-size property'sinin ne şekilde etkilendiğini görebiliriz.
writing-mode:horizontal-tb
writing-mode:vertical-lr
💡 Peki bu property'i nerede kullanabiliriz şeklinde bir soru aklınıza gelebilir arkadaşlar. block-size property'yi genişliği veya yüksekliği yazım yönüne bağlı olmasını istediğimiz elementler için kullanabiliriz diye düşünüyorum.
width veya height property'lerini kullanmamız durumunda block-size property'si geçersiz hale gelir.
block-size property karakteristik özelliklerini incelersek:
| Özellik | Açıklama |
|---|---|
| Varsayılan değer: | auto |
| Inherit özeiiği: | Hayır, parent elementten property değerleri miras alınamaz. |
| CSS animasyon özelliği: | Evet, CSS animasyon property'lerini destekler. |
| CSS versiyonu: | CSS3 |
| JavaScript syntax: | object.style.blockSize="100px" |
🖱️ Örnek çalışmaya linke tıklayarak ulaşabilirsiniz arkadaşlar.
Umarım faydası olmuştur.
Top comments (0)