Bağlantılarda Simge Kullanmak (css attribute kullanımı)

Ceyhun Aksan · 07.02.2007 | 19:58

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-

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 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.

sahip · 08.02.2007 | 15:45

Ceyhun çok güzel ve kapsamlı olmuş yazın.
Ellerin sağlık.

İlk baştaki ikon dışarıya/ başka siteye bağlanı olması gerekiyor, cssguy ' ın sitesinde öyle diyor sanırım.

Bu arada senin site çalışmıyor mu?

Ceyhun Aksan · 08.02.2007 | 21:58

Teşekkürler sahip

Evet ilk simge için öyle yazılmış ancak ben biraz yazıyı değiştirip bizim kullanımlarımıza göre düzenledim. Örneğin kendi sitemde site içi linklerde simge çıkartmıyor, dış bağlantılara simge koyuyorum... gibi.

Anlamadım, son zamanlarda sunucu kaynaklı sorunları sıklıkla yaşamaya başladım. Sanırım değişiklik yapacağım sunucuda :\

Nous · 14.02.2007 | 23:30

makale çok güzel ellerine sağlık hocam.
ek olarak bende bir şey eklemek istiyorum. geçenlerde yabancı sitelerin birinde bir CSS kodu buldum fare tekerlegini tıklayarak sayfayı aşşagı yukarı kaydırırken o iğrenf default simgeyi değiştirmeye yarıyor.. gayette güzel oluyor

Kod:

HTML>img
{
width: 0!important;
height: 108px!important;
padding-left: 48px!important;
background: url(http://netkozmos.com/mause.png) no-repeat;
}

tekrar teşekkür ediyorum makale için..

Ceyhun Aksan · 15.02.2007 | 11:14

Alıntı:

Ashra tarafından gönderilen mesaj:

makale çok güzel ellerine sağlık hocam.
ek olarak bende bir şey eklemek istiyorum. geçenlerde yabancı sitelerin birinde bir CSS kodu buldum fare tekerlegini tıklayarak sayfayı aşşagı yukarı kaydırırken o iğrenf default simgeyi değiştirmeye yarıyor.. gayette güzel oluyor

Kod:

HTML>img
{
width: 0!important;
height: 108px!important;
padding-left: 48px!important;
background: url(http://netkozmos.com/mause.png) no-repeat;
}

tekrar teşekkür ediyorum makale için..

Rica ederim, bu arada belirttiğin kod içi teşekkürler. bir süre önce bu konuda bir araştırma yapmıştım ve bu uygulamanın ff`de çalışıyor. Alternatif uygulamalar hazılandığında ilgili bir yazı hazırlanabilir aslında.

Ben de teşekkür ederim.

Nous · 16.02.2007 | 07:19

evet şu an bir tek firefoxta çalışıyor olması kötü. detaylı araştırmıştım ie için bir şey bulamadım..

sahip Üyelik Tarihi: 29.11.2002 Mesaj: 1,166	08.02.2007 \| 15:45 Ceyhun çok güzel ve kapsamlı olmuş yazın. Ellerin sağlık. İlk baştaki ikon dışarıya/ başka siteye bağlanı olması gerekiyor, cssguy ' ın sitesinde öyle diyor sanırım. Bu arada senin site çalışmıyor mu?
sahip Üyelik Tarihi: 29.11.2002 Mesaj: 1,166	__________________ YENİ: POOZZ PEYKit.com : kolay reklam, ilan aracı SuniPeyk RSS
	Alıntı yap

Ceyhun Aksan Üyelik Tarihi: 29.01.2005 Mesaj: 611	08.02.2007 \| 21:58 Teşekkürler sahip Evet ilk simge için öyle yazılmış ancak ben biraz yazıyı değiştirip bizim kullanımlarımıza göre düzenledim. Örneğin kendi sitemde site içi linklerde simge çıkartmıyor, dış bağlantılara simge koyuyorum... gibi. Anlamadım, son zamanlarda sunucu kaynaklı sorunları sıklıkla yaşamaya başladım. Sanırım değişiklik yapacağım sunucuda :\
Ceyhun Aksan Üyelik Tarihi: 29.01.2005 Mesaj: 611	__________________ . Blog - Portfolio - İletişim - FriendFeed .
	Alıntı yap

Nous Üyelik Tarihi: 09.05.2006 Mesaj: 13	14.02.2007 \| 23:30 makale çok güzel ellerine sağlık hocam. ek olarak bende bir şey eklemek istiyorum. geçenlerde yabancı sitelerin birinde bir CSS kodu buldum fare tekerlegini tıklayarak sayfayı aşşagı yukarı kaydırırken o iğrenf default simgeyi değiştirmeye yarıyor.. gayette güzel oluyor Kod: HTML>img { width: 0!important; height: 108px!important; padding-left: 48px!important; background: url(http://netkozmos.com/mause.png) no-repeat; } tekrar teşekkür ediyorum makale için..
Nous Üyelik Tarihi: 09.05.2006 Mesaj: 13
	Alıntı yap

Nous Üyelik Tarihi: 09.05.2006 Mesaj: 13	16.02.2007 \| 07:19 evet şu an bir tek firefoxta çalışıyor olması kötü. detaylı araştırmıştım ie için bir şey bulamadım..
Nous Üyelik Tarihi: 09.05.2006 Mesaj: 13
	Alıntı yap

Article Tools
Yazıci Çıktısı Alın Bu Konuyu Arkadaşınıza Gönderin