bildirgec.org

css3 please ile tüm tarayıcılarda css3 kodları uyumluluğu

Büyük bir heyecanla beklememize karşın tüm tarayıcıların desteklemesi için uzun süreer beklememiz gerekecek olan CSS3‘ün tasarım dünyasına getirdiği bazı yenilikleri şimdiden kullanabileceğinizi biliyor muydunuz? Evet belki hepsinden haberiniz vardı, belki bir kısmını kullanıyorsunuz ama CSS3 Please! uygulaması ile tüm tarayıcılarda bazı CSS3kodlarını şimdiden kullanabilmek mümkün.

CSS3 Clean uygulaması yuvarlak köşeler , gölge (shadow), renk geçişi (gradient), RGBA, obje çevirme (rotation) ve font-face kullanımı için tüm tarayıcılarla uyumlu css kodunu otomatik olarak oluşturuyor.

bir site tasarımcısının en büyük dertlerinden biri de yaptığı tasarımın farklı internet tarayıcılarında farklı şekillerde görülmesidir. bu sebeple genellikle tasarımcılar, tasarımın hemen her evresinde tasarımlarının nasıl göründüğünü bilmek ister. bu konuda tarayıcı test araçlarından faydalanmak mümkün.

Browsershots

konunun en bilinen aracı sanırım. sitenizi sisteme gönderdikten sonra farklı tarayıcılarda nasıl göründüğüne dair ekran görüntülerini birkaç dakika sonra alabilirsiniz.

BrowserCam

farklı işletim sistemleri ve farklı tarayıcılardan ekran görünütüsü alan bir site. ücretli olmasına karşın 1 günlük deneme sürümü de mevcut.

NetMechanic Browser Photo

biraz pahalı olmasıyla birlikte size yardımcı olabilecek bir diğer servis.

Litmus

limitli ücretsiz versiyonunun yanında ücretli bir servis daha.

web tasarımcıların en büyük sorunlarından biri de çapraz tarayıcı sorunlarıdır. adobe firması bu sorunun çözümüne yardımcı olabilmek için online olarak çapraz tarayıcı testleri yapabileceğiniz adobe browserlab sistemini geliştirmiştir. buyrun hep birlikte bu sistemi daha detaylı bir şekilde inceleyelim…

sisteme adobe id ile bağlandıktan sonra test edeceğiniz özellikleri beliryip sitenizin resim halinde, belirlediğiniz özelliklerdeki tarayıcı ve işletim sisteminde nasıl göründüğüne bakabiliyorsunuz.

Desteklediği tarayıcı ve işletim sistemleri:

Eğer web tasarımı ile uğraşıyorsanız @font-face tanımlamaları ile istediğiniz fontları sitenizde kullanmanın olağan olduğunu biliyorsunuzdur. OTF ve TTF gibi değişik uzantılı fontları birçok tarayıcıda sorunsuz olarak gösterebiliyorsunuz. Fakat iş bu fontları Internet Explorer’da kullanmaya gelince malesef tahmin edeceğiniz gibi yine bir sorunla karşı karşıya kalıyoruz.

@font-face desteği aslında Internet Explorer 4’ten beri Microsoft’un desteklediği bir deklerasyon. Fakat bu destekleri biraz tutucu. Çünkü IE serisi sadece EOT (Embedded Open Type) fotmatlı fontları desteklemekte. Bu formatın seçilmesinin nedeni ise bu formatlı font dosyalarının kopyalanarak kişisel kullanıma izin vermemesidir.

Bu yazıda sevdiğiniz fontları nasıl EOT formatına çevireceğinizi ve sitelerinizde nasıl kullanacağınız konusunda ipuçlarını kullanarak sitelerimizin albenisini arttıracağız.

Tarayıcılar ve desteklenen formatlar

Birinci Adım: Ücretsiz bir font seçin
Internet’te birçok ücretsiz font sunan site var. Lisans problemleri ile karşılaşmak istemiyorsanız tamamen ücretsiz lisansla yüklenmeye sunulan fontları bularak sitelerinizde kullanmaya bakın. Bu tarz fontların sıralandığı fontex.org mutlaka göz atılması gereken kaynaklardan.

