Günümüzün web uygulamalarında kullanıcıya elimizden geldiğince fazla bilgi vermeye, uygulamaları mümkün olduğunca erişilebilir ve kullanıcı dostu kılmaya gayret gösteriyoruz (göstermeliyiz). Bu yazımızda CSS’in bize sağladığı özellik seçiciler yardımıyla kullanıcı dostu linkler hazırlayacağız.

Özellik Seçiciler

CSS dokümanımız içerisinden seçicileri kullanarak XHTML elemanlarını seçer ve bunlara görsellik kazandırırız. Bu seçme işlemini eğer bir XHTML elemanın özelliğine göre yapmak istersek özellik seçicileri kullanırız.

XHTML içeriğimiz;

<p>Lorem ipsum dolor <a href="http://www.yahoo.com">YAHOO</a>,
consectetur <a href="#">adipiscing elit</a>. Vestibulum scelerisque.
consectetur <a href="http://www.herhangibiryer.com/herhangibirdosya.pdf">adipiscing elit</a>. Vestibulum scelerisque.
<a href="http://www.adobe.com">ADOBE</a> pharetra asapien vel
<a href="herhangibirdosya.doc">turpis</a>,
<a href="herhangibirdosya.pdf">Aliquam nisi</a> eros, luctus tincidunt,
dignissim eget</p>

Dikkat ederseniz içeriğimizde toplam altı adet link var. Bunların iki tanesi Yahoo ve Adobe harici linklerini, bir tanesi dâhili (#) bir linki, bir tanesi bir word dokümanını ve kalan iki tanesi de biri harici biri dahili olmak üzere iki pdf dokümanını işaret ediyor. Şimdi sırayla bütün linklerimizi seçelim;

/* Genel link tanımlamamız */
a{
	color:#06F;
	text-decoration:underline;
}

/* Genel link :hover durumu tanımlamamız */
a:hover{
	color:#0CF;
	text-decoration:noner;
}

/* href="http..." ile başlayan linkleri seç */
a[href^='http'] {
	background:url(harici.gif) no-repeat right top;
	padding:0 13px 0 0;
}

/* href="... .pdf" ile biten linkleri seç */
a[href$='.pdf'] {
	background:url(pdf.gif) no-repeat right top;
	padding:0 15px 0 0;
}

/* href="... .doc" ile biten linkleri seç */
a[href$='.doc'] {
	background:url(word.gif) no-repeat right top;
	padding:0 15px 0 0;
}

/* href="... .pdf" ile biten,
href="http..."ile başlayan linkleri seç */
a[href$='.pdf'][href^='http'] {
	background:url(pdfexternal.gif) no-repeat right top;
	padding:0 25px 0 0;
}

Burada ilk iki kuralımız, bütün <a> etiketlerini etkileyen genel tanımlamalarımızı içeriyor. Üçüncü kuralımızda linkler içerisinde href=”http…” ile başlayanları seçmiş olduk. Burada ^ işaretini “http ile başlayanlar” diyebilmek için kullanıyoruz. Dördüncü kuralımızda ise href=”…pdf” ile bitenleri seçebilmek için kullanıyoruz. Burada $ işaretini “.pdf ile bitenler” diyebilmek için kullanıyoruz. Beşinci kuralımız dördüncünün aynısı, burada da word dokümanlarını işaret eden linkleri seçmiş oluyoruz. Altıcı kural da ise çoklu bir özellik seçimi tanımladık. Çünkü örnek vermek gerekirse; bazı linkler örneğimizde olduğu gibi site dışındaki bir pdf dokümanına gidebilir. Bu çoklu tanımlamayla hem “http” ile başlayan hem de “.pdf” ile biten linkleri seçmiş olduk.

Uygulamanın çalışan halini buradan görebilirsiniz…

Sonuç

Özellik seçiciler CSS üzerinden, çok daha spesifik seçimler yapmamıza imkan tanıyor. IExplorer 6′nın özellik seçicileri desteklemediğini söylesem pek şaşırmazsınız herhalde. Bu sorunu isterseniz Javascript kullanarak aşabilirsiniz. Bir sonraki yazımızda IE6 ve diğer bütün standart dışı tarayıcılar için bu işi bir de JQuery kullanarak yapacağız.

O zamana kadar konuyla ilgili görüş ve önerilerinizi bekliyorum. Sağlıcakla kalın…

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.