CSS Uzunluk/Ölçü Birimlerini Ne Zaman Kullanmak Gerekir ?

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.

4 thoughts on “CSS Uzunluk/Ölçü Birimlerini Ne Zaman Kullanmak Gerekir ?”

  1. Yazı için teşekkürler yalnız yapıcı bir eleştiri olarak almanızı rica ederek, cümlelerin çoğunun havada kaldığını belirtmek isterim.

    Açıkçasını söylemek gerekirse ben CSS’i yeni öğrenen biri olsam şu soruları sorarım.

    @media yazımı sırasında kullanabilirsiniz ne demek ?
    Eğer ki CSS reset kullanıyorsanız, orada base font-size’ı belirlerken kullanılabilir ne demek ?
    Kullanabileceğiniz alanlar; responsive typography, bu iş için biçilmiş bir kaftan diyebiliriz, o da ne ?

    1. Öncelikle teşekkür ederim, ben de tekrar okuduğumda söylediklerinize katıldım. Aslında bu yazıyı hatta bütün yazıları yazarkenki çıkış noktam, çalışırken karşılaştığım herhangi bir sorun ile fitillenmiş olmaları. O nedenle de temelden değil de kendimi veya orta seviyeli kişilerin anlayabileceği dili referans alarak yazdığımı farkettim.

      Sonraki yazılarımda söylediklerinize daha çok dikkat edeceğim. Gerekirse linklemeler yaparak terimlerin havada kalmamasına özen göstereceğim. Zaman buldukça da bu yazımı daha anlaşılır hale getireceğim.

      1. Dikkate aldığın için teşekkür ederim, şahsım adına diğer yazılarını da bekliyor olacağım.

        İyi çalışmalar.

Leave a Reply

Your email address will not be published. Required fields are marked *