Şimdiye kadarki yazılarda CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarıyla karşılaştınız. Tasarımınızdaki farklı özelliklerin ne kadar büyük olacağını anlamak önemli. Bu yazıda, öğeleri CSS aracılığıyla boyutlandırmanın çeşitli yollarını özetleyeceğiz. İleride size yardımcı olacak birkaç boyutlandırma terimi de tanımlayacağız.
Doğal veya içsel boyut
HTML Öğeleri, herhangi bir CSS’den etkilenmeden önce ayarlanmış doğal bir boyuta sahiptir. Basit bir örnek olarak görselleri düşünün. Bir görüntü dosyası, kendi iç boyutu olarak tanımlanan boyutlandırma bilgilerini içerir. Bu boyut, uyguladığımız herhangi bir biçimlendirme tarafından değil, görselin kendisi tarafından belirlenir.
Bir resmin yüksekliğini veya genişliğini <img> etiketindeki nitelikleri kullanarak veya CSS ile değiştirmezseniz, sayfadaki boyutu gerçek boyut kullanılarak görüntülenir. Aşağıdaki örnekte resmin boyutunu dosyada tanımlandığı şekilde görebilmeniz için bir kenarlık verdik.
img {
border: 5px solid darkblue;
}<img src="star.png" alt="star">
Öte yandan boş bir <div> kendi boyutuna sahip değildir. HTML’mize içeriksiz bir <div> ekleyelim. Resimde yaptığımız gibi ona bir kenarlık verirsek sayfada sadece bir çizgi görürüz. Bu, öğe üzerindeki daraltılmış kenarlıktır — onu açık tutacak içerik bulunmuyor. Aşağıdaki örneğimizde, bu sınır, blok düzeyinde bir öğe olduğu için kabın genişliğine kadar uzanır, (size aşina olmaya başlaması gereken bir davranış). İçerik olmadığı için yüksekliği (veya blok boyutunda boyutu) de yoktur.
.box {
border: 5px solid darkblue;
}<div class="box">
</div>
Yukarıdaki örnekte, boş öğenin içine biraz metin eklemeyi deneyin. Öğenin yüksekliği içerik tarafından tanımlandığı için kenarlık artık bu metni içerir. Dolayısıyla <div> bloğundaki boyut içeriğin boyutundan gelir. Yine bu, öğenin gerçek boyutudur – boyut, içeriği tarafından tanımlanır.
Belirli bir boyut ayarlama
Elbette tasarımımızdaki öğelere bir boyut verebiliriz. Bir öğeye boyut verildiğinde (içeriğinin o boyuta uyması gerekir), buna dışsal boyut adını veririz. Yukarıdaki <div>‘i ele alalım – bu öğeye belirli width ve height değerleri verebiliriz. Artık içine hangi içerik yerleştirilirse yerleştirilsin bu div o boyuta sahip olacaktır. Ancak, taşma ile ilgili önceki yazımızda keşfettiğimiz gibi, ayarlanmış bir yükseklik varsa ve öğenin içine sığacağından daha fazla içerik sağlanmışsa bu içeriğin taşmasına neden olabilir.
.box {
border: 5px solid darkblue;
height: 150px;
width: 200px;
}<div class="wrapper">
<div class="box"></div>
<div class="box">These boxes both have a height set, this box has content in it which will need more space than the assigned height, and so we get overflow. </div>
</div>
Taşma sorunu, uzunlukları veya yüzdeleri olan öğelerin yüksekliğini belirleme konusunda, oldukça dikkatli olmamızı gerektirir.
Yüzdeleri kullanma
Yüzdeler birçok yönden uzunluk birimleri gibi davranır ve bunlar genellikle uzunluklarla birbirinin yerine kullanılabilir. Yüzde kullanırken yüzdenin ne olduğunu bilmeniz gerekir. Bir kutunun başka bir konteyner içinde olması durumunda, alt kutuya bir yüzde genişliği verirseniz, bu yüzde, ana kutunun genişliğinin yüzdesi cinsinden olacaktır.
.box {
border: 5px solid darkblue;
width: 50%;
}<div class="box">
I have a percentage width.
</div>
Bunun nedeni, yüzdelerin, içerilen bloğun boyutuna göre çözümlenmesidir. Hiçbir yüzde uygulanmadığında, <div> blok düzeyinde bir öğe olduğu için, kullanılabilir alanın %100’ünü kaplar. Yüzde bir genişlik verirsek, bu normalde dolduracağı alanın yüzdesi olur.
Yüzde kenar boşlukları ve dolgu
Eğer margin ve padding değerlerini yüzde ayarlarsanız, bazı garip davranışlarla karşılaşabilirsiniz. Aşağıdaki örnekte bir kutumuz var. İç kutuya margin %10 ve padding %10 verdik. Kutunun üstündeki ve altındaki dolgu ve kenar boşlukları, sol ve sağ kenar boşluklarıyla aynı boyuttadır.
Bu örnekte üst ve alt kenar boşluklarının yüzdesinin, öğenin yüksekliğinin bir yüzdesi olmasını beklersiniz. Aynı zamanda sol ve sağ kenar boşluklarının yüzdesinin öğenin genişliğinin bir yüzdesi olması gerektiğini düşünürsünüz. Ancak, durum böyle değil!
.box {
border: 5px solid darkblue;
width: 300px;
margin: 10%;
padding: 10%;
}<div class="box">
I have margin and padding set to 10% on all sides.
</div>
Yüzde olarak kenar boşluğu ve dolgu kullandığınızda, verdiğiniz değer, bir üst bloğun (ana blok) satır içi boyutundan hesaplanır – yani yatay bir dilde çalışırken genişlikten alınır. Örneğimizde, tüm kenar boşlukları ve dolgu, genişliğin %10’udur. Bu, kutunun her tarafında eşit boyutlu kenar boşluklarına ve dolguya sahip olabileceğiniz anlamına gelir. Yüzdeleri bu şekilde kullanabilirsiniz. Bu kısım ileride hatırlamaya değer olacaktır.
Minimum ve maksimum boyutlar
Nesnelere sabit bir boyut vermenin yanı sıra, CSS’den bir öğeye minimum veya maksimum boyut da vermek isteyebiliriz. Değişen miktarda içerik alabilecek bir kutunuz varsa ve her zaman en az belirli bir yükseklikte olmasını istiyorsanız, min-height özelliğini kullanabilirsiniz. Kutu her zaman en az bu yükseklikte olacaktır. Ancak kutunun minimum yükseklik alanından daha fazla içerik eklersek kutu büyüyecektir.
Aşağıdaki örnekte, her ikisi de min-height 150 piksel tanımlı iki kutu göreceksiniz. Soldaki kutu 150 piksel uzunluğunda. Sağdaki kutu ise daha fazla alana ihtiyaç duyan içeriğe sahip; bu nedenle 150 pikselden daha uzun olacak şekilde büyümüş.
.box {
border: 5px solid darkblue;
min-height: 150px;
width: 200px;
}<div class="wrapper">
<div class="box"></div>
<div class="box">These boxes both have a min-height set, this box has content in it which will need more space than the assigned height, and so it grows from the minimum.</div>
</div>
Yukarıdaki yöntem taşmayı önlemekte ve değişen miktarlarda içerikle başa çıkmakta oldukça kullanışlıdır.
Sık kullanılan bir diğer yöntem de en fazla genişliği belirtmek olacaktır. Görsellerin kendi genişliklerinde görüntülemesi için yeterli alanları olmadığında, bu genişlikten daha büyük olmadıklarından emin olarak küçültülmesine neden olan max-width özelliği bu açıdan kullanışlıdır.
Örnek olarak, bir görüntüye width: 100% yerleştirirseniz ve gerçek genişliği kapsayıcısından daha küçükse, görüntü uzamaya ve daha büyük hale gelmeye zorlanır ve pikselli görünmesine neden olur.
Bunun yerine max-width: 100% kullanırsanız ve gerçek genişliği kapsayıcısından daha küçükse, görüntü uzamaya ve daha büyük hale gelmeye zorlanmayacak ve böylece pikselleşmeyi önleyecektir.
Aşağıdaki örnekte aynı görseli üç kez kullandık. İlk resim width: 100% ile kullanıldı ve kendisinden daha büyük bir konteyner içinde. Bu nedenle kap enine alabildiğince uzanır. İkinci görüntü max-width: 100% ile kullanıldı ve bu nedenle kabı doldurmak için esnemez. Üçüncü kutu, yine max-width: 100% ile kullanıldı; ancak bu durumda kutuya sığacak şekilde nasıl küçüldüğünü de görebiliyoruz.
.box {
width: 200px;
}
.minibox {
width: 50px;
}
.width {
width: 100%;
}
.max {
max-width: 100%;
}<div class="wrapper">
<div class="box"><img src="star.png" alt="star" class="width"></div>
<div class="box"><img src="star.png" alt="star" class="max"></div>
<div class="minibox"><img src="star.png" alt="star" class="max"></div>
</div>
Bu teknik görselleri duyarlı hale getirmek için kullanılır. Böylece görseller daha küçük bir cihazda görüntülendiğinde uygun şekilde küçülürler. Ancak bu tekniği gerçekten büyük resimler yüklemek ve ardından tarayıcıda küçültmek için kullanmamalısınız.
Görseller, tasarımda gösterildikleri en büyük boyut için olması gerekenden daha büyük olmayacak şekilde uygun boyutta olmalıdır. Aşırı büyük resimler indirmek sitenizin yavaşlamasına neden olur ve mobil veri kullanıyorlarsa kullanıcılara daha fazla paraya mal olabilir.
Not: Duyarlı görseller hakkında daha fazla bilgi edinin.
Görünüm birimleri
Bir siteyi görüntülemek için kullandığınız tarayıcıda sayfanızın görünen alanı olan görünüm alanının da bir boyutu vardır. Dolayısıyla CSS’de, görüntü alanının boyutuyla ilgili birimlerimiz bulunur – vw görüntü alanı genişliği ve vh görüntü alanı yüksekliği birimi. Bu birimleri kullanarak, kullanıcının görüş alanına göre bir şeyi boyutlandırabilirsiniz.
1vh görüntü alanı yüksekliğinin %1’ine ve 1vw görüntü alanı genişliğinin %1’ine eşittir. Bu birimleri, kutuların yanı sıra metni de boyutlandırmak için kullanabilirsiniz. Aşağıdaki örnekte 20vh ve 20vw boyutlarında bir kutumuz var. Kutu da A harfi bulunuyor ve font-size olarak 10vh verilmiş.
.box {
border: 5px solid darkblue;
width: 20vw;
height: 20vh;
font-size: 10vh;
}<div class="box">
A
</div>
Eğer vh ve vw değerlerini değiştirirseniz, bu, kutu veya yazı tipinin boyutunu da değiştirir. Görünüm alanı boyutunu değiştirmek de öğeler görünüm alanına göre boyutlandırıldıkları için öğelerin boyutlarını değiştirecektir.
Nesneleri görünüm alanına göre boyutlandırmak tasarımlarınızda faydalı olabilir. Örneğin, içeriğinizin geri kalanından önce tam sayfa bir bölümün gösterilmesini isteyebilirsiniz. Sayfanızın bu bölümünü 100vh yükseğe çıkarmak, içeriğin geri kalanını görünümün altına itecektir. Böylece, yalnızca sayfa aşağı doğru kaydırıldıktan sonra diğer içerik görünecektir.
Becerilerinizi test edin!
Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz?
Özet
Bu yazı size, web’de bir şeyleri boyutlandırırken karşılaşabileceğiniz bazı önemli sorunların bir özetini verdi. CSS düzenine geçtiğinizde, farklı mizanpaj yöntemlerinde uzmanlaşmak için boyutlandırma çok önemli hale gelecek. Bu nedenle devam etmeden önce buradaki kavramları anladığınızdan emin olun.