 Tüm tarayıcılar için CSS Düzeltmeleri(Hack) 
Tüm tarayıcılar için CSS Düzeltmeleri(Hack)
CSS ile web sayfası kodlarken bizi en çok zorlayan konulardan biri daha önceki yazılarımda bahsettiğim gibi farklı tarayıcı sürümlerine göre kod yazmaktır. CSS ile kod yazarken bazı durumlarda kodumuz bir tarayıcı grubunda düzgün görünürken başka bir tarayıcı grubunda farklı görüntülenir, tabi biz yaptığımız sitelerin kullanıcılar tarafından tarayıcısı ne olursa olsun aynı görünmesini isteriz. Bu gibi durumlarda kullandığımız yöntem aslında çok basit bir tekniktir. Hangi tarayıcıda farklı görünüyorsa onun için farklı kod yazarız ve bunu diğer tarayıcıların görmeyeceği kod bloğu içinde yazarız.
CSS Derslerindeki CSS Sorunları ve Çözüm Önerileri kısmındaki birçok yöntemin ana mantığıda budur.
Farklı tarayıcılar için düzenleme(hack) yazarken genel anlamda iki farklı yöntem kullanırız. Farklı css dosyaları hazırlayıp bunları eklerken şartlı yorumlar yardımı ile farklı tarayıcılar için farklı css kodlarını gösteririz, ikinci yöntem ise kod içerisinde o tarayıcının gördüğü kod bloğu içinde ona göre kod yazarız. Burada birinci yöntemi(IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak) daha önce anlatmıştık. Bu yazımızda kod içindeki css düzeltmelerinden bahsedeceğiz.
CSS kodu içinde farklı tarayıcılar için farklı kod yazmanın en kolay yolu, tarayıcılara özel seçiciler içine kod yazmaktır.
Tarayıcılara Özel Seçiciler
IE 6 ve altı
IE 7 ve altı
Kod: 1.*:first-child+html {} * html {}
sadece IE 7 için
Kod: 1.*:first-child+html {}
IE 7 ve yeni nesil tarayıcılar için
Yalnız yeni nesil tarayıcılar için (IE 7 dışında)
Kod: 1.html>/**/body {}
Opera 9 ve altı sürümler için
Kod: 1.html:first-child {}
Safari
Kod: 1.html[xmlns*=""] body:last-child {}
Google Chrome and Safari 3.1
Kod: 1.body:nth-of-type(1){}
Firefox 2
Kod: 1..foo, x:-moz-any-link { }
FireFox 3
Kod: 1..foo, x:-moz-any-link, x:default { }
Sadece Firefox 3
Kod: html>;/**/body .foo, x:-moz-any-link, x:default { }
Burada önemli olan her tarayıcı farklı görünümünde bu metoda başvurmamak gerekir, çözümü olmayan sorunlarla karşılaştığımızda bu kodları kullanmalıyız.
Bu kodları kullanma gereksinim genelde Internet Explorer 6 ve 7 için oluyor. Ama nadirende olsa diğer tarayıcıların düzeltmeleride lazım oluyor. Bir örnek yapalım
Kod: 01./* Firefox 1 */
02..ozelSecici, x:-moz-any-link {
03.
background-color:#ffd560;
04.}
05./* Firefox 2 */
06..ozelSecici, x:-moz-any-link {
07.
background-color:#ab1b0b;
08.}
09./* Firefox 3 */
10..ozelSecici, x:-moz-any-link, x:default {
11.
background-color:#e6831f;
12.}
13./* Google Chrome and Safari 3.1 */
14.body:nth-of-type(1) .ozelSecici{
15.
background-color:#e6f0fa;
16.}
17./* Opera 9 ve altı */
18.html:first-child .ozelSecici{
19.
background-color:#a91614;
20.}
21./* ie7 icin */
22.*:first-child+html .ozelSecici{
23.
background-color:#0098de;
24.}
25./* ie 7 ve alt sürümler icin */
26.*:first-child+html .ozelSecici{
27.
background-color:#d4d0c8;
28.}
29.* html .ozelSecici{
30.
background-color:#d4d0c8;
31.}
32./* ie6 ve alti */
33.* html .ozelSecici{
34.
background-color:#996666;
35.}
HTML kodu
Kod: 1.<p class="ozelSecici">Tarayıcı</p>
Aynı XHTML kodu için aşağıdaki gibi farklı tarayıcılarda farklı sonuçları alırız.
Sayfa Google Chrome 0.3.154.9, Safari 3.1.2, Firefox 3.0.4/2.0.0.14, Internet Explorer 7/6/5.5, Opera 9.6 ile test edilmiştir.
http://www.webdevout.net/css-hacks (*****)
http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
http://vikaskhera.wordpress.com/2008/08/02/css-hacks-browser-specific-selectors/ (****)
http://centricle.com/ref/css/filters/ Önemli bir liste(****)
http://www.siberkultur.com/?q=css-hackleri (***)
http://www.sitepoint.com/article/browser-specific-css-hacks/ (***) sürümler eski
http://www.artypapers.com/csshelppile/category.php?2
http://rafael.adm.br/css_browser_selector/
http://css-discuss.incutio.com/?page=CssHack
http://snipplr.com/view/7043/firefox-3-css-hack/
http://pornel.net/firefoxhack
http://www.nealgrosskopf.com/tech/thread.asp?pid=20
http://snipplr.com/search.php?q=CSS+hack&btnsearch=go
http://fu2k.org/alex/css/hacks/fuzzyspecificity
CSS Hileleri (HACK)
En çok kullandığım CSS Hileleri(Hack)
Yaklaşık 3-4 senedir css ile web sayfası kodluyorum. CSS ile web sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. CSS hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında CSS ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer CSS hileleri olması idi biz farklı tarayıcılar için değil belirli tarayıcılar için kod yazmış olacaktık ki bu erişebilirlik açısından ve müşteri istekleri açısından sorun oluşturan bir durumdur.
Başta dediğim gibi 3-4 senedir CSS ile sayfa kodluyorum ve en çok kullandığım css hilelerini burada yazmamın uygun olacağını düşündüm. Çünkü birçok bu işi yeni başlayan arkadaş için önemli bir bilgi olacağını düşünüyorum. Lafı fazla uzatmadan listemiz açıklayalım.
1- Kutu Modeli ve CSS hillesi
Kutu modeli sorunları ve çözüm önerilerinden bahsettiğimiz makale ve bu konunun önemi açısından bu css hilesini başa aldık. Gerçekten birçok yerde karşılaştığımız bu sorun kullanılması en karmaşık gelen bir sorundur. Genel mantık olarak ie’nin özellikle 6 ve garip mod daki diğer tarayıcılarında farklı görünmesini engellemek için tantek çelik tarafından oluşturulan bir hiledir.
Kutu genişliği tanımlanmışsa ve padding veya kenar çizgiside tanımladığımızda uygulanan bu yöntem için yazdığımız kod aşağıdadır
Kod: 01.#icerik{
02.width:230px;
03.padding:10px;
04.margin:5px; /* Bundan sonraki kısmı ie5win sakla */
05.voice-family: "\"}\"";
06.voice-family:inherit;
07.width:200px;
08.}
09.html>body #icerik {
10.width:200px;
11.}
Sorun olan kodumuza biz sadece
Kod: 1.voice-family: "\"}\"";
2.voice-family:inherit;
3.width:200px;
4.}
5.html>body #icerik {
6.width:200px;
7.}
Bölümünü uygulamamız yeterlidir. Daha sonra eğer genişlik ise genişliği yükseklik ise yüksekliği ayarlamamız gerekir. Daha sonra html>body #icerik kısmından #icerik yerine kendi nesne adımızı yazmalıyız.
2- Float uygulanmış nesnelerin kapsayamama sorunu
Aslında clearfix olarakta adlandırılan bu sorun bir çok yerde başımıza dert olur. Alıştıktan sonra hemen uygular ve geçeriz.
Sorunumuzun genel tanımı Float uygulanmış bir elementi içeren kapsayıcı element içeriğine göre genişlememesidir.
Kodumuz;
Kod: 01..kapsul:after {
02.content: ".";
03.display: block;
04.height: 0;
05.clear: both;
06.visibility: hidden;
07.}
08.
09..kapsul {display: inline-block;}
10.
11./* IE-mac de bu bolumu sakla \ */
12.* html .kapsul {height: 1%;}
13.
14..kapsul {display: block;}
15./* IE-mac bu bolumu saklam artik */
Bu kodda .kapsul yerine kendi nesne ismimizi yazmamız yeterlidir.
3. IE6′un Tekrarlayan Karakter Sorunu
Bu hata birden fazla float uygulanmış iç içe elementlerde meydana gelir. Son float uygulanmış elementin son karakterleri tekrarlar. Soruna nedeni html yorum satırlarıdır ve çözüm için
Kod: 1.<!--[if !IE]>Yorumunu buraya yaz <![endif]-->
Kodunu yazarız. Ben burada yorum yazarken bu sorunla karşılaşabilirim diye tüm yorumlarımı bu şekilde yazarak bu sorundan kaçınmaya çalışıyorum.
4. IE6′nın min-height Sorunu
Son zamanlarda gelen işlerde çok rastlamam nedeni ile bu listeye son anda ilave ettim. IE6′nın desteklemediği min-height özelliği için
Kod: 1.min-height:500px;
2.height:auto !important;
3.height:500px;
yazmamız yeterli.
Bunun dışında CSS Derslerindeki sayfasındaki CSS Problemleri ve Çözüm Önerileri kısmında birçok problem görünse de yukarıda saydıklarım problemlerle çok sık karşılaşıyorum. Bu sorunlarla karşılaştığımda her defasında siteye girip bu kodları kopyalamak sorun oluyor, bu nedenle Adobe Dreamweaver’ın Snippets Aracı ile bu sorunu giderdim.
Dreamweaver’da Snippets eklemek çok basit. İlk olarak eğer açık değilse Snippets penceresini açmak için üst menüden Window -> Sineppets veya shift+F9 kısayolu ile açabiliriz. Açtıktan sonra farenin sağ tuşuna basarak New Sineppet tıklayalım
Açılan pencerede Name kısmına ismini yazalım(Örne: kutu hilesi) Insert Code kısmına da kodumuzu ekleyelim.
Evet kodumuzu eklemiş olduk. Bu şekilde devamlı kullandığımız kodları Sineppets penceresine ekleyerek kolaylık sağlayabiliriz.
Daha sonra kod yazarken bu kodlara ihtiyaç duyduğumuzda
Hemen bu pencereden ilgili başlığa çift tıklayarak kodumuzun içine ekleyebiliriz.
Hepsi ve daha fazlası: www.interturko.tr.gg
Sitemizede bekleriz... |
Tüm tarayıcılar için CSS Düzeltmeleri(Hack) 
