Link-uri externe VS Link-uri interne
31 MarEste 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ă.


U rule