DEV Community

Cover image for CSS block-size Property Kullanımı
Emin Altan
Emin Altan

Posted on

1

CSS block-size Property Kullanımı

CSS block-size Property

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.

horizontal mode

writing-mode:horizontal-tb

vertical mode

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay