bildirgec.org

Mümkün olduğu kadar CSS kullanılması gerektiğini öneriyoruz ve genellikle bunda da başarılı oluyoruz. Modern tarayıcıların CSS için çok iyi desteği bulunuyor, en azından anahattınızı ve sunumunuzu düzenlemek için CSS kullanmanıza yetecek kadar destek içeriyorlar. Ancak bazen bazı sayfa elementleri farklı tarayıcılar üzerinde farklı görünmektedirler. İşte bu yüzden biz de bugünkü yazımızda farklı tarayıcılarda görünen sorunları giderecek 15 jQuery çözümünün yanısıra size bazı güzel tarayıcı efektleri verecek jQuery eklentilerini listeleyeceğiz.

1. Internet Explorer’da DD_Roundies İle Yuvarlatılmış Köşeler Kullanabilmek

Ne yazık ki CSS3 border-radius şimdilik sadece Safari ve Firefox tarafından desteklenmekte olup, Internet Explorer gibi tarayıcılar üzerinde kare köşeler kullanmak zorunda kalıyoruz. DD_Roundies kütüphanesi yuvarlatılmış köşeleri Internet Explorer üzerinde sorunsuzca kulanabilmemizi sağlyor. DD_roundies, tıpkı jQuery gibi, seçicilerle birlikte çalışıyor ki bu sayede jQuery UI’nin CSS Çatı sınıflarını hedefleyerek DD_roundies’i jQuery UI üzerinde sadece birkaç satırlık kısa kodla uygulayablmemimizi sağlıyor.

• Demo Burada

Günümüzde CSS kullanmayan site sayısı gittikçe azalırken buna ters orantılı olarak gelişen CSS araçlarının sayısı da gün geçtikçe artıyor. Her yeni bir araç, CSS geliştiricilerinin projeler üzerinde harcadıkları zamanı azaltmaya ve daha verimli kodlama yapmalarını hedefliyor.

İşte tam da bu noktada Back to Essentials web sitesi, İnternet üzerindeki CSS araçlarına yönelik bir liste hazırlamış. Ben de ilgilenen bildirgec okurları için bu yazıyı yayımlama gereği hissettim. Umarım işinize yarar.

Yazıtipleri

Typetester

Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.

Em Calculator

Em Calculator, küçük bir JavaScript aracı olup genişletilebilir ve erişilebilir CSS tasarımları oluşturmanıza yardımcı oluyor. Pixel değerindeki verileri bağıl em birimlerine dönüştürüyor.

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.

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

• PositonIsEverything
• W3 Specifications

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin “position” değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente ‘position: relative’ ya da ‘position: absolute’ değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

• Z-index screencast
• W3 Specifications