Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj29.04.2009, 19:54 (UTC)    
Mesaj konusu: CSS(Hack)Tüm css hileleri buraya...

Arrow Tüm tarayıcılar için CSS Düzeltmeleri(Hack) Very Happy

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ı

Kod:
1.* html {}


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

Kod:
1.html>body {}


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

Arrow CSS Hileleri (HACK) Very Happy

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...
Mesaj30.04.2009, 09:38 (UTC)    
Mesaj konusu: Arkadaşlar emeğe saygı en azından bir yorum yazın

Arkadaşlar emeğe saygı en azından bir yorum yazın.İyi veya kötü farketmez
Mesaj30.04.2009, 09:42 (UTC)    
Mesaj konusu:

emeğe saygı her ne kdr bişe anlamasamda:d
Mesaj30.04.2009, 09:50 (UTC)    
Mesaj konusu: Anlamayacak bir şey yok

Anlamayacak bir şey yok arakadaş çok net ve düzgün anlatmış.Çok teşekkürler
Mesaj30.04.2009, 09:54 (UTC)    
Mesaj konusu:

Teşekkürler
Mesaj30.04.2009, 09:58 (UTC)    
Mesaj konusu: Çok teşekkürler

Çok teşekkürler
Mesaj30.04.2009, 10:00 (UTC)    
Mesaj konusu: Gerçekten çok güzel bir paylaşım

Gerçekten çok güzel bir paylaşım
Mesaj30.04.2009, 10:02 (UTC)    
Mesaj konusu: Çok yararlı bir paylaşım.Çok çok teşekkürler

Çok yararlı bir paylaşım.Çok çok teşekkürler
Mesaj30.04.2009, 10:04 (UTC)    
Mesaj konusu: Böyle güzel paylaşımların devamını bekliyoruz.

Böyle güzel paylaşımların devamını bekliyoruz.
Mesaj30.04.2009, 10:06 (UTC)    
Mesaj konusu: Tek kelimeyle harika

Tek kelimeyle harika
Mesaj30.04.2009, 10:11 (UTC)    
Mesaj konusu:

helal olsun Very Happy
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu