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.

iOS Scroll Problemi

Geçen yıllara nazaran geçtiğimiz her yıl, mobil aygıtlar ile web sitelerimize daha çok ziyaretçi geldiğinin farkındasınızdır. Bugün izlediğim 1dakika 24 saniyelik bu video sizleri sıkmadan anlatacaktır da … Mobil aygıtlar devreye girince, yazdığımız kodları daha dikkatli yazmak, sadece PC browser’lerinde değil de çeşitli mobil aygıtlardan ( iPad, iPhone … ) da bakmak gerekmekte.

overflow: auto Sorunsalı

Web sayfalarına nazaran, iOS tabanlı mobil cihazlardaki scroll mekanizması farklı işliyor. iOS üzerinde, aşağıya doğru sayfayı kaydırmak istediğimizde hızlıca aşağıya inen sayfa, inmek istediğimiz noktada otomatik olarak yavaşlıyor ve kullanıcının gözünde güzel bir etki yaratıyor. Neyse …

overflow değeri sizlerin de bildiği üzere, konteynır içerisinde bulunan bir element, eğer o konteynır boyutlarını aşıyorsa scroll çıkarıyor. Her şey güzel çalışırken iOS tabanlı mobil aletlerde scroll sıkıntı yaratıyormuş meğersem. Sorunun çözümü ise çok basit:

[code lang=”css”]
overflow-y: scroll;
[/code]

Yukarıdaki değer ile bu sorunu kolaylıkla aşıyoruz.

“-webkit-overflow-scrolling: touch” Özelliği

Yukarıda bahsettiğim iOS tabanlı tarayıcılarda smooth bir şekilde, scroll’un kayması ve sonuna doğru yavaşlaması için CSS‘de bize yardımcı olabilecek kod ise:

[code lang=”css”]
-webkit-overflow-scrolling: touch;
[/code]

Opacity Sorunu: Transparan ve Transparan Olmayan Elementler

Çoğu zaman tasarımlarda transparan elementlerle karşılaşırız. Peki bu elementleri imaj olarak mı kesmek gerekir yoksa CSS yardımıyla oluşturmak gerekir ? CSS ile oluşturmak için temel opacity / transparan kodlarından yardım alırız. Genellikle buton veya kutusal tasarımlarda yarı transparan, arka planın görüldüğü elementleri kolaylıkla entegre ederiz. Ama bir dakika … Buton veya kutuya opacity değerlerini verdiğimizde kutu veya buton içerisindeki yazı / imaj’ların da mı opacity’si değişiyor. Eeee, sadece kutunun değişmesini nasıl sağlayacağız ?

Transparan Bir Kutu Oluşturalım

[code lang=”css”]
<div class="kutu">
<h2>9. ve 10. Sınıfta</h2>
<h3>Anlamadığın konu kalmasın!</h3>
</div>
[/code]

Kutuyu biraz da CSS ile şekillendirecek olursak:

[code lang=”css”]
width: 351px;
height: 236px;
opacity: 0.5;
background: #000;
border: 2px solid #166ca3;
[/code]

Her şeyin tıkırında çalışmasını beklerken kutumuz transparan oluyor, yazıyı da okumada güçlük çekiyoruz. Bu beklediğimiz bir sonuç değildi. Her şey tıkırında çalışması gerekirken, çalışmadı !

Şimdi Hack Zamanı

Neden böyle çaışacağını açıklayacak olursak, bildiğiniz üzere child-element ilişkisi yüzünden en baştaki div’e uygulanan css değerleri, doğal olarak div’in child’ları olan h2 ve h3 elementlerine de uygulanmış oldu. Bu da kutu ve içerisindeki her şeyi transparan yaptı. Peki, h2 ve h3 elementleri div’in içerisinde olmasa ne olurdu ?

Sizin de bildiğiniz üzere, bir element’in başka bir elemt ile aynı alanda bulunması onun child’i olacağı anlamına da gelmiyor. Tam bu noktada CSS‘in nimetlerinden faydalanma vaktidir. Bizim h2 ve h3 elementlerimizi div’imizin üzerine taşırsak bu sorunu hallederiz:

[code lang=”css”]
<h2>9. ve 10. Sınıfta</h2>
<h3>Anlamadığın konu kalmasın!</h3>
<div class="kutu"></div>
[/code]

Kutunun tam üzerine geitirip pozisyonlamak için de CSS‘in yardımını kullanalım:

[code lang=”css”]
h2 {
position: relative;
top: 0;
left:0
}
h3 {
position: relative;
top: 20px;
left:0
}
[/code]

SASS ve Dosya Organizasyonu

SASS ile çalışmanın güzel yanlarından birisi de organize bir yapı oluşması olsa gerek. Önceden, bir sayfa üzerine farklı farklı CSS dosyalarını eklemek hem yönetimi zor, hem de performans açısından ( birden fazla HTTP requesti ) zararlı bir yöntemdi. SASS‘la birlikte birçok farklı bölümleme ile stilleri düzenleyebilecek duruma geliyorsunuz.

Peki SASS ile Bölümleme Ne Demek ?

