Kategori: HTML

Overflow:Hidden – Bir .clearFix Alternatifi

Belki de HTML ve CSS yazmaya yeni başlayan birinin en çok kafasını karıştıracak problemlerden biri de elementleri yasladıktan (float uyguladıktan) sonra karşılaşacağı problemlerdir.

FloatNormalde bir blok element onun içindeki başka bir element uzadığı zaman otomatik olarak uzar. Ancak bir elemente float uygulandığı zaman onu saran elementin normal akışını bozarak otomatik yüksekliği görmezden gelir. Eğer yaslanan element onu saran elementten yükseklik olarak büyükse, saran element aynı boyutunda kalır; yaslanan element ise onun üzerinden taşar.

Devamını oku »

Sayfaya Ortalı Blok Element

Yüksekliği genel sayfa yüksekliğinden az olan tasarımlarda içerik alanının sayfaya hem yatay hem de dikey olarak ortalı olması istenir ya da en azından öyle daha güzel görünür. İçeriğin üste yapışık olması hez zaman istenen birşey değildir. Üstten boşluk vererek kısmi olarak bu sorun giderilebilir. Ama nihai çözüm bir blok elementi sayfaya dikey olarak ortalamatan geçer. Özellikle “Yapım Aşamasında” sayfalarında bu pek de güzel işimize yarar.

Yatay olarak ortalamayı margin {0 auto;} özelliğiyle kolayca yapabilirken dikey olarak ortalamak bu kadar basit değildir.
Devamını oku »

HTML5 – Yeni Öğeleri Daha İyi Anlayın

Bu blogu tasarladıktan sonra HTML5 hakkında birşeyler yazmam kaçınılmazdı. İlk duyduğum andan beri merak konusu oldu bende bu HTML5. “Ne gibi gelişmeler var, neden kullanmalıyız, ne kazancı var?” soruları kafamda uçuşmaya başladı. Kahvenizi hazırlayın, arkanıza yaslanın. İşte başlıyor…

Hepsinden önce modern bir tarayıcı kullandığınızdan emin olun ve sürekli güncel tutun. Tarayıcınızın HTML5 ve CSS3‘ün hangi özelliklerini desteklediğini öğrenmek için mükemmel bir script yazılmış. Adı Modernizr. Siteye girdiğinizde hemen karşınıza çıkıyor zaten nelerin desteklenip desteklenmediği.

HTML5‘de bazı özellikler native (doğuştan) geliyor. En genel örneği; bir video izlemek ya da bir ses dosyasını dinlemek için eklenti yükleme gereksimini ortadan kaldırıyor. Bunun için video ve audio elementlerini kullanmak yeterli. Bir resime, videoya, istatistik tablosuna alt başlık girmek için içiçe bölümler yapmak yerine figure ve figcaption elementlerini kullanabiliriz…

Anlamsal Elementler

HTML’de (HTML4) birtakım anlamsal yetersizlikler var. Tasarımcılar bu yetersizlikleri class ve id‘ler kullanarak çözmeye çalışıyorlar. Ancak iş karmaşıklaştıkça, ziyaretçiye daha heyecan verici tasarımlar sunmak istendiğinde, anlamsal isimler bulmak gitgide daha da zorlaşıyor.

HTML5’te bu sorunlara anlamsal elementler (semantic elements) kullanarak yanıt verilmeye çalışılmış. Basit bir blog sayfasında mimari genel olarak şu şekildedir.

Devamını oku »

Sayfanın Altına Yapışık Alan – (Sticky Footer)

Alta Yapışık AlanBir alanın sayfanın dibine yapışık olarak durması için kullanılan en yaygın yöntem “position:fixed” ya da “position:static” kullanmaktır. Yapıştırdığınız alanın yüksekliği az ise bu da bir yöntemdir tabi. Göze de batmaz.

Ama burada şöyle bir durum var. Bunları kullanarak yapıştırdığınız alan sayfa ne kadar uzun olursa olsun her zaman sayfanın dibine yapışık duracaktır. Peki ya bizim daha büyük bir alana ihtiyacımız olursa ne yapacağız? Ya grafik tasarımını ona göre yapıp sanki sayfanın geri kalanının bir parçasıymış gibi göstereceğiz ya da birazdan anlatacağım yöntemi kullanacağız. Bunun gibi daha birçok yöntem var ama benim kullandığım en iyi yöntem aşağıdaki.

Aslında bu yöntemin genel kullanım amacı; sayfa içeriği az olduğu zaman alt alanın (footer) gelip içeriğe yapışmasını yani alt alanlıktan çıkmasını engellemek.

Devamını oku »

CSS Sprite

İnternet teknolojisini uzaktan yakından takip eden herkes CSS Sprite‘ı duymuştur. Kim düşünmüşse bunu iyi etmiş.

CSS Sprite bize birçok fayda sağlar. Bunlardan birkaçını şöyle sıralayayım.

  1. Öncelikle görsel boyutunu azaltır. Yukarıdaki örnekte olduğu gibi; en sağdaki görselin boyutu 3.66 kB. Eğer tüm görselleri teker teker alsaydık toplam dosya boyutumuz 14.64 kB. olacaktı. Ancak hepsini birleştirip kullandığımızda boyut yaklaşık 9.5 kB.a kadar düşüyor.
  2. Dört yerine sadece bir tane görsel kullandığımız için HTTP isteği de dörtten bire düşüyor. Daha az istek olduğu için sitemiz daha hızlı açılıyor. Ne güzel değil mi!
  3. Diyelim sadece görsellerin normal hallerini koydunuz, “hover“larını koymadınız. Böyle bir durumda sayfanın ilk açılışında sadece normal halleri yüklenir haliyle. Fareyi görselin üzerine getirdiğinizde bu sefer “hover” hali çağırılır. Ama bu hali siteye önceden yüklenmediği için bu sefer de bunu yükler. Bu da belli bir zaman kaybına neden olur.

Diyeceksiniz, “sadece 5 kB. nedir ki!” Demeyin! Şöyle düşünün: Sitenize bir kişi girdiğinde server’a 5 kB. daha fazla yüklenecek. Sitenizin günlük ziyaretçi sayısına ortalama 100 desek; günde 500 kB. eder. Bunu aya çarparsanız 4.5 mB. eder ve bu sadece 5kB.lık bir fazlalıktan oluşan aylık değer. Bunun birden fazla olduğunu düşünürseniz, bunun size fazladan server masrafı olarak döneceğini tahmin edebilirsiniz.

Devamını oku »