Forumlar
Yeni Mesajlar
CerezExtra
EĞLENCE ↓
Şans Kurabiyesi
Renk Falınız
ÇerezRADYO
Sevgiliye Özel
ÇerezDERGİ
Hızlı Okuma Testleri
Pratik Çözümler
Yeniler
Yeni Mesajlar
Yeni ürünler
Yeni kaynaklar
Son Aktiviteler
İndir
En son incelemeler
Dükkan
Giriş
Kayıt
Yeniler
Yeni Mesajlar
Menu
Giriş
Kayıt
Uygulamayı yükle
Yükle
Forumlar
Bilgisayar & Cep & Teknoloji
WebMaster Bölümü
WordPress
Css hatalarını düzeltiniz - Css optimize
JavaScript devre dışı bırakıldı. Daha iyi bir deneyim için, devam etmeden önce lütfen tarayıcınızda JavaScript'i etkinleştirin.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Konuya cevap yaz
Mesaj
<blockquote data-quote="YoRuMSuZ" data-source="post: 330686" data-attributes="member: 1"><p>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.</p><p></p><p>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.</p><p></p><p>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...</p><p></p><p>[CODE]</p><p>[COLOR="red"]background:#FFFFFF;[/COLOR] background:#FFF;</p><p>[COLOR="red"]background:#336699;[/COLOR] background:#369;</p><p>[COLOR="red"]border: 1px solid #C0C0C0;[/COLOR] border:1px solid silver;</p><p></p><p>[COLOR="red"]margin: 0px auto 0px;[/COLOR] margin:0 auto;</p><p>[COLOR="red"]margin: 0px 10px 0px 0px;[/COLOR] margin:0 10px 0 0;</p><p>[COLOR="red"]margin: 0px 0px 0px 0px;[/COLOR] margin:0;</p><p>[COLOR="red"]padding: 0px 0px 0px 0px;[/COLOR] padding:0;</p><p>[COLOR="red"]padding: 8px 15px 7px 15px;[/COLOR] padding:8px 15px 7px;</p><p>[COLOR="red"]padding: 4px 10px 4px 10px;[/COLOR] padding:4px 10px;</p><p>[COLOR="red"]height: 0px;[/COLOR] height: 0;</p><p></p><p>[COLOR="red"]font-weight: normal;[/COLOR] font-weight:400;</p><p></p><p>[COLOR="#2e8b57"]/* Ayni degerleri tasiyan kod bloklarini birlestirin. Ornek: */</p><p>/* yanlis */[/COLOR]</p><p>[COLOR="red"]#cerceve {</p><p>margin:0;</p><p>}</p><p></p><p>#blok {</p><p>margin:0;</p><p>}[/COLOR]</p><p></p><p>[COLOR="#2e8b57"]/* dogru */[/COLOR]</p><p>#[COLOR="#4169e1"]cerceve[COLOR="black"],#[/COLOR]blok[/COLOR] {</p><p>margin:0;</p><p>}</p><p></p><p>[COLOR="#2e8b57"]/* Gereksiz cerceve degerlerini birlestirin. Ornek: */</p><p>/* yanlis */[/COLOR]</p><p>[COLOR="red"]#cerceve {</p><p>border-top:1px solid #E6E6E6;</p><p>border-right:1px solid #E6E6E6;</p><p>border-bottom:1px solid #E6E6E6;</p><p>border-left:1px solid #E6E6E6;</p><p>}[/COLOR]</p><p>[COLOR="#2e8b57"]/* dogru */[/COLOR]</p><p>#[COLOR="#4169e1"]cerceve[/COLOR] {</p><p>border:1px solid #E6E6E6;</p><p>}</p><p>[/CODE]</p><p></p><p><em><span style="font-size: 12px">[Alıntılarda kaynak gösterilmesi gerekir ...]</span></em></p></blockquote><p></p>
[QUOTE="YoRuMSuZ, post: 330686, member: 1"] 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... [CODE] [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; } [/CODE] [I][SIZE=3][Alıntılarda kaynak gösterilmesi gerekir ...][/SIZE][/I] [/QUOTE]
Alıntıları ekle...
İsim
Spam kontrolü
Sarı kırmızı renkleri ile ünlü futbol takımımız?
Cevapla
Forumlar
Bilgisayar & Cep & Teknoloji
WebMaster Bölümü
WordPress
Css hatalarını düzeltiniz - Css optimize
Top