‘yazıcı’ etiketi için sonuçlar
CSS İpucu 18: Optimizasyon İçin CSS Medya Dosyalarını Birleştirmek
Şubat 16th, 2009 • 4 yorum CSS, XHTML
Etiketler: birleştirme, CSS, firebug, Firefox, optimize, yazıcı, YSlow
Bir çok web kod yazarı için sayfaların yavaş açılması büyük bir sorundur. Bu sorunun çözümü için çeşitli metotlar uygulanır. Farklı araçlar ile testler yapılır çözümler üretilmeye çalışılır. Sonuçta en kararlı hale ulaşılmaya çalışılır.
Bende bir test aracı ile(Firefox – FireBug – YSlow) test ediyorum. Test ettiğim siteler HTTP isteklerinin çokluğundan dolayı düşük puan alıyor. Fazla sayıda css ve javascript dosyasının eklenmesi bu soruna neden oluyor. Bunun için en kolay ve basit yöntem css ve js dosyalarını birleştirmekten geçiyor.
Genelde projelermizde css dosyalarımızı genel stil için ve yazıcı için olmak üzere ikiye ayırıyoruz.
<link rel="stylesheet" href="/style/iskelet.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/style/yazici.css" type="text/css" media="print" />
Normal ve çıktı almak için bunları bir css dosyasında birleştirerek HTTP istek sayısını azaltabiliriz.
<link rel="stylesheet" href="/style/iskelet.css" type="text/css" />
gibi iskelet.css içeriğinin yapısı ise aşağıdaki gibi olacaktır.
/* all media */
@media all
{
body { color:#666; font:13px arial, helvetica, sans-serif; padding:20px 0 30px 0; }
}
@media print
{
body { color:#000; font:12px arial, helvetica, sans-serif; padding:0; }
}
şeklinde yaparak css dosyalarımızı tek dosya içerisinde toplayabiliriz.
Daha fazla sayıda css dosyası kullanmamız durumunda ise sunucu veya istemci taraflı kod yardımı ile css veya js dosyalarımızı tek bir dosya gibi gösterebiliriz. Bu konuya burada girmeyeceğim. Konu ile alakalı çalışmaların linklerini aşağıda veriyorum.
Kaynak
- http://davidwalsh.name/combine-css-media-styles-file
- http://developer.yahoo.com/performance/rules.html#num_http
- http://www.vulgarisoip.com/2007/06/21/minify-your-external-javascript-and-css-with-php/
- http://www.websiteoptimization.com/speed/tweak/http/
- http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
- http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
- http://www.sitepoint.com/blogs/2007/04/10/faster-page-loads-bundle-your-css-and-javascript/
- http://www.jaisenmathai.com/blog/2008/02/27/speed-up-apache-how-i-went-from-f-to-a-in-yslow/
- http://www.cloudfour.com/77/easy-steps-to-speedup-your-wordpress-blog/
CSS’de Çıktı alma (Print)
Temmuz 28th, 2006 • 51 yorum CSS
Etiketler: CSS, çıktı-alma, import, print, yazıcı
Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır.
Bazı siteler ki, çoğunlukla önemli bazı haber siteleri her sayfanın bir de çıktıya uygun hallerini de hazırlarlar. Ancak bu çok uğraş gerektiren bir durumdur ve de zaman alacak bir iştir. Kullanışlı değildir.
CSS bu duruma el atarak basit bir çözüm getirmiştir. Okumaya devam edin »
