MENU

Tüm tarayıcılar için CSS düzeltmeleri yapın.

Anasayfa » CSS / CSS3 » Tüm tarayıcılar için CSS düzeltmeleri yapın.
Tüm tarayıcılar için CSS düzeltmeleri yapın.

CSS ile yeni bir web sayfası kodlarken sıkça yaşadığım bir sorun ve ben bunu tamamiyle ortadan kaldırdım sizler içinde böyle bir sorun olmaması için bu makaleyi yazıyorum. Yeni bir site yapıyorum Firefox öncelik olarak kullanıyorum ancak bazen chrome’de farklılık gösterebiliyor. İnternet explorer’da bazen değil sürekli farklılık gösteriyor :). Zaten öncelikle 1 sayfa tasarımına başlamadan önce CSS Sıfırlama dediğimiz olay yani tüm tarayıcılarda sorunsuz olması için kullandığımız sıfırlamayı kullanıyorum ancak genede problemler oluyor.

http://2.bp.blogspot.com/-0gMmmPb4gdA/T_c8eq4qWCI/AAAAAAAAIYU/E0E0zsnzv0I/s1600/codesnippets.jpg

Şimdi bu problemleri çözmenin sırası geldi her tarayıcıya özel kod yazabilirmisiniz? Evet bu mümkün.

CSS Tarayıcı düzeltmeleri

Verdiğim kodlar en güncel haldedir. Güncelleme oldukça bende burada güncelleme yapacağım emin olabilirsiniz.

Anlamadığınız kısım olursa yazın hemen yardımcı oliyim. :)


/***** Seçici ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}


/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Sadece Firefox. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }


/***** Öznitelik ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* IE6 Herşey */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, bazı durumlarda IE9 :( */
#diecinueve { color: blue9; }

/* IE7, IE8 */
#veinte { color/***/: blue9; }

/* IE6, IE7 --  !important gibi davranır */
#veintesiete { color: blue !ie; } /* ! dizisinden sonra herşey olabilir*/

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* tüm kuralların sonuca gitmeli */


min-height:300px;
//height:300px; /* Sadece E6, IE7'de eşleşir. */

selector, x:-IE7 { } /* Sadece IE7 */
selector,{ … } /* lte ie7 */
.suckyie6.someClass { … } /* lte ie6  */


/* IE6  - sadece bu karakterlerden herhangi biri*/
_ - £ ¬ ¦

/* IE6/7  - sadece bu karakterlerden herhangi biri*/
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

/* @media hacks */

/* IE6/7 only (via Keith Clarke) */
@media screen9 { }

/* IE6/7/8 (via Keith Clarke) */
@media \0screen,screen9 {}

/* IE8 (via Keith Clarke) */
@media \0screen { }

/* IE8/9 */
@media screen\0 { }

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.