CSS3’ün de hayatımıza girmesiyle CSS uzunluk veya ölçü birimlerini ne zaman, nerede kullanmak gerektiğini karıştırır duruma geldik. Bir sayfa üzerinde öyle çok birim kullabilir ki, bizi sınırlandıran sadece tasarım olsa gerek.

Aşağıda ne zaman, hangi CSS uzunluk/ölçü birimini kullanacağınızı açıklamaya çalışacağım:

Pixels (px)

Kullanabileceğiniz alanlar; border, sabit genişlikteki tasarımlarda hemen hemen çoğu yazı elementinde, gölgelerde, responsive tasarım yaparken @media içerisinde … diye bir çok noktaya örnek verebiliriz.

Kullanmamanızı gereken alanlar; typography diyebiliriz. Eğer ki CSS reset kullanıyorsanız, orada base font-size’ı belirlerken kullanılabilir.

Percentage (%)

Kullanabileceğiniz alanlar; responsive development yaptığınızda imaj veya konteynırınızda diye örnek verebiliriz.

Kullanmamanızı gereken alanlar; typography diyebiliriz. Eğer ki CSS reset kullanıyorsanız, orada base font-size’ı belirlerken kullanılabilir.

em, ex

Kullanabileceğiniz alanlar; typography, typography ile ilgili element pozisyonlarında ( mesela padding, margin gibi değerler ) veya büyük yapılı bir site yapımı sırasında sistem komplexleşirse em ve ex arasındaki ince çizginin de ayrıca bilinmesi gerekir ki bun bir başka yazıda ele almak çok daha doğru olur.

Points ve Picas

Kullanabileceğiniz alanlar; yazıcı çıktısı almak istediğiniz zamaman oluşturduğunuz CSS’lerde.

Kullanmamanızı gereken alanlar; her yer.

rem

Kullanabileceğiniz alanlar; em ve ex’e göre biraz daha sağlam gerçi ama aynı alanlarda kullanılıyorlar. @media yazımı sırasında kullanabilirsiniz.

Kullanmamanızı gereken alanlar; eğer ki IE8 ve daha önce versiyonları da destekliyorsanız kullanmamanız gerekmekte veya CSS fixleri ile bu durumun üzerinden gelebilirsiniz. 

Viewport (vh & vw)

Kullanabileceğiniz alanlar; responsive typography, bu iş için biçilmiş bir kaftan diyebiliriz. Dikkat etmeniz noktalardan birisi de her responsive genişlik için davrandığı durumu gözlemlemek gerekebilir.

Kullanmamanızı gereken alanlar; her ne kadar bu iş için biçilmiş kaftan desem de, çok yeni olduğundan IE8 ve daha önce versiyonlarda sıkıntılı olabilir veya CSS fixleri ile bu durumun üzerinden gelebilirsiniz.

Inches (in) ve Centimeters (cm)

Kullanabileceğiniz alanlar; yazıcı çıktısı almak istediğiniz alanların CSS değerlerinde. Özellikle de sayfa margin’lerinde kullanılabilir.

Kullanmamanızı gereken alanlar; başka yerde kullanmayınız.

Character (ch)

Kullanabileceğiniz alanlar; aslında pek kullanmadım. İnternetten araştırdığıma göre “monospaced font” kullanımı diyor . Browser desteğine de dikkat etmek gerekir.

Grid (gd)

Kullanabileceğiniz alanlar; deneysel arayüzler olmakla birlikte şu an sadece IE 10 ve üzeri desteği mevcut. 

Yukarıda saydığım birimlere ekleme veya çıkarmalarda bulunabilir, sizler de fikirlenizi belirtebilirsiniz.