Ali OKTAY » CSS – XHTML

HTML Etiketleri için Varsayılan CSS Değerleri

Ali OKTAY — Mon, 06 Sep 2010 07:56:33 +0000

html deki her tag kendi varsayılan css değerleriyle gelmektedir. html etiketleri tanımamız için bu değerleri öğrenmekte fayda var. Ayrıca her tarayıcı için bu değerler değişebilmekte.

http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm Bu adreste her tarayıcı ve sürümü için varsayılan değerleri belirtmişler.

Ayrıca w3 te de şöyle bir dökümana rastladım: http://www.w3.org/TR/CSS2/sample.html

Her Tarayıcı İçin Ayrı Css

Ali OKTAY — Sun, 05 Sep 2010 10:14:27 +0000

Arayüz geliştiricilerin en çok sıkıntı yaşadığı konu tarayıcı farklılıkları; özellikle de internet explorer fazlasıyla başa bela. Bu farkları ortadan kaldırmak için çeşitli yöntemler kullanıyoruz. Genelde de farklı tarayıcılar için farklı css kodları yazılmakta.
Her tarayıcı için ayrı css kodları yazmamıza olanak veren hack lerin listesi:

***** Selector Hacks ******/

/* 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  }

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

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

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

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

/***** Attribute Hacks ******/

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

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

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

Bir diğer yöntemde javascriptin imdada yetişiyor: http://www.huseyinemanet.com/web-browser-control-tarayiciya-ozel-kod-yazmak.html

Tarayıcı ekranı dışında arkaplan gözükmeme problemi

Ali OKTAY — Sun, 05 Sep 2010 08:41:38 +0000

Başlık yeterince açıklayıcı olmadı. Bir siteyi tarayıcı boyutlarımız küçükken açtığımızda sağa ve sola siteyi kaydırabilmemiz için aşağıda kaydırma çubuğu çıkar. Sorun bu kaydırma çubuğunu kullandığımızda ilk başta gözükmeyen yerlerin arkaplanlarının boş çıkması. Bu problem Facebook anasayfasında bile mevcut.

Tam olarak bir çözüm bulamamış olsamda, display: table; css kodunu sorun yaşanan arkaplanın bulunduğu css seçicisine eklemeliyiz.

Internet Explorer 6 PNG Şeffaflık Sorunu

Ali OKTAY — Sun, 05 Sep 2010 07:44:35 +0000

Bana göre en kullanışlı yöntem: http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/
Bu yöntemde internet explorer 6 için özel oluşturulmuş css dosyasına bahsi geçen css kodlarını ekleyip xhtml ve css de bazı düzenlemeler yaparak istediğimiz sonuca ulaşıyoruz. Kötü yanı transparan png bulunduran tüm class ve ID leri tek tek belirtmek gerekiyor. Buna rağmen sadece css üzerinden düzenleme yapıldığı için son projemde kullandığım bundan sonra da kullanmayı tercih edeceğim yöntem bu olacaktır.

En iyi yöntem: http://www.dillerdesign.com/experiment/DD_belatedPNG/
Bu yöntemde ise background-position özelliği desteklenmiş. Diğer yöntemlerin çoğunda bu destek mevcut değil.

Diğer beğendiğim yöntemler:
http://www.twinhelix.com/css/iepngfix/ (background-position destekliyor)
http://labs.unitinteractive.com/unitpngfix.php
http://jquery.andreaseberhard.de/pngFix/ (jQuery)

Fırsat bulursam ilk iki yöntemin kullanımlarını da anlatacağım. Şimdilik bu kadar…