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 internet taray?c?lar? desteklemekte -Firefox, Safari, IE7 ve di?erleri-
- (
) Site d??? ba?lant?
- Siteniz d???nda bir adrese ba?lant? (link) verdi?imizde kullanaca??z.
- (
) Site içi ba?lant?
- Sitemiz içinde ba?ka bir sayfaya ba?lant? verdi?imizde kullanaca??z.
- (
) E-Posta içerek ba?lant?
- Sitemiz içinde e-posta ba?lant?s? verdi?imizde kullanaca??z.
- (
) PDF dosyas? içere ba?lant?
- PDF dosyas? içeren (*.pdf) ba?lant?larda kullanaca??z.
- (
) WORD dosyas? içere ba?lant?
- Word dosyas? içeren (*.doc) ba?lant?larda kullanaca??z.
- (
) EXCEL içerek ba?lant?
- Excel dosyas? içeren (*.xls) 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.
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.)
<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 a href=”http://yerine a href=”mailto: olarak tan?mland?r?lmaktad?r.
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;
<a href="mailto:billg@microsoft.com">E-Posta Gönder</a>
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.
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.
<a href="http://blog.ceyhunaksan.com">Yard?m Sayfas?</a<
Diyelim ki javascript ile haz?rlad???n?z popup sayfalar?n?z var o halde;
a[href ^="javascript:"] {
padding-right: 18px;
background: transparent url(icon_external.gif) no-repeat center right;
}
<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 a?a??daki kodu kullanmam?z gerekmektedir. Ayn? yöntemi di?er kullan?m parametrelerinde de izlemeliyiz.
a .mail {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
}
<a href="mailto:billg@microsoft.com" class="mail">E-Posta Gönder</a>
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.
<!--[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.
