Css hatalarını düzeltiniz - Css optimize

YoRuMSuZ · 8 Mys 2011

Wordpress css altyapısı ile göz dolduran bir sistem. Ancak tasarım full css olduğu için style.css adlı dosyanızın iyi optimize edilmesi son derece önemlidir. Farkında olmadan yaptığımız css hataları her ne kadar farketmeseniz de sitenizin yavaşlamasına arama botlarının sitenizi indexlerken daha yavaş davranmasına neden olabilir.

Gözden kaçan küçük hatalar bile css dosyanızın %80 oranında büyümesine neden olabilir. Aynı kod bloklarını birleştirmek, "0px" değerlerini "0" ile değiştirmek, gereksiz açıklama satırlarını silmek, aynı veya ikili karakterlerden oluşan renk kodlarını 3 haneli yazmak, margin-padding değerlerini doğru yazmak ve kod boklarındaki css değerlerini doğru sıra ile yazmak site performansınızı ve sitenizin daha stabil çalışmasını sağlayacaktır.

En sık yapılan css hataları ile ve doğru kullanımlarına örnekler verelim... Küçük bir css optimize çalışması bile css dosyanızın oldukça küçülmesini sağlayacaktır. Kod içerisinde kırmızı ile belirtilen bölümler yanlış kullanımı işaret etmektedir...

Kod:

[COLOR="red"]background:#FFFFFF;[/COLOR]		background:#FFF;
[COLOR="red"]background:#336699;[/COLOR]		background:#369;
[COLOR="red"]border: 1px solid #C0C0C0;[/COLOR]	border:1px solid silver;

[COLOR="red"]margin: 0px auto 0px;[/COLOR]		margin:0 auto;
[COLOR="red"]margin: 0px 10px 0px 0px;[/COLOR]	margin:0 10px 0 0;
[COLOR="red"]margin: 0px 0px 0px 0px;[/COLOR]	margin:0;
[COLOR="red"]padding: 0px 0px 0px 0px;[/COLOR]	padding:0;
[COLOR="red"]padding: 8px 15px 7px 15px;[/COLOR]	padding:8px 15px 7px;
[COLOR="red"]padding: 4px 10px 4px 10px;[/COLOR]	padding:4px 10px;
[COLOR="red"]height: 0px;[/COLOR]			height: 0;

[COLOR="red"]font-weight: normal;[/COLOR]		font-weight:400;

[COLOR="#2e8b57"]/* Ayni degerleri tasiyan kod bloklarini birlestirin. Ornek: */
/* yanlis  */[/COLOR]
[COLOR="red"]#cerceve {
margin:0;
}

#blok {
margin:0;
}[/COLOR]

[COLOR="#2e8b57"]/* dogru  */[/COLOR]
#[COLOR="#4169e1"]cerceve[COLOR="black"],#[/COLOR]blok[/COLOR] {
margin:0;
}

[COLOR="#2e8b57"]/* Gereksiz cerceve degerlerini birlestirin. Ornek: */
/* yanlis  */[/COLOR]
[COLOR="red"]#cerceve {
border-top:1px solid #E6E6E6;
border-right:1px solid #E6E6E6;
border-bottom:1px solid #E6E6E6;
border-left:1px solid #E6E6E6;
}[/COLOR]
[COLOR="#2e8b57"]/* dogru  */[/COLOR]
#[COLOR="#4169e1"]cerceve[/COLOR] {
border:1px solid #E6E6E6;
}

[Alıntılarda kaynak gösterilmesi gerekir ...]

YoRuMSuZ · 8 Mys 2011

Yukarıda anlatılanla dışın css dosyanızın kod bloklarına yazdığınız değerler de belli bir hiyerarşiyi izlemelidir. Doğru sıralama ile yazılmış css kodları tarayıcılar tarafından daha hızlı okunur.

Örnek olarak doğru kodlar kullanılmış ancak düzensiz sıralanmış şu css kodlarını inceleyin.

Kod:

#[COLOR="#4169e1"]ozelformat[/COLOR] {
	padding:2px 3px;
	background:#FFF;
	border:1px solid silver;
	margin:0 0 10px;
	font-weight:400;
	color:#B2265D;
	font-family:Tahoma, Arial, Verdana;
	text-decoration:none;
	width: 220px;
	height: 100px;
	font-size:11px;
}

Aynı kodların kod bloğunda doğru sıralanmış şekli...

Kod:

#[COLOR="#4169e1"]ozelformat[/COLOR] {
	background:#FFF;
	border:1px solid silver;
	font-weight:400;
	color:#B2265D;
	font-family:Tahoma, Arial, Verdana;
	text-decoration:none;
	width:220px;
	height:100px;
	font-size:11px;
	margin:0 0 10px;
	padding:2px 3px;
}

Css hatalarını düzeltiniz - Css optimize

YoRuMSuZ

Biz işimize bakalım...

YoRuMSuZ

Biz işimize bakalım...

Benzer konular