Bölümleme de neyin nesi diye soracak olursanız, kaynak dosyamızda:

If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file.

İşte bu kolaylık yardımıyla main.scss adı altında bir dosya oluşturabilir, içerisine de istediğiniz kadar bölüm ekleyebilirsiniz. Kendi projemden örnek verecek olursam, anime, mixins, fontface, media, responsive başlıkları altında bir çok küçük scss dosyam mevcut. Eğer responsive yapı ile ilgili bir hata olduğunda direk responsive dosyam üzerinde değişiklik yapıp sorunu halledebiliyorum:

[code lang=”css”]
sass/
_variables.scss
_mixins.scss
_variables.scss
_normalize.scss
_boilerplate.scss
_media.scss
_responsive.scss
[/code]

Eğer yeni bir *.scss dosyası eklemek istersek, hemen aşağıda bulunan main.scss’imize ekliyoruz:

[code lang=”css”]
/*!
* Vitamin v0.1
*
* Copyright 2013 Vitamin
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @phyesix
*/

// Core variables and mixins
@import "variables";
@import "mixins";

// HTML5 Boilerplate
@import "normalize";
@import "boilerplate";

// Grid System
@import "inGrid";
@import "anime";
@import "fontface";
[/code]

Çalıştığınız proje boyutu arttıkça doğal olarak böyle ayırarak her bir özellik için spesifik noktalara çok daha kolay ve hızlı bir şekilde gidip zaman kazanabiliyorsunuz. 10.000 satır css dosyasında bir yazının fontunu değiştirmek istediğimizde öyle tek tek aramak yerine direk fontface dosyamızın içerisinde değişikliği yapıp sorunu halletmek ise, paha biçilemez.

LocalStorage ile Popup Örneği

Daha önceki yazımda localStorage hakkında temel bilgilere değindikten sonra bu yazımda da sizlere güzel bir örnek vermek istiyorum. Çalıştığım takımdaki arkadaşlarımdan, web sitemize giriş yapan kullanıcı karşısına direk olarak sosyal medya bağlantılarımızın olduğu “takip et” butonlarının ( Facebook, Twitter, Google Plus ) bulunduğu bir popup çıkarma isteği geldi. Ama burada küçücük bir sorun vardı. Siteye giriş yapan her kullanıcı, her giriş yaptığında bu popup’u görmek zorunda mıydı ?

LocalStorage ile Popup’ı Belirli Zaman Dilimlerinde Çıkarsak ?

İşte bu noktada yardımıma localStorage koştu. Web sitesine gelen x kullanıcısına bir “değer” atasaydık, her geldiğinde çıkmasaydı ama arada da sosyal medya hesaplarımızı hatırlatmak isteseydik fena mı olurdu ? Yapılacak adımları sıralayacak olursak:

  • İlk defa gelen kullanıcının localStorage’na erişilecek.
  • Değerin olup olmadığına bakacak.
  • Varsa değeri okuyup farklı bir davranışa yönlendirecek.
  • Yoksa değeri oluşturacak.

Harekete Geçelim

Yapacağımız işi kısaca özetlemek istersek, kullanıcı web sitesine girdiğinde sosyal medya ikonlarının bulunduğu popup çıkacak. Ardından localStorage yardımıyla çıktığına dair browser’inde bilgi saklayacağız. Her siteye girdiğinde o bilgiyi okuyup bir ay geçti mi geçmedi mi kontrol edeceğiz. Eğer geçtiyse de tekrardan popup gösterip yeni değerleri localStorage‘a gireceğiz.

Ayda bir kere popup çıkaracağımız için, bulunduğumuz ayı çekmekle başlıyoruz ve şu an bulunduğumuz ayı currentMonth değerine atıyoruz. 3. satır ile de socialpopupdate value’sunun olup olmadığını localStorage altından bakıp durumunu localMonth değerine atıyoruz:

[code lang=”js”]
var d = new Date();
var currentMonth = (d.getMonth()+1);
var localMonth = localStorage.getItem(‘socialpopupdate’);
[/code]

Eğer localStorage’da socialpopupdate diye bir kayıt yoksa, kullanıcı web sitemize ilk defa gelmiş demektir. Doğal olarak hemen kaydımızı oluşturup şu an bulunduğumuz ayı localStorage‘ına kaydediyip “popupGoster()” ile popupu açıyoruz:

[code lang=”js”]
if( localMonth == null){
localStorage.setItem(‘socialpopupdate’,currentMonth);
popupGoster()
}
[/code]

Son olarak da ayda bir kere popup çıkarma işine geldi. Burada da localStorage‘da bulunan ay bilgisi, şu an bulunduğumuz ay’a eşit değilse, socialpopupupdate değerimizi siliyoruz. Ardından içinde bulunduğumuz ayın değerini güncelleyip tekrardan popup’u gösteriyoruz:

[code lang=”js”]
if( localMonth != currentMonth ){
localStorage.removeItem(‘socialpopupdate’);
localStorage.setItem(‘socialpopupdate’,currentMonth);
popupGoster()
}
[/code]

HTML5 ile Gelen “Local Storage” Nedir ? Nerelerde Kullanılır ?

