Označení odkazu podle typu nebo umístění (CSS)

Pokud se věnujete tvorbě webových stránek, určitě se vám nejednou stalo, že jste potřebovali označit odkaz, který vede na jiné umístění, než je na vašich stránkách nebo jste jen potřebovali označkovat odkaz podle typu cíle, na který odkazujete. Na toto existuje spousta JavaScriptů, spousta frameworků a v neposlední řadě spousta řešení pomocí php. My se ale dnes podíváme na jednu z jednodušších a řekl bych i jednu z nejefektivnějších variant, jak toho docílit jednoduše jen za pomocí CSS. Mnoho lidí tuto metodu nezná nebo se s ní zatím nesetkali, proto si ji dnes popíšeme.

Nutno dodat, že následující řešení není podporováno v prohlížeči IE6 (překvápko jako hrom  ), ale nejedná se zase až tak o ztěžejní funkci, která by pro tento zastaralý a dnes již méně využívaný prohlížeč (samozřejmě podle zaměření daného webu) měla být odladěna. Odladit tuto funkci i pro IE6 sice jde (třeba vlastní třídou), to by ale nebylo plně automatizované, což my nechceme.

Externí odkaz

Pokud potřebujeme označkovat externí odkaz, který míří ven z našeho webu, budeme předpokládat, že je to každý odkaz, který začína na http://. Zápis CSS bude vypadat následovně:

a[href^="http:"] {
 background: url('/images/externalLink.gif') no-repeat right top;
 padding-right: 10px;
}

Zároveň se ale dá předpokládat to, že můžeme pomocí absolutní adresy směrovat odkazy i na náš web a v tu chvíli nechceme nijak odkaz odlišovat, i když začíná na http://. Tento případ ošetříme úplně jednoduše zápisem:

a[href^="http://www.vasestranka.cz"],
a[href^="http://vasestranka.com"] {
 background-image: none !important;
 padding-right: 0;
}

Odkazy, které nechceme nijak odlišovat (napadají mě snad jen placené reklamy) a splňují výše uvedený parametr, vynulujeme jednoduše, jak jsme zvyklí:

.no_exter {
 background-image: none !important;
 padding: 0;
}

Odkazy podle typu

Další případ, kdy můžeme tohoto využít, jsou odkazy, u nichž přesně určujeme typ nebo příponu. Zápis pro odlišení odkazů na e-mailovou adresu může vypadat takto:

a[href^="mailto:"] {
 background:url('/images/email_link.png') no-repeat right top;
 padding-right: 22px;
 padding-bottom: 5px;
}

Pro .pdf, .doc nebo třeba .rss můžeme použít následujícího zápisu:

a[href$=".pdf"] {
 background:url('/images/page_pdf.png') no-repeat right top;
 padding-right: 22px;
 padding-bottom: 5px;
}

a[href$=".doc"] {
 background:url('/images/page_word.png') no-repeat right top;
 padding-right: 22px;
 padding-bottom: 5px;
}

a[href$=".rss"], a[href$=".rdf"] {
 background:url('/images/feed.png') no-repeat right top;
 padding-right: 22px;
 padding-bottom: 5px;
}

Další využití a možnosti jistě najdete sami podle těchto předloh. Zajímalo by mě, jestli jste tuto metodu znali, jestli ji používáte nebo používáte jinou vámi osvědčenou metodu. Těším se na komentáře.

Komentáře

Chci odebírat RSS komentářů

Ashen
tento čtenář není moc aktivní

19:46 - 24.05.09

 Díka za článek, ty externí odkazy mi vždycky vrtaly hlavou

fremy
tento čtenář není moc aktivní

20:41 - 24.05.09

 díky za tip

exyl
tento čtenář není moc aktivní

07:50 - 25.05.09

 Tendle styl (to v tich hranatejch zavorkach) je dobry třeba i pro formulářový políčka .. mas treba ruzny "type" u inputů ..a chces aby textová políčka měla svuj styl, tak to proste ostylujes jako input[type=text]{ ... } a je to .. nemusis to přeplácat třídama ..

mibrt
autor blogu

10:26 - 25.05.09

 #824 exyl: Díky za doplnění, využití je samozřejmě daleko více

pes502
tento čtenář není moc aktivní

21:28 - 27.05.09

 Jo, tento způsob znám a používám a to nejen u odkazů. Skvěle se to dá použít (jak už tady bylo zmíněno) třeba u formulářových prvků

vaseks
tento čtenář není moc aktivní

12:15 - 26.07.09

 Aha, když to jde jednoduše.. Nedávno jsem se zrovna pral s označením inputů.. Dobře, teď vím, kolik zbytečné práce jsem dělal! Perfektní typ!

Vlož také svůj názor

nick (povinné)

e-mail (nezobrazuje se)

web

heslo

x zavřít

opište ověřovací kod z obrázku

Komentáře podporují gravatary.
Adresy začínající na "www" nebo "http://" budou automaticky převedeny na odkazy. Tyto odkazy prosím oddělujte mezerou, děkuji.
ENTER se naformátuje jako nový řádek