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.

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.

Hayatı kolaylaştıracak CSS tekniği nasıl mı olur? İşte cevabı… CSS3 birçok yeni nesil tarayıcıda desteklenmeden önce CSS ile yapmaya uğraştığımız birçok efekt vardı. Örneğin Yuvarlak Köşeler (rounded corners) yapmak için ekstra bir imaj ya da javascript dosyası kullanmak zorundaydık. Lakin CSS3 ile beraber ,bu çok kullanılan ama yapılması biraz külfetli olan efektler, rahatça yapılmaya başlanacak. Bu yazıda CS3 desteği ile gelen ve kod yazma süresini oldukça aza indirecek efektleri göreceğiz.

1. Yuvarlak Köşeler
jquery eklentisini kullanarak, yada top şeklindeki bir imaj dosyasını CSS Sprite tekniği ile bölerek yapabildiğimiz yuvarlak köşeleri artık kısa bir kod ile yapabileceğiz.

rounded corners

border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;

2. Eleman Gölgesi
Türkçe mealini eleman gölgesi olarak telaffuz edebileceğimiz Box Shadow’u aslında jQuery‘nin dropShadow eklentisi ile kolayca yapmak mümkündü. Şimdi ise sadece 3 satırlık bir kod ile yeni nesil tarayıcılarda bu özelliği kullanmak mümkün.

Web sayfası hazırlıyorsunuz ve klasik yazı tiplerinden sıkıldınız diyelim.

Elinizde olan bir çok yazı tipi de diğer kullanıcılarda yok! Ne yapmamız gerekiyor? Kendi fontumuzu hostumuza yüklemek en güzel yol gibi.

Bunu nasıl yapıyoruz?

Aşağıdaki css kodlarını kullanarak hedefe ulaşabiliriz.

Bunları yaparken font yolunu doğru yazmaya dikkat edin.

Firefox 3.5 ile web geliştiricilerinin yüzü gülecek

Mozillatarafından geliştirilmekte olan Firefox 3.5 sürümü web geliştiricilerinin yüzünü güldürecek cinsten yenilikler ile gelmeye hazırlanıyor. Birçok gelişmekte olan web standartını destekleyecek biçimde piyasaya çıkacak olan Firefox 3.5, tasarımcıların hünerlerini sergileyebilmesi için birçok olanak sunacak.

Firefox 3.5 ile desteklenecek standartlar ve yapılacak yenilikler aşağıda listelendi.

HTML5 desteği
Daha önce yeni html5 tag’leri ve kullanım şekilleri yazısında belirtilen özelliklerin bir kısmı firefox 3.5 ile kullanılabilir olacak.

• Audio ve video tag’leri desteklenecek.
• Siteler arasında sürükle ve bırak (drag & drop) özelliği etkin olacak.

CSS cephesinde gelişmeler

• @font-face desteklenecek. Sitelerdeki font’lar ziyaretçilerin bilgisayarlarına indirilip siteler her font ile sorunsuzca görünebilecek.
• ::before ve ::after geliştirilecek
• media sorgulamaları geliştirilecek
• -moz-opacity desteği kalkacak. opacity özelliği eklenecek
• text-shadow ile yazıları gölgelendirme desteklenecek
• word-wrap özelliği eklenecek
• ziyaretçinin bilgisayarında tanımlanan link bilgilerine ulaşım için -moz-nativehyperlinktext desteği gelecek
• -moz-window-shadow desteği gelecek
• -moz-transform desteği gelecek

@Font-face ile web sitelerinizde dilediğiniz fontları özgürce kullanabilirsiniz. Eskiden beri fontların kullanımında yaşadığımız sıkıntıları aşmak için atmadığımız taklalar kalmamıştı. Firefox’un da 3.1 sürümünden sonra desteklemeye başlayacağı font-face, artık bizleri büyük bir sıkıntıdan kurtaracağa benziyor. Internet Explorer font-face’i yıllardır kullanıyor. Ancak Embed Open Type (EOT) formatını destekliyor. Firefox, Safari, Opera ise EOT’yi desteklemek istemiyor. Onun yerine OTF ve TTF ları destekleyecekler.