İş Tanımı
- Ana ve altsayfalarda bulunan flash teknolojisi ile hazırlanmış Mortgage Bul, İş Mortgage Bul, Hesap Yap, Faiz Oranları, Haberler ve Fırsatlar modülleri arama motoru optimizasyonu, flash teknolojisini desteklemeyen mobile araçlar üzerinde çalışması ve daha kolay bir yönetim sağlamak amacı ile tekrardan hazırlandı.
http://www.garantimortgage.com/
İş Tanımı
- Ana ve altsayfalarda bulunan flash teknolojisi ile hazırlanmış Mortgage Bul, İş Mortgage Bul, Hesap Yap, Faiz Oranları, Haberler ve Fırsatlar modülleri arama motoru optimizasyonu, flash teknolojisini desteklemeyen mobile araçlar üzerinde çalışması ve daha kolay bir yönetim sağlamak amacı ile tekrardan hazırlandı.
Iframe varsayılan olarak atamış olduğumuz yükseklik ve genişlik değerinden daha yüksek yada geniş bir içerik ile karşılaştığında scroll çıkartarak bize içeriği gezme imkanı sunar. Fakat IE6 burada bize yine bir oyun oynuyor ve içeriğin yüksekliği iframe için atamış olduğumuz yüksekliği aştığı anda iframe’in genişliği iframe için atamış olduğumuz içerikten daha düşük olduğu halde yatayda scroll çıkartıyor. Karışık bir tanımlama oldu ama umarım hatanın ne olduğunu anlatabilmişimdir.
Çözüm ise basit. Iframe içinde açılacak olan sayfamızın <head> tagları içinde aşağıdaki style tanımlamasını eklememiz sorunun çözülmesi için yeterli olacaktır.
<!--[if IE 6]>
<style type="text/css">
html {overflow-x:hidden}
body {overflow-x:hidden}
</style>
<![endif]-->
Yukarıdaki style tanımını incelerseniz başında ve sonunda benzer bir tanım olduğunu görüceksiniz. Bu tanımlamayı kullanmamın nedeni eklemiş olduğum kuralın sadece IE6 için işletildiğine emin olmak ve bu hataya rastlanmayan diğer tarayıcıları etkilememesini sağlamaktır.
]]>İş Tanımı
- Iphone ve diğer mobile telefonlar olmak üzere iki farklı versiyonu hazırlanan sitenin Kullanıcı Arabiriminin Geliştirilmesi (XHTML, CSS, Javascript)
http://mobil.mercedes-benz.com.tr/
İş Tanımı
- Iphone ve diğer mobile telefonlar olmak üzere iki farklı versiyonu hazırlanan sitenin Kullanıcı Arabiriminin Geliştirilmesi (XHTML, CSS, Javascript)
Problemin çözümü için kütüphane dosyalarında ufak değişiklikler yapmamız gerekiyor. Problemler kütüphane sahiplerine bildirilmiş ve sanırım bir sonraki sürümlerinde çözülmüş olacaktır.
Gelelim bu problemi nasıl çözüceğimize;
Bu problemi iki farklı yöntem kullanarak çözebiliyoruz. Fakat yöntemlerden biri başka problemleride meydana getirebileceğini düşündüğümden en sağlam çözüm olacağını düşündüğüm yöntemden bahsediyor olucam.
Jquery kütüphanemizin developer’lar için hazırlanmış olan versiyonunu indiriyoruz. Daha sonra return (“scrollTo” in elem && elem.document) ? // does it walk and quack like a window? kod bloğunu bularak bu kod bloğunu return (“scrollTo” in elem && elem.document && !elem.parentNode) ? // does it walk and quack like a window? ile değiştiriyoruz. Tabiki developer sürümünün boyutu yüksek olduğundan bu sürümünü sıkıştırarak kullanmak isteyebilirsiniz. Burada yardımınıza Closure Compiler yetişiyor. Yapmanız gereken tek şey http://closure-compiler.appspot.com/home sitesine girmek ve sol taraftaki alana kod bloğunu yapıştırıp Compile düğmesine basmak. Daha sonra sağ taraftaki sonucu kopyalayarak yolumuza devam edebiliriz.
İlgili makaleler
]]>Projenin kaynak dosyaları ile proje geliştirme aşamasında hazırlanan sayfaları karşılaştırdığımda, projenin kaynak dosyaları içinde olmayan fakat geliştirme ortamında farklı ihtiyaçlar için kullanılan CSS dosyaları olduğunu farkettim. 16 CSS dosyası olması gereken proje, geliştirme ortamında sonrasında 36′ya çıkmıştı.
Problemin kaynağının Internet Explorer üzerindeki CSS dosya kısıtlamalarından kaynaklandığını çok geçmeden anladım. Peki nedir bu kısıtlamalar, neler yapabiliriz kısaca bahsetmek istiyorum.
CSS Dosya Limitleri Hakkında Kısa Bilgi
Internet Explorer geliştiren ekip bir sayfa içinde <link /> veya @important url(‘sablon.css’) yöntemi kullanarak maksimum 32 harici CSS dosyası eklememize izin verir. Eğer bu sayının üzeririnde CSS dosyasına sahipsek bu dosyaları kesinlikle yüklemeyecektir. Bu limit tüm Internet Exlorer (6,7,8) sürümleri için geçerlidir. Bunun dışında pek bilinmeyen sınırlamalardan biride Internet Explorer içinde yüklenecek CSS dosyasının boyutunun (288 KB) geçemiyeceğidir.
Limitler İçin Çözüm Önerileri
Sayfamızda 36 CSS dosyası var ve hepsinede ihtiyamız olduğunu varsayalım. Peki bu durumda ne yapmamız gerekiyor?
1 – CSS dosyalarını gruplamak
Yeni CSS dosyaları oluşturabilir yada sık kullandığımız birden fazla CSS dosyası içine diğer CSS dosyalarını @import url(stil.css) yöntemi kullanarak gruplayabilirsiniz.
grup1.css
-----------------------------
@import url("1.css");
@import url("2.css");
...........
@import url("16.css");
grup2.css
-----------------------------
@import url("17.css");
@import url("18.css");
...........
@import url("36.css");
2 – CSS dosyalarını birleştirmek
CSS dosyalarını bölümlendirmenin en büyük nedenlerinden biri diğer sayfalarda kullanılmayacak olan stil tanımlamarını dosya içinden ayırarak hem CSS dosya boyutlarını düşürmek, hemde dosya yönetimini kolaylaştırmaktır.
Fakat çok fazla parçaya ayrılan CSS dosyalarının yönetimi bir süreden sonra amacı dışına çıkacak, yönetim zorlaştığı gibi aynı tanımlamara sahip bir çok CSS dosyasına da sahip olacaz. Tarayıcı üzerindeki dosya istek sayısınıda unutmayalım. Ne kadar çok istek sunucu tarafına o kadar yük demektir. Sonuç olarak yapmamız gereken benzer özelliklere sahip CSS dosyalarını birleştirmek ve münkün olduğunca benzer tanımlamaları aynı CSS dosyası üzerinde tutmak olacaktır.
3 – Gereksiz CSS dosyalarını kaldırmak
Malum dosya sayısı arttıkça yönetim zorlaşacağından aynı stil kurallarını içeren birden fazla CSS dosyasına sahip olacaksınız. Bu tarz bir sorun ile karşılaştığınızda elinizdeki dosyalarını tekrar gözden geçirebilir ve artık işinize yaramayan yada fazlalık olan dosyalarıda kaldırabilirsiniz.
]]>