CSS’e yeni başlayanlar reset.css dosyasının önemini tam olarak kavrayamamış olabilirler. Herbir tarayıcı (browser)’nın kendi “default” (varsayılan) netrenderer‘ı olduğunu öğrenmeden önce kendisini “buradaki boşlukta neyin nesi ?” gibi sorularla boğuşurken bulacaktır. Bunu gibi baş ağrılarından kurtulmak için kendi reset.css dosyanızı yazmanız gerekir. Reset.css dosyasını kendiniz yazmasanız da
buradan(YUI), buradan(Eric Meyer) ve buradan(David Walsh) bulabilirsiniz.

Web development (front-end) ile uğraşan hemen hemen herkes internet explorer sürümlerinin uyumsuzluğundan ötürü inanılmaz sıkıntılar çekiyordur. Hele ki yeni bilgisayarlar ile dayatılan vista yüzünden standalone çalışan dışı ie6 kernel versiyonu ie7 olan dolayısıyle yanıltıcı sonuçlar almamızı sağlayan gereksiz programlarla cebelleşme sıkıntımızdan hiç bahsetmeyeceğim.

Bugüne kadar bu sorunu en aza indirgemek için içerisinde ie 5-6-7-8 sürümlerini barındıran İE TESTER programını kullanıyordum. Tabi programın barındırdığı bir dünya BUG yüzünden illet etmiş durumdaydım 🙂

Internet Explorer’la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+’ya odaklandım. Her ne kadar IE6’nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6’nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

• Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
• CSS’nizin en başında daima sıfırlama (CSS RESET) kullanın.
• Firefox’ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari’de ise text-shadow: #000 0 0 0 kullanın.
• Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
• Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
• BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
• Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
• CSS3 seçicilerini kullanmayın.
• Alpha’yı yüklemediyseniz saydam PNG kullanmayın.

css konusuyla ilgiliyseniz muhtemelen css reset (sıfırlama) tekniğini duymuşsunuzdur. Daha önce css sıfırlama dosyası yazısında da bahsettiğim bu teknik, web sitenizin cross browser uyumluluğu açısından çok yararlı bir tekniktir.

Fakat internette bu konuda araştırma yapınca farklı css reset teknikleriyle karşılaşabiliyorsunuz. İşte tam bu sayfada bunların en popülerleri bir araya toplanmış ve kısa kısa açıklaması yapılmış. incelemenizi tevsiye ederim.

Tasarlamış olduğunuz bir web sitesinin farklı işletim sistemlerinde ve web tarayıcılarında nasıl göründüğüne canlı olarak bakmak ister misiniz? O zaman Cross Browser Testing servisi tam size göre.

Bu servis ile kendi belirlediğiniz bir işletim sistemine uzak masaüstü erişimi kurmuş oluyorsunuz. Bağlandığınız işletim sisteminde ise hazır olarak Firefox, Internet Explorer, Safari… gibi popüler web tarayıcıları bulunuyor. Bunlardan herhangi birisini çalıştırarak da web sitenizi test etmeye başlıyorsunuz.

openWYSIWYG, ne görürsen onu alırsın (WYSIWYG) mantığında çalışan bir editör. En büyük özelliği cross-browser olması yani tüm web tarayıcılarıyla çalışabilmesi. Diğer önemli özelliği ise muhteşem bir hızda yüklenmesi ve çalışması (gerçekten çok hızlı).

Tek bir JavaScript dosyasından oluşan openWYSIWYG, son derece kolay kuruluyor. Web sayfanızın asp, php veya jsp olması da farketmiyor. Web sayfanıza yalnızca 1-2 satır kod ekleyerek textarea alanlarında openWYSIWYG kullanabilirsiniz. Yazılarınızı her zamankinden daha hızlı ve kolay bir şekilde biçimlendirebilirsiniz.