Internet Explorer‘ın PNG ile olan transparan problemini sağır sultan bile duydu sanırım. Ama hâlâ etkili bir çözüm bulunabilmiş değil. Bulunmasını da beklemiyorum; IE7 ile beklenen CSS ile sözde uyumluluk tasarımcıları hayal kırıklığına uğrattı.
PNG ile olan sorunu aşmak için en bilindik yöntem aşağıdaki gibi #header{
background:url('header.png');
height:45px;
width:770px;
}
* html #header{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='header.png', sizingMethod='scale');
background-image: none;
}
kısa kolay bir yöntem ama PNG kullandığınız her bölüm için ayrı ayrı yazmanız gerekiyor. Angus Turnbull daha kolay bir yöntem bulmuş. Yapmanız gereken oldukça basit;
- ilk olarak iepngfix.htc dosyasını CSS dosyanız ile aynı klasöre yerleştirin.
img, #header, .class, blockquote { behavior: url(iepngfix.htc); }
kullanarak istediğiniz elemente ya da *{ behavior: url(iepngfix.htc); } kullanarak tüm PNG kullandığınız bölümlere uygulayabilirsiniz.
Buradan demosuna ulaşabilirsiniz. Gördüğüm tek sorun tekrar eden arkaplan resimlerini sadece tek resim olarak göstermesi.
Kendini web geliştirme ile ilgili düşünen hiç kimsenin şimdiye kadar Firefoxu duymadığını sanmıyorum. Duymadığını hatta kullanmadığını söylemek bile o kişinin işini iyi yaptığı konusunda şüphe duymama sebep olur.
Firefoxu bu konuda asıl cazip hale getiren ise eklenileri, web developer eklentisi vazgeçilmezlerimden. Yeni vazgeçilmez adayı Firebug 1.0, daha önce eski versiyonun kullanıyordum işimi kolaylaştıran en güzel yanı javascript ve CSS hatalarını çok rahat tesbit etmemi sağlamasıydı. Yeni versiyonu ise olayı çok daha üst seviyelere taşımış.
Firebug 1.0 ile gezdiğiniz hersayfanın HTML ve CSS kodlarını değiştirebiliyorsunuz. Hangi CSS seçicisinin hangi HTML elementlerini etkilediğini görsel olarak görebeliyor olmak ve CSS kodu tamamlaması CSS kodlamayı çocuk oyuncağı haline getiriyor.
Eski versiyonunda eklenti tarayıcını bir parçası gibiydi artık yeni bir pencerede açabiliyorsunuz.
Kısaca Firebug bir eklentiden çok daha fazlası. Hâlâ beta olması sebebiyle bazı eksikleri var ama çok daha iyi bir hale geleceğini tahmin ediyorum.
Buyrun bir de kendiniz deneyin.
“Dur hele bunlar da neyin nesi?” diyenleri duyabiliyor gibiyim zira hiçbir türkçe sitede bahsi geçmemiş olması beni oldukça şaşırttı. moo.dom ve Behaviour farklı fakat aynı iş için yazılmış 2 farklı javascript kodu. Yaptıkları iş web 2.0 ile ilgilenen herkesin ekmeğine yağ sürecek cinsten. Şöyleki az çok javascript ile ilgilenen herkes bilir ki javascript kodumuzu ya script tagları arasına yazar yada farklı bir .js dosyasına yazıp HTML dosyamıza ekleriz ve yazdığımız kodu tetiklemesi için onclick(); gibi fonksiyonları kullanırız. Kullandığımız bu fonksiyonlar HTML kodu içinde olamak zorundadır javascript kodumuz farklı dosyada olsa bile.
İşte moo.dom ve Behaviour bu fonksiyonları HTML kodundan ayırmamıza olanak sağlıyor. Bunu yaparken de CSS tarzı seçim metodu kullanıyor. (.class #id veya HTML elemanı adı ile). Yani HTML kodunuza hiç javascript karıştırmadan istediğiniz eleman yada elemanlara tetikleyiciler (event listeners) ekleyebilirsiniz. Gerçekten harika. CSS ve XHTML kodlayanlara gün doğdu diyebilirim çünkü bu scriptleri kullanmak için HTML kodunuzu anlamsal olması gerekiyor. Her istediğiniz elemana rahatça erişebilmelisiniz. Bu da her elemanı iyi tanımlamakla oluyor.
Benim kişisel seçimim moo.dom’dan yana. prototype.js kütüphanesini kullanıyor bu ekstradan 50kb bir yük demek diye düşünebilirsiniz. Fakat zaten prototype’a ihtiyacınız olacağı için (ilerde mutlaka kullanacağınıza eminin) sorun olmayacaktır. Ayrıca lite verisiyonu da mevcut. Kod yapısı olarak behaviour’dan daha basit.
Gerisi bize kalmış :)
İnternet ortamında büyük harfle yazmak bağırmak anlamına geliyor. (en azından böyle bir anlayış var)
Kişisel olarak ben de bağırma olarak algılıyorum. Hiç değilse estetik olarak hoş gözükmüyor.
Bir de büyük harfleri kullanarak kodlayan insanlar var. Acaba müşterilerine çok mu kızdılar da büyük büyük yazıyorlar :)
İşte asıl sorun bu insanlarla XHTML arasında, XHTML kendine bağırılmasına izin vermiyor. Yani geçerli bir XHTML kodunda büyük harflerle tagları yazamazsınız. Eğer MIME type olarak application/xhtml+XML belirtilmişse tarayıcınız büyük harflerle yazmanıza hemen müdahale edecektir. Aslında güzel bişey çünkü kodunuzun geçerli olduğunu hemen görebiliyorsunuz ve sizi geçerli kod yazmaya zorluyor.
Problem: XHTML kurallarına uygun kodunuzu yazdınız tasarımınız hazır ama ne varki gelen içerik geçerli XHTML değil.
Çözüm: Herkes XHTML kodlasın (tamam herkes kodlamasın ama en azından bu işin içinde olanlar biraz daha sakin olup küçük karakterlerle yazsın)
Çözümü beğenmeyenler buraya bir göz atsın. Ha bir de sakin olun :)
Hatırladınız değil mi? hep böyle garip hatalar ancak IE üzerinde oluyor. Ya da buyrun garip olup olmadığına siz karar verin.
Bir web tasarımcısı için en en hoş olmayan durumlardan biri de çıkan işin farklı tarayıcılarda farklı farklı gözükmesidir. Sağolsun IE de buna yardımcı oluyor.. Sorun şu; float ile elementlerin sağa veya sola yaslı olmasını sağlıyoruz ama tamanen bitişik olmaması için margin ile istediğimiz yerde durmasını sağlıyoruz. Ne güzel! ama her nedense IE eğer float:right; margin-right:10px; veya float:left; margin-left:10px; gibi bir kullanımda verilen margin değerini ikiye katlıyor.
sorun 2004 ocak ayında çözülmüş daha önceleri çözülmez sanıldığı için margin yerine başka bir görünmeyen(visibility:hidden;) element ekliyorlarmış. Steve Clason çok basit bir çözüm keşfetmiş. display:inline; özelliğini eklemek olayı çözüyor.
İster istemez sorası geliyor insanın “2004’den bu yana kaç IE yaması çıktı?”
Kendini web geliştirme ile ilgili düşünen hiç kimsenin şimdiye kadar