Link-uri externe VS Link-uri interne

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^="https://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ță https://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ă.

Un Comentariu

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter