Konu Başlığı: Bağlantılarda Simge Kullanmak (css attribute kullanımı)

CSS ile tasarım yapmanın güzelliklerinden biri de geliştirilebilir ve kullanılabilir uygulamalar hazırlarken bize kazandırmış olduğu esneklik. Önceki bir yazımda size ziyaret edilen bir link ile yeni/eski yazı uygulamasının nasıl hazırlanabileceğini anlatmıştım. Şimdiki yazı ise bunun biraz farklı bir kullanımı ama uygulayacağımız kodlar yine hyperlink ( href ) üzerine şekillenecek.

Buna verilebilecek bir çok örnekten şimdi yine bir tanesini anlatayım. Yazıyı buradaki örnek üzerine hazırlamak istedim.

Simgeleriniz
web sitenizin hitap ettiği adresleri düşünün. Daha çok ne tür bağlantılar içeriyorsunuz?
Dosya bağlantıları, e-posta adresleri, web siteleri vs. Çünkü her adres türü için özel simgeler kullanabileceksiniz. Yalnız şunu da belirtmek isterim, şu an için bu yöntemi standart uyan internet tarayıcıları desteklemekte -Firefox, Safari, IE7 ve diğerleri-

() site içi bağlantı
Siteniz içinde başka bir sayfaya bağlantı verdiğimizde kullanacağız.

() E-Posta içeren bağlantılarda kullanacağız.

() PDF dosyası içeren bağlantılarda kullanacağız.

() WORD dosyası içeren bağlantılarda kullanacağız.

() EXCEL içeren bağlantılarda kullanacağız.

... ve buna benzer bir çok simge ile farklı özelleştirilebilir bağlantılar hazırlayabilirsiniz.

Şimdi örnekleri nasıl hazırlayabileceğimizi anlatayım. Bu arada yukarıda belirttiğim gibi sadece standart kodları destekleyen internet tarayıcıları ile bu uygulamaları görüntüleyebilirsiniz. Fakat yazının ilerleyen kısımlarında genel olarak çalışan bir uygulamayı da anlatacağım. Dileyen istediği gibi kullanabilir.

Nasıl Uygulayacağım?
Normalde linklerimiz benim de hali hazırda uyguladığım gibi genel olarak farklı renklerde ve altı, üstü, sağı, solu çizgili olarak sunulmakta. ( Örnek bir link gibi. )

Şimdi bir *.pdf dosyasına link vermiş olsam, kullanıcı bu bağlantının üzerine gelip status bar`a bakmadıkça ya da ben bağlantının yanında bunu belirtmedikçe kullanıcı bunun farkına varmayacaktır. Bu da link tıklandığında kullanıcının bir süre bekleyip *.pdf dosyasının açılmasını bekleyecektir. Ya da başka bir siteye link verdiğimde kullanıcı bu sayfadan ayrılmak durumunda kalacaktır. Bu nedenle uygulamamız kullanışlılık açısından önem arzetmektedir.

Uygulamalar
PDF dosyasını bağlantı olarak belirtmekle başlayalım.

Kod:

a[href $='.pdf'] { 
   padding-right: 18px;
   background: transparent url(icon_pdf.gif) no-repeat center right;
}

Kodu incelediğimizde, style dosyası içerisinde a parametresi içerisinde yer alan bağlantıda *.pdf adresi aranmakta ve bulunduğunda sağ alandan 18 px`lik bir boşluk oluşturulup buraya background-image olarak pdf simgesi yerleştirilmektedir.

Kod:

<a href="./files/holidays.pdf">Tatil Rehberim</a>

E-Posta bağlantılarında ise durum biraz daha farklı. Normal dosyalara verdiğimiz bağlantılarda href $='.pdf' olarak belirttiğimiz bölümde yer alan $ bağlantı içerisinde yer alan uzantıyı kullanmamıza olanak tanırken e-posta adresinde bu alanda ^="mailto:" yani ^ kullanacağız. Çünkü e-posta adresleri href="http:// yerine href="mailto: olarak tanımlandırılmaktadır.

Kod:

a[href ^="mailto:"] {
   padding-right: 20px;
   background: transparent url(icon_mail.gif) no-repeat center right;
}

olarak belirttiğimiz style tanımlandırılması sonucunda;

Kod:

<a href="mailto:billg@Microsoft.com">E-Posta Gönder</a>

Örnek

site Dışı bağlantılar hazırladığımızda ise bir class oluşturmamız gerekmektedir. Kullanırken ise belirttiğimiz adresin türüne göre classı ekleyeceğiz.

Kod:

a[href ^="http://"] {
    padding-right: 18px;
    background: transparent url(icon_external.gif) no-repeat center right;
}

şeklindeki style satırımızda popup olarak belirttiğimiz classlarda yine yukarıda da anlattığımız padding ve background-image değerleri belirtilmekte.

Kod:

<a href="http://www.ceyhunaksan.com">Yardım Sayfası</a>

Diyelim ki JavaScript ile hazırladığınız popup sayfalarınız var o halde;

Kod:

a[href ^="JavaScript:"] {
    padding-right: 18px;
    background: transparent url(icon_external.gif) no-repeat center right;
}

Kod:

<a href="JavaScript:pencere();">Sayfa</a>

kullanımını tanımlandırabilirsiniz.

Örnek kullanım için askthecssguy.com sayfasında yer alan şu dosyası inceleyebilirsiniz. Benim son anlattığım bağlantılar kısmı bu verilen örnekte yer almadığı için yazımdaki kodları temin edebilirsiniz.

Genel Olarak Nasıl Standart Sağlayabilirim?

Yazı içerisinde de belirttiğim gibi Firefox, IE7 ve Safari gibi standart kodları -en azından bir kısmını- destekleyen internet tarayıcılarının dışında yukarıdaki style kodlarını görüntüleyememekteyiz.

Böyle bir durumla karşılaşmamak için yapmamız gerekenler ise kullanım alanlarımıza uygun olarak classlar hazırlamak.
Örneğin mail adresleri için tüm internet tarayıcılarında aynı görüntüyü elde etmek istiyor isek;

Kod:

a .mail {
   padding-right: 20px;
   background: transparent url(icon_mail.gif) no-repeat center right;
}

Kod:

<a href="mailto:billg@Microsoft.com" class="mail">E-Posta Gönder</a>

kullanmamız gerekmektedir. Aynı yöntemi diğer kullanım parametrelerinde de izlemeliyiz.

Ayrıca sitede hazırlanmış bir js dosyası ile belirtilen adreslerin faviconlarını gösterebilirsiniz.

Ancak unutmamamız gereken bir husus da bu ve buna benzer uygulamalarda kullanılacak js betiklerinin sayfanın yüklenmesini olumsuz etkileyecek olmasıdır. İnternet tarayıcılarında standart olarak CSS uygulamalarına cevap verene programların dışında IE6 gibi eski tür tarayıcılarda aynı şekilde uygulayabilmemiz için ise gerektiğinde js dosyasını çalıştırılabilir kılabiliriz. Böylelikle sadece istediğimiz tarayıcıda js yükleneceğinden mümkün olduğu kadar sorunun önüne geçmiş oluruz.

Kod:

<!--[if IE 6]>
script dosyası
<![endif]-->

Bu şekilde js dosyasının sadece IE6`da çalışmasını sağlayabiliriz, diğer internet tarayıcılarında da yukarıda anlatılan attribute selectors uygulamalarını çalıştırabiliriz.

selectors attribute kullanılarak örnekler geliştirilebilir.