Front-end Developerlar için kullanıcının bilgisayarında bilgi saklamak güzel bir şey olsa gerek. Bu yazı içerisinde, kolay bir şekilde kullanıcı bilgisayarında küçük bilgiler saklamak, sonradan onları okumak ve bunlarla neler yapılacağını açıklamaya çalışacağım.

Neden “Local Storage” ?

Web sitenizde bir uygulama olduğunu düşünelim. Uygulamayı web sitesi üzerinde kullanıp kapattıktan sonra tekrardan açmak istediğinizde her şey sıfırlanmış olur. Eğer aynı şeyi masaüstü uygulamalarda yapmak isterseniz tam tersi durumda, nerede kaldıysanız oradan devam etme şansı tanır.

Yukarıdaki sebepten ötürü, Front-end Developer bazı durumlarda bu bilgilerin bir yerde saklanmasına ihtiyaç duyar. Normalde bu back-end development tarafında, kullanıcı adı şifresi girilerek kurtarılabilir. Peki sisteme giriş yapmayan, daha da öte back-end tarafı ile ilişiğimiz olmadan bu işlemleri yapmak istediğimizde ne olacak ? İşte burada local storage devreye giriyor. Böylelikle sistemimize gelen kullanıcıyı, küçük bir “değer” ile tanıyabileceğiz!

Cookie Vardı, Local Storage ile Cookie Farkı Ne ?

Local Storage gelmeden önce cookie’leri kullanıyorduk. Cookie, kullanıcının bilgisayarında bulunun küçük bir text dosyası olarak tanımlayabilir, bu dosya sizin web siteniz açıldığı sırada domain ile eşleşip işlem görebilecek güce sahiptir de diyebiliriz. Bu dosya içerisine istediğiniz gibi “data” yazabilir, okuyabilir veya silebilirsiniz. Buraya kadar her şey güzel ama bazı noktalar ile limitlendirilmiş durumda:

  • Web sitesine her girilip sayfa yüklendiğinde okunurlar.
  • 4 KB’lık data saklarlar.
  • Bazı güvenlik sorunlarına da neden olabilirler.

HTML5 Destekleyen Browserlarda Local Storage Kullanımı

Local Storage‘n kullanımı sandığınız kadar zor değil. Javascript içerisinde localStorage objesi ile her şeyi yapabilirsiniz. setItem() ve getItem() methodlarını kullanarak bunu yapabiliriz:

[code lang=”js”]
localStorage.setItem(‘socialpopupdate’,’02.12.2013′);
[/code]

Eğer socialpopupdate key’ini okumaya çalışırsak, bize 02.12.2013 değerini dönecektir.

[code lang=”js”]
var tarih = localStorage.getItem(‘socialpopupdate’);
// ->; "02.12.2013"
[/code]

Eğer bu değeri silmek istersek de sizin de tahmin edebileceğiniz üzere removeItem() methodunu kullanabiliriz:

[code lang=”js”]
localStorage.removeItem(‘socialpopupdate’);
var tarih = localStorage.getItem(‘socialpopupdate’);
// ->; null
[/code]

Evet, bu kadar. Küçük bir tüyo verecek olursam da, localStorage yerine sessionStorage’i kullanırsak browser penceresi kapanana kadar data saklayabiliriz.

HTML5 ‘Download’ Attribute’u

Bildiğiniz üzere web sitesi içerisinde download linki oluşturmak oldukça basit bir işlem. Download ettireceğimiz dosyanın adresini <a> tag’i içerisine verdiğimizde bu işi halletmiş oluyoruz. Bazı modern browser’larda PDF, imaj veya text gibi dosyalara link verdiğimizde yeni tab’da açılmaları da ayrı bir problem olabiliyor. İşte bu noktada HTML5’in ‘download’ attribute’u devreye sokmanın zamanı gelmiş demektir.

Download Attribute’u Nasıl Kullanırız ?

Download attribute’u ile bir taşla iki kuş vurabiliyoruz:

  • İlki yukarıda bahsettiğim yeni tabda, browser içerisinde açmayıp download ettirmek.
  • Download ettirirken dosya ismini istediğiniz gibi verebilmeniz.

Örnek verecek olursam, PDF veya imaj dosyamız sunucu veya bizim tarafımızdan rastgele oluşturulmuş bir isimden oluşsun.

[code lang=”js”]
<a href="dosya/bn213nbv123e.pdf">Download PDF</a>
<a href="dosya/JHgbnmbmnGH.jpg">Download Image</a>
[/code]

HTML5’deki download attribute’u sayesinde yukarıdaki iki dosya browser’da açılacaktır. Download Attribute’unu sisteme eklediğimizde:

[code lang=”js”]
<a href="dosya/bn213nbv123e.pdf" download="HTML5 ile İlgili Bilmeniz Gereken Şeyler.pdf">Download PDF</a>
<a href="dosya/JHgbnmbmnGH.jpg" download="PS4.jpg">Download Image</a>
[/code]

Örnek dosyaları bilgisayarınıza indirmek için: TIKLAYINIZ