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ımdasize ziyaret edilen bir link ile yeni/eski yazı uygulamasının nasılhazı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 adrestürü için özel simgeler kullanabileceksiniz. Yalnız şunu da belirtmekisterim, şu an için bu yöntemi standart uyan internet tarayıcılarıdesteklemekte -Firefox, Safari, IE7 ve diğerleri-

Alıntı:

(

) 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 aradayukarıda belirttiğim gibi sadece standart kodları destekleyen internettarayıcıları ile bu uygulamaları görüntüleyebilirsiniz. Fakat yazınınilerleyen kısımlarında genel olarak çalışan bir uygulamayı daanlatacağım. Dileyen istediği gibi kullanabilir.

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

Şimdi bir *.pdf dosyasına link vermiş olsam, kullanıcı bubağlantının üzerine gelip status bar`a bakmadıkça ya da ben bağlantınınyanında bunu belirtmedikçe kullanıcı bunun farkına varmayacaktır. Bu dalink tıklandığında kullanıcının bir süre bekleyip *.pdfdosyasının açılmasını bekleyecektir. Ya da başka bir siteye linkverdiğimde kullanıcı bu sayfadan ayrılmak durumunda kalacaktır. Bunedenle 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 *.pdfadresi aranmakta ve bulunduğunda sağ alandan 18 px`lik bir boşlukoluşturulup buraya background-image olarak pdf simgesiyerleştirilmektedir.

Kod:

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

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[/url]

Örnek

SiteDışı bağlantılar hazırladığımızda ise bir class oluşturmamızgerekmektedir. 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ı[/url]

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[/url]

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 gibistandart kodları -en azından bir kısmını- destekleyen internettarayı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[/url]

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 uygulamalardakullanılacak js betiklerinin sayfanın yüklenmesini olumsuz etkileyecekolmasıdır. İnternet tarayıcılarında standart olarak css uygulamalarınacevap 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ıdajs 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.

Yazar: Ceyhun Aksan