Tasarım Kodlama

CSS Units – CSS Ölçü Birimleri

CSS ölçü birimlerinin bu çeşitliliği içinde hangi ölçüyü nerede kullanacağınız gerçekten zor bir durum. CSS kavramına aşina olmayan biri için px kullanmak en iyi çözüm gibi görünmesine rağmen, bunu yapmak tasarımlarınızı ciddi şekilde sınırlayacaktır.

Aşağıda yazacaklarım mutlak birer kural değildir. Ancak CSS öğrenme yolunda ciddi ölçüde sizlere katkı saylayacaktır. Bu eğitici makaleyi okuduktan ve örnekleri uyguladıktan sonra olumlu, olumsuz tüm görüşlerinizi yada farklı çözümlerinizi aşağıya yorum olarak bırakmayı unutmayın.

Her bir üniteyi gözden geçirerek başlayalım ve özellikle nerede işe yaradığını açıklayalım.

Pixel

Nerede Kullanılır: Pikseller, CSS’deki her şey için temel yapı taşıdır. Garip bir şekilde, pikseller çoğu zaman tercih edilen birim olmamalıdır. Genellikle sabit genişlikteki tasarımlarda, kenarlıklarda, gölgelerde kullanılır. @media etiketlerinin kırılma noktalarında kullanılmasına rağmen em yada rem tercih etmeniz önerilir.

Nerede Kullanılmaz: Font büyüklüklerinde kullanmayın.(CSS Reset işlemi hariç…)

Örnek: Aşağıdaki örneğe bir göz atın. Bu, içinde 14 piksel yazı tipi boyutunda bir paragraf bulunan kırmızı bir arka plana sahip bir blok oluşturacaktır. Bloğun genişliği 300px ve iç boşluğu 25px olarak ayarlanacaktır. Div’i biraz daha küçültmek istiyorsanız, örneğin genişliği 250 piksel olarak değiştirmeniz yeterlidir. Yazı tipi boyutunu biraz daha büyük mü istiyorsunuz? Sorun değil, sadece yazı tipi boyutunu 16 piksel olarak değiştirin.

Not: box-sizing kutunun kenarlık ve boşlukları dahil toplam 300px olmasını sağlamaktadır.( box-sizing kullanılmazsa toplam genişlik: genişlik+sağ ve sol boşluk şekilinde olacaktır.)

Stili piksellerle değiştirmenin ne kadar kolay olduğunu gördünüz mü? Pikseller çok basittir. Ve bu nedenle, onları kullanmak çok cazip. Tüm uygulamanız boyunca pikselleri kullanmaya devam ederseniz, bu sizi ısırır. Bunun nedeni, piksellerin erişilebilirlik için gerçekten kötü olmasıdır. Bunu göstermenin kolay bir örneği, tarayıcınızdaki yazı tipi boyutunu değiştirmektir. Yazı tipi boyutunu değiştirirseniz, uygulamanızdaki yazı tipi boyutunda hiçbir şey olmaz. Bunun nedeni, yazı tipi boyutunu ne olursa olsun 14 piksele ayarlamış olmamızdır. Tanımladığımız CSS, tarayıcının font-size ayarına uymayacaktır. Piksellerin işe yaradığı şey, kullanıcının tarayıcı ayarlarına rağmen bir şeyin tam olarak aynı genişlikte ve yükseklikte görünmesini istediğiniz zamandır. Pikseller için iyi bir kullanım durumu, bir kenarlık tanımlamanızdır. Muhtemelen bu sınırın her zaman aynı olmasını istersiniz. Ancak çoğu zaman mizanpajları ve yazı tipi boyutlarını tanımlamak için piksel kullanmak istemezsiniz. Peki ne kullanıyor olmalısınız?

Yüzdeler(%)

Nerede Kullanılır: Tıpkı pikseller gibi, yüzdeler de oldukça basittir. Yüzde her zaman ebeveyninin boyutuna bakar.

Nerede Kullanılmaz: Tipografi için kullanmayın. (İstisna: yazı tipi boyutunda CSS sıfırlama.)

Örnek: Bu, aşağıdaki örnekte ikinci div’in üst öğesinin %50’si olacağı ve bu da sayfa genişliğinin %30’una ineceği anlamına gelir. Bunun nedeni, birinci div olan ikinci div’in ebeveyninin sayfa genişliğinin %60’ı olmasıdır.

rem

