Link-uri externe VS Link-uri interne

31 Mar

Este foarte probabil ca, la un moment dat, să fi vrut să ai link-urile externe (ce duc spre alte domenii decât al tău) afişate în alt format decât cel standard. Soluţia cea mai simplă şi cea mai elegantă este, desigur, atribuirea unei clase pentru fiecare link extern. Este şi altă soluţie, bazată doar pe CSS, fără nicio altă clasă în HTML.

a[href^="http:"] {color:red;}
 
a[href^="http://blog.iamntz.com"] {
 
color:blue;
 
}

Prima regulă este pentru toate link-urile, indiferent dacă sunt interne sau externe, astfel încât link-urile vor fi roşii. A doua regulă este pentru link-urile ce încep cu domeniul tău (în cazul de faţă http://blog.iamntz.com) care, conform regulii definite, vor fi albastre. Un demo destul de sugestiv poţi vedea chiar pe acest blog, unde link-urile externe au o imagine în partea din dreapta.

Care este secretul? Păi… un pic de CSS3, care din păcate nu este suportat de browserele mai vechi (adică Internet Explorer mai vechi de versiunea 7), aşa că, dacă încă mai foloseşti Internet Explorer 6 pentru altceva în afară de teste, ar fi bine să faci un upgrade :)

Poţi folosi această metodă şi pentru a scoate în evidenţă diverse tipuri de fişiere. Astfel, dacă pe site-ul tău ai fişiere PDF, MP3, RAR, ZIP, sau orice altă extensie non HTML, poţi adăuga următoarele reguli în fişierul CSS:

a[href$=".rar"] { color:green; }
a[href$=".pdf"] { color:yellow; }
a[href$=".mp3"] { color:black; }

Evident, pentru fiecare extensie, ai o altă culoare. Poţi, în acest fel, să stilizezi link-urile spre anumite domenii într-un fel, spre alte domenii, în alt fel, pentru un anumit tip de extensie în alt fel, etc.

Browsere suportate: Internet Explorer 7, Firefox, Safari, Opera. Adică toate browserele de generaţie nouă.

Scris în categoria: Css, Tutoriale

Un comentariu »

  1. 2 April 2007 v3l0 a spus:

    U rule

Lasă un comentariu

Poţi folosi câteva taguri XHTML: <blockquote> <strong> <a> <em>

Pentru a posta secvenţe de cod, foloseşte
<pre lang="php/css/html/javascript"> CODUL TĂU <pre>