CSS Framework - CSS Yapıları

Daha önce hatırlarsanız http://www.kadirgunay.com/web-standartlarinda-en-bilinen-5-yanlis-anlasilma.html bağlantılı yazımda standartlara uymak istiyorsanız muhakkak web sitelerinizi CSS ile kodlamalısınız demiştim ve bunun etkilerini anlatmıştım. İşte bu yazımda da sizlere CSS Yapıları yani Framework dediğimiz olayı anlatacağım. Framework kelimesinin karşılığına baktığımızda önümüze çokca seçenek sunuluyor; “yapı, çatı, iskelet, kadro ve kafes” bunlardan en bilinen kelimeler. Ben genel anlamda yapı dedim. Sonuç olarak yaptıkları iş de bu kelimeye uygun.

Framework - Yapı Nedir?

Framework işi gereği hazır sınıfların, betik kodlarının ve örneklerin bulunduğu yapıların genel adıdır. Hemen hemen her yazılım dilinin kendine özgü bir veya birden fazla çeşitli işlere yaran yapıları ve bu yapılara ait hazır kodları, örnekleri bulunur.

Framework Ne İşe Yarar?

Genel olarak düşündüğümüzde;

• Hızlı üretim
• Bakımı kolaylaştırmak (güncelleme, değişiklik v.b durumlar)
• Projeye modülerlik kazandırma
• Farklı projeleri birleştirme ve yeniden kullanma
• Açık kaynak kod (tüm frameworkler değil)

gibi işlevsellikler sağlar.

CSS Frameworkleri - Yapıları Nedir, Nasıl Kullanılır?

Google’ da “css framework” diye arama yaptığınızda karşınıza bilindik css yapıları çıkacaktır. Bunlar,

YAML

Blueprint CSS

LogiCSS

Elements

Eswat

YUI

Yukarıda verdiğim CSS Yapılarını açık kaynak kod oldukları için kolayca indirip kullanabilirsiniz. Örneklerin içinde çok güzel ve işinizi çok kolaylaştıracak kod örnekleri mevcut. Örnek verirsek, 2 kolonlu ve daha fazla kolonlu css kodlamaları, menu (navigasyon örnekleri), ie6 ve alt versiyonları için kutu modelleme ve hackler, css sıfırlama v.b daha bir çok kod örneğini göreceksiniz.

Bu css yapıları sayesinde kısa zamanda web sitelerinizin çatılarını oturtabilir ve daha hızlı bir şekilde css kodlaması yapabilirsiniz.

Kaynak Siteler;

• http://www.sinerjik.org/yazi/css-framework-tasarimlar-icin-iskeletler/
• http://www.wymstyle.org/en/
• http://elements.projectdesigns.org/
• http://www.alistapart.com/articles/frameworksfordesigners

Derlemeler - 28.11.2008

Yağmurun kendini alıştırdığı bu hafta son iş gününe güzel bir hava ile başladık umarız ki hafta sonu da böyle devam eder. Biliyorsunuz Derlemeler konusuna biraz ara verdik, sebeplerini saymaya hiç luzum yok o yüzden kaldığımız yerden devam ediyoruz.

Farecik

• Fatih Hayrioğlu’ nun sitesi geçen hafta bir süre kapalı kaldı. Zararlı içerik sorunu yaşadı ve bunu nasıl çözdüğünü anlattı {buradan}
• Fatih Turan Google Map API ile ilgili kurulum ve kullanımı anlatıyor {buradan}
• Kaner Tuncel renk uyumlarını ve anlamlarını anlatmış {buradan} Devamını Oku »
  
  checkbox customisation, checkbox style, CSS, css stripe, derleme, google, google api, google zararlı içerik, hack, renk uyumu, u3, u3 tech, u3 teknoloji
  

  CSS, Güncel, XHTML

IE6 _ Hack

Yazının başlığına bakınca bu ne dediniz değil mi? Bir şeyi ele geçirdiğimiz yok ya da tabiri caiz ise Hack yaptığımız yok. Daha önceki yazılarımda IE6′ nın başımıza nasıl bir bela olduğunu yazmıştık. Bu yüzden farklı yollar da anlatmıştık. Hatta başka sitelerde de yazılmıştı. Web tasarımcıları ya da yazılımcıları (yazılımcılar çok alakadar olmasa da) CSS kodlaması genelde her tarayıcı da farklılıklar gösterir. Yeni nesil tarayıclar sorunları kapatsa da eski nesil tarayıcılar ki bunların başında ve en belalısı IE6 gelir, bu hataları kapatmaz ve kafasına göre değerler atar. İşte şimdi anlatacağım hack olayı da bunun için.

_ Hack Örnekleri

Normal şekilde bir div’ e arka plan rengi verelim örnek siyah olsun;

#deneme {background-color:#000;}

Bu şekilde olduğunda deneme idli divimizin arka plan rengi siyah olacaktır ve hemen hemen tüm tarayıcılarda bu siyah olarak gözükecektir. Ama gel gelelim şu şekilde yapınca IE6′ da nasıl oluyor bir bakalım;

#deneme {background-color:#000; _background-color:#E75C58;}

Şimdi ikinci örneği IE6 da açın ve bakın arka plan rengi ne şekilde ben normal zamanlarda IE6 için ayrı bir css kodlaması yapıyorum ve bunu dışarıdan çağırıyorum, ama eğer değişecek değerler az ise alt çizgi “_” yöntemini kullanıyorum. Hemen hemen her değer için uygulanabiliyor.

Umarım işinize yarar.

IE6 ve PNG Sorunu

Bildiğiniz üzere IE (Internet Explorer) 6 ve alt sürümlerinde PNG sorunları yaşanmaktadır. Kullandığınız transparan GIF ve PNG imajlar bu sürümdeki tarayıcılarda arka kısımları koyu bir renk veya resmin boyutu kadar koyu bir alan ile gözükmektedir. İşte bu sorunu çözmek için bir kaç yöntem var. Size en kolay olan iki yöntemi anlatacağım.

1) Behavior Yöntemi

Behavior yöntemi stil dosyanızda kullandığınız “img” ve “<div>” elementleri için kullanılır. Öncelikle buradan iepngfix ve buradan blank.gif dosyasını indirin. Daha sonra ise stil dosyanıza veya stil dosyası kullanmıyorsanız sayfanızın içindeki stil bölümü içindeki yere şunları yazın;

img { behavior: url(iepngfix.htc) }

bu kodda iepngfix.htc dosyasını oluşturduğunuz sayfa ile aynı yere attığınızı düşünerek yazdım. Eğer indirdiğiniz dosyaları oluşturduğunuz dosya haricinde bir dizine atacaksanız yolunu göstermelisiniz. Bu kod sadece “img” tagları içindir. Arkaplan olarak kullandığınız png uzantılı dosyalar için, kullandığınız elemente behavior değeri atamalısınız. Örnek;

<div id=”ornek”>Bu bir denemedir</div>
#ornek {
background: url(resmim.png) no-repeat;
width:100px;
height:50px;
}

Yukarıda bir div oluşturduk ve ID’ sine ornek dedik. Daha sonra genişlik ve uzunluk değerlerini verdik ve bir arkaplan atadık. Fakat bu arkaplan bir png dosyası. Dolayısıyla bu divin arkaplanı IE6 ve daha alt sürümlerde yukarıda anlattığım gibi olacaktır. Bunu engellemek içinse; Devamını Oku »