Diğer bir seçenek çoğu durumda rem birimini kullanmak istersiniz. Ama rem bir birim midir? Bir rem birimi, <html> öğesinde tanımladığınız yazı tipi boyutudur. Kelime içindeki “r” root(kök) anlamına gelir. Özetlemek gerekirse, rem birimi “kök öğenin yazı tipi boyutu” anlamına gelir.

Nerede Kullanılır: em ve ex için daha sağlam ve öngörülebilir bir alternatiftir. @media sorgu kesme noktaları dahil olmak üzere tipografi ve tipografi ile ilgili öğeler (iç dış boşluklar vb.) için kullanılır.

Nerede Kullanılmaz: IE8(kullanan kaldıysa) ve önceki sürümleri desteklemek istiyorsanız veya geriye dönük destek sunmak istiyorsanız kullanmayın.

Örnek:

em ve ex

em yada ex birimi, rem birimiyle tamamen aynı şekilde çalışır, ancak em’ler temel yazı tipi boyutunu hesaba katmaz. em’ler, mevcut öğelerinin yazı tipi boyutunu kullanır.

em: Yazı tipi boyutu gibi tipografik özellikler söz konusu olduğunda ebeveynin yazı tipi boyutu ve genişlik gibi diğer özellikler söz konusu olduğunda kullanılabilir.

ex: x harfinin yüksekliği (x-height) kadardır.

Nerelerde Kullanılır: Tipografi ve tipografi ile ilgili öğeler (iç ve dış boşluklar vb.), em ve ex’in karmaşık düzenlerde kullanıldığında ince bir “alma”ya sahip olduğu anlayışıyla. Alternatif olarak rem kullanmayı düşünün.

Örnek:

Yukarıdaki örnekte Div’in genişliği, html etiketinin yazı tipi boyutu yerine kendi yazı tipi boyutuyla tanımlanır.

em’lerin kombinasyonunu kullanmak çok zor olabilir. Bir çocuğun yazı tipi boyutunu em olarak ayarladığı ve bu çocuğun ebeveyninin yazı tipi boyutunu 0,5em olarak ayarladığı durumu hayal edin. Bu gerçekten hızlı bir şekilde dağınık olabilir. Özellikle birden çok öğenin iç içe olduğu durumu hayal ettiğinizde, tümü em’de bir yazı tipi boyutu tanımlar.

Boyutları tanımlamak için bu çözümü kullanırken, piksel kullanırken olduğu gibi aynı sorun ortaya çıkar. Tarayıcı ayarlarına saygı göstermez. Bunun nedeni, html öğesinde 10 piksellik yazı tipi boyutunu sabit kodlamış olmamızdır.
Bu soruna geçici bir çözüm bulmak için yapabileceğiniz şey, html öğesindeki yazı tipi boyutunu %62,5 yazı tipi boyutuna ayarlamaktır.

Bunun işe yaramasının nedeni, neredeyse tüm tarayıcıların varsayılan yazı tipi boyutunun 16 piksel olmasıdır. Bu, sizi tarayıcı ayarlarına saygı duyan ve uygulamayı daha erişilebilir hale getiren 10 piksellik bir temel yazı tipi boyutuna götürür.

Punto(pt) ve Pika(pc)

Nerede Kullanılr: Sayfayı yazdırırken.

Nerede Kullanılmaz: Başka hiç birşeyde kullanılmaz.

Viewport (vh & vw)

Viewport, görüntü alanı genişliği ve görüntü alanı yüksekliği anlamına gelen vw ve vh sembollerini kullanılır. Nerede olursanız olun, bir çocuğun içinde veya bir torunda, vw ve vh her zaman görüntünün genişliği ve yüksekliği olacaktır. vw ve vh, ebeveyninin boyutunu umursamaz.

Nerede Kullanılır: “mükemmel” duyarlı kapsayıcılarda ve duyarlı tipografilerde kullanlabilir.

Nerede Kullanılmaz: media sorgularında kullanmayın, çünkü görüntü alanı asla 100vw’den daha az bir genişliğe veya 100vh’den daha az bir yüksekliğe ulaşmayacaktır: tanım olarak, bu sayılar ne kadar büyük veya küçük olursa olsun, tarayıcı penceresinin mevcut boyutlarına karşılık gelir. ekran veya cihazdır. Ünitenin IE8’deki destek eksikliğinin farkında olun.

Örnek:

Alt div, ebeveyninin genişliği %50 olmasına rağmen, görünüm alanı genişliğinin %90’ı olacaktır. Aynı şey vh birimi için de geçerlidir.

İnç (in) ve Santimetre (cm)

Nerede Kullanılır: Yazdırma sayfalarında ve özellikle kenar boşluklarında.

Nerede Kullanılmaz: Başka hiçbir yerde kullanılmaz.

Karakter (ch)

Nerede Kullanılır: Tek aralıklı yazı tiplerini boyutlandırma ve ayarlama. Tarayıcı desteği sınırlamalarının farkında olun.

Grid(fr)

Nerede Kullanılır: Fr(fraction) veya kesirli birim, CSS’de nispeten yeni bir birimdir. Bu birim genellikle ızgaralarla(grid) birlikte kullanılır.

Aşağıdaki örnekte tanımladığımız grid’e bir göz atalım.

Örnek:

Sade Sayılar

Hemen hemen her CSS özelliği, ölçüm sisteminin bildirimde belirtilmesini gerektirse de, birkaçı en iyi şekilde düz tamsayı veya nokta değerleriyle kullanılır. Özellikle line-height ve border-image ham sayılarla kullanılabilir(önerilmemekle birlikte).

Not: Ayrıca 0 (sıfır) ölçüsünü kullanırken de her hangi bir ölçü birimi kullanmak gerekmez.

Önerilen CSS Ayarı

Html öğesinin yazı tipi boyutunu yüzde olarak ayarlamanız önerilir. Bunu yapmak em ve rem sorunları temel çözüm sunar.

Tarayıcı yazı tipi boyutunun 16 piksele (yani varsayılan) ayarlandığını varsayarsak, kök html öğesinin yazı tipi boyutunu %100’e ayarlamak varsayılan olarak 1rem ila 16 piksel olacaktır. Bu hala en uygun çözüm değil. %62,5 kullanmak daha iyi bir yaklaşım olacaktır. Bu 1rem ile 10px’e eşit olacaktır. Temel olarak bununla başlamak hesaplamaları basitleştirir.

Örnek: CSS Tavsiye Edilen Sıfırlama

Diğer Ölçü Birimleri ve Dönüşüm Tablosu

Mutlak Ölçü Birimleri

ÖlçüİsimEşitliği
cmCentimeters1cm = 37.8px = 25.2/64in
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in

Bağıl Ölçü Birimleri

ÖlçüTanımı
emYazı tipi boyutu gibi tipografik özellikler söz konusu olduğunda üst öğenin yazı tipi boyutu ve genişlik gibi diğer özellikler söz konusu olduğunda öğenin yazı tipi boyutu.
exx elementi yüksekliği(x-height)
ch0 değerinin genişliğine göre karakter genişliği
remroot elementinin büyüklüğü
lhsatır yüksekliği
vw1% ekran genişliğini.
vh1% ekran yüksekliği.
vmin1% mininum ekran genişliği.
vmax1% minimun ekran yüksekliği.

Dönüşüm Tablosu

 point, pixel, em/rem ve yüzdeye göre

Notlar:

  • :root yazı tipi boyutu 16 pikseldir.
  • Hesaplanan em ve % boyutu ebeveyne/atalara bağlıdır.
  • Gerçek işlenen boyut, yazı tipine, tarayıcıya ve işletim sistemine bağlı olabilir.
  • 1 piksel = 0.75 point; 1 point= 1.333333 piksel
Point(pt)Pixel(px)Em/RemYüzde(%)Anahtar
6pt8px0.5em50% 
7pt9px0.55em55% 
7.5pt10px0.625em62.5%x-small
8pt11px0.7em70% 
9pt12px0.75em75% 
10pt13px0.8em80%small
10.5pt14px0.875em87.5% 
11pt15px0.95em95% 
12pt16px1em100%medium
13pt17px1.05em105% 
13.5pt18px1.125em112.5%large
14pt19px1.2em120% 
14.5pt20px1.25em125% 
15pt21px1.3em130% 
16pt22px1.4em140% 
17pt23px1.45em145% 
18pt24px1.5em150%x-large
20pt26px1.6em160% 
22pt29px1.8em180% 
24pt32px2em200%xx-large
26pt35px2.2em220% 
27pt36px2.25em225% 
28pt37px2.3em230% 
29pt38px2.35em235% 
30pt40px2.45em245% 
32pt42px2.55em255% 
34pt45px2.75em275% 
36pt48px3em300% 

Kaynak:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

https://www.freecodecamp.org/news/learn-css-units-em-rem-vh-vw-with-code-examples/

Yorum yap