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

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.

https://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 { }

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Basit Youtube Açılır Menü Ücretsiz indir 0

Bugün gördüğüm güzel bir açılır menü kaydettim sizlerle paylaşmak için. Youtube’de bu tarz bir menü olduğunu söylemiş ancak ben göremedim fazla kullanmadığımdan olabilir. Her neyse sizde bu menüyü indirip deneyin çok güzel.

https://1.bp.blogspot.com/-r-GUO4hWaJ4/UXmcEVXix0I/AAAAAAAARDE/D-ThQy2VMzk/s1600/acilir-menu.jpg

Simple Youtube Menu Effect

Eğitici olarak yapılmış bir menü bu arkadaşlar. Sizde bunun nasıl yapıldığını altta verdiğim linkten araştırabilirsiniz. Çok zor bir olayı yok aslında mantığı anlatılıyor.

Ufak bir jquery fonksiyonuda var onuda çalıştırdınızmı tamamdır.

Demo / Download

Most Popular Topics

Editor Picks