“px”, bir geliştirici ve tasarımcı için hayatın anlamı. Bir arayüzü iskeletten alıp ete kemiğe büründüren CSS’te neredeyse bütün ölçüleri piksellerle yapıyoruz. Peki, piksel kullanmanın yetersiz kaldığı durumlarda ne yapacağız? Tarayıcılardaki hızlı değişim ve gelişimle birlikte artık CSS’in çok daha fazla özelliğini rahatlıkla kullanabiliyoruz. Bu yazımızda, sizin için CSS yazarken kullanabileceğiniz birimlerden, bu birimlerin kullanım şekillerinden ve yerlerinden bahsedeceğiz.
“Em” ve “rem” kullanımı
“Em” ölçü birimi, bir sayfada body’ye tanımlanmış olan varsayılan font boyutunu referans alarak ölçü vermenizi sağlayan birimdir. Örneğin, aşağıdaki örnekte h1 elementinin font boyutu aslında 28.8px değerini alır. Çünkü, bu şekilde body’ye tanımlanmış font 16 px olduğunda, H1’e ise bunun 1.8 katı tanımlanmış olur. Bu şekilde, bir CSS yapısı oluşturduğunuzda sadece body’nin font size’ını değiştirdiğinizde sayfanızdaki bütün fontları da aynı oranda değiştirmiş olursunuz.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
İç içe divlerde, body’ye tanımlanan font boyutuna değil de, onu kapsayan div’e tanımlanan font boyutunu kullanabilirsiniz. Bunun için em yerine rem kullanmalısınız. Rem değeri body’nin değil kendi üst divinin değerini alıp, orantıyı bu değere göre kurmanızı sağlar.
Rem ve em sadece font boyutlarının düzenlenmesinde kullanılmaz. Elementlere ait bütün diğer ölçülerin belirlenmesinde de kullanılabilir.
“vh” ve “vw” kullanımı
Responsive web geliştirmede yüzdelikli yapılar sıklıkla kullanılır. Bu, ekran çözünürlüklerine uyumluluğun sağlanmasında kolaylık sağlar. Her ne kadar % değer vermek bir çok açıdan işimizi kolaylaştırsa da, bazı problemlere sebep olabilir. Örneğin, bir elemente verdiğiniz yüzde değer, bir üst elementin genişliğine göre belirlenir. Bu gibi durumlarda vh ve vw birimlerinin kullanımı size yardımcı olabilir.
Vh (viewport height): Viewport yanı ekran yüksekliğinin % 1’ini ifade eden birim 1vh‘dir. Örneğin, browser yüksekliği, 750px ise 1vh değeri 7.5px’e eşittir.
Vw (viewport width): Benzer bir şekilde viewport genişliğinin % 1’ini ifade eden birim 1vw‘dir. Eğer viewport genişliği 1600px ise, o zaman 1 vw değeri 16px’e eşit olur.
“vmin” ve “vmax” kullanımı
Vmin ve vmax, vh ve vw gibi viewport ölçülerine göre çalışır. Diğerlerinden farklılığı ise boyutları sınırlandırmanız sağlar. Örneğin, vh’li bir fonta değer atadığınızda, bu o fontun yüzde olarak her türlü küçültme ve büyültme hareketlerine duyarlı halde fontun büyüyüp küçülmesini sağlar. Eğer vmin veya vmax değeri verirseniz, o durumda bu büyüme ve küçülme hareketini sınırlandırmış olursunuz.
Aşağıdaki videoda bu değerler arasındaki farklılıkları görebilirsiniz.
Bu birimler em ve rem’ye benzer şekilde, geçerli font ailesine ve font boyutuna göre çalışır. Ancak, em ve rem’den farklı olarak, fontların spesifik ölçüleri göre çalışır.
Ch biriminin açılımı “Character Unit” tir. Özel olarak 0 karakterinin genişliğine göre değer belirler. Örneğin, 1 div’in genişliğini 10ch olarak belirledğinizde, 10 sıfır genişliğinde olduğunu gösterir.
ex değeri, fontun x-height değerini alır. X-height değeri bir font ailesindeki küçük x karakterinin yüksekliğidir. “ex” değeri çok sık kullanılan bir ölçü birimi değildir. Ama alt ve üst karakterin (<sub> ve <sup>) pozisyonunun belirlenmesinde kullanılırlar.
Burada sizin için, CSS’te işlevsel olabilecek ölçü birimlerinden kısaca bahsetmeye çalıştım. Ölçü birimleriyle beraber birçok özelliğin aslında nerelerde kullanılabileceğiyle ilgili daha fazla bilgi sahibi olduğunuzda, bu CSS’i daha hakim bir şekilde kullanabilmenizi sağlayacaktır. CSS çoğunlukla bilinen bir kaç özellik etrafında dolaşılarak kullanılıyor. Ancak, bu gibi özellikleri keşfettiğinizde ve yeni çıkan özellikleri de takip ettiğinizde, çok daha iyi bir şekilde kullanabiliyorsunuz. Artık tarayıcılar bu gibi güncellemelerin desteklenmesi konusunda daha hızlı hareket edebiliyorlar. Tasarımcılar için de, bu tip özellikler aslında çok anlaşılmaz kodlar değil. Aksine, bu özellikleri bildiğinizde hazırladığınız tasarımın daha iyi bir şekilde arayüze aktarılmasını da sağlayabilirsiniz.
