Estilitzar enllaços

Quan s’aplica estil a enllaços és important entendre com fer ús de les pseudoclasses per a donar estil als estats de l’enllaç d’una manera efectiva, i com donar estil als enllaços per a utilitzar-los en diverses interfícies d’usuari característiques comunes, com ara menús de navegació i pestanyes. En aquest article tractarem tots aquests temes.

Requisits previs: Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la Introducció a l’HTML), fonaments de CSS (consulta la Introducció al CSS), fonaments d’aplicació d’estil i tipus de lletra als textos amb CSS.
Objectiu: Aprendre a dissenyar els estats d'un enllaç i a fer servir enllaços de manera efectiva en interfícies d'usuari característiques comunes, com ara els menús de navegació.

Un cop d’ull a alguns enllaços

En la secció Creació d’hipervincles hem vist com has d’implementar els enllaços en el teu codi HTML d'acord amb les bones pràctiques. En aquest article aprofundirem en aquest coneixement i et mostrarem les bones pràctiques que has de tenir en compte per a aplicar estil als enllaços.

Els estats d'un enllaç

El primer que has d'entendre és el concepte d'estats d'un enllaç; els enllaços poden tenir diversos estats, i se’ls pot aplicar estil fent servir diverses pseudoclasses:

  • link: L'estat per defecte en què es troba un enllaç, quan no es troba en cap altre estat; s’hi pot aplicar estil específicament utilitzant la pseudoclasse :link.
  • visited: Un enllaç quan ja ha estat visitat (apareix en l’historial del navegador); s’hi pot aplicar estil utilitzant la pseudoclasse :visited.
  • hover: Un enllaç quan el punter del ratolí de l'usuari hi passa per damunt; s’hi pot aplicar estil utilitzant la pseudoclasse :hover.
  • focus: Un enllaç quan té el focus (per exemple, perquè un usuari es desplaça per la pàgina web amb la tecla Tab del teclat, o una altra, o se li ha assignat el focus per programació amb HTMLElement.focus()); s’hi pot aplicar estil utilitzant la pseudoclasse :focus.
  • active: Un enllaç quan s'activa (per exemple, perquè hi has fet clic); s’hi pot aplicar estil utilitzant la pseudoclasse :active.

Estils predeterminats

L’exemple següent il·lustra com es comporta un enllaç de manera predeterminada (el CSS simplement amplia i centra el text perquè destaqui més).

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
p {
  font-size: 2rem;
  text-align: center;
}

A mesura que exploris els estils predeterminats t’adonaràs d'algunes coses:

  • Els enllaços es subratllen.
  • Els enllaços no visitats són blaus.
  • Els enllaços visitats són violeta.
  • En passar per sobre d'un enllaç, el punter del ratolí canvia a una petita icona en forma de mà.
  • Els enllaços que tenen el focus tenen un contorn que els envolta: hauries de poder saltar pels enllaços d'aquesta pàgina amb el teclat, prement la tecla de tabulació (en Mac, és possible que hagis d'habilitar l’opció Full Keyboard Access: All controls, prement Ctrl + F7 abans que això funcioni).
  • Els enllaços actius són de color vermell (prem el botó del ratolí mentre fas clic en l’enllaç).

Curiosament, aquests estils predeterminats són gairebé idèntics que els dels primers dies dels navegadors a mitjan anys 90. Això és perquè els usuaris coneixen aquest comportament i l’esperen; si els enllaços estiguessin dissenyats de manera diferent, molta gent es confondria. Això no vol dir en absolut que no puguis aplicar estil als enllaços, només que no t’has d'allunyar del comportament que se n’espera. Com a mínim hauries de complir el següent:

  • Utilitzar el subratllat per als enllaços, però no per a altres coses. Si no vola subratllar els enllaços, almenys ressalta’ls d'alguna altra manera.
  • Fes que reaccionin d'alguna manera quan el punter del ratolí hi passa per sobre o quan adquireix el focus, i d'una manera lleugerament diferent, quan s'activa.

Els estils predeterminats es poden desactivar/modificar amb les propietats CSS següents:

  • color per al color del text.
  • cursor per a l'estil del punter del ratolí; no l’hauries de desactivar, tret que hi hagi una raó molt bona.
  • outline per al contorn del text (un contorn és similar a una vora, l'única diferència és que la vora ocupa espai de la caixa, i un contorn no; és a la part superior del fons). El contorn és una ajuda d'accessibilitat útil, de manera que pensa-t’ho bé abans de desactivar aquesta propietat; com a mínim hauries de duplicar els estils per a l’estat de passar-hi el punter del ratolí per sobre l'estat amb el focus.

Nota: No està limitat només a les propietats anteriors per al disseny dels enllaços; pots utilitzar qualsevol propietat que vulguis. Només procura no esbojarrar-te!

Aplicar estil a enllaços

Ara que hem examinat amb una mica de detall els estats per defecte dels enllaços, vegem un conjunt típic d'estils d'enllaç.

Per començar, escriurem un conjunt de regles buides:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

Aquest ordre és important perquè els estils d'enllaç es construeixen els uns sobre els altres, per exemple, els estils de la primera regla s'aplicaran a tots els subsegüents, i quan s'activa un enllaç, també s'hi passa per sobre. Si els posem en l'ordre equivocat, les coses no funcionaran correctament. Per recordar l'ordre, pots provar d'usar un mnemotècnic com LoVe Fears HAte.

Ara afegim una mica més d'informació per a obtenir aplicar-hi els estils adequats:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;     
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

També et proporcionem un exemple d'HTML al qual aplicar el CSS:

<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

Si ho posem tot junt, obtenim aquest resultat:

Què hem fet aquí? Sens dubte, això es diferent de l'estil predeterminat, però encara proporciona una experiència prou familiar perquè els usuaris sàpiguen què passa:

  • Les dues primeres regles no proporcionen gaires elements de discussió.
  • La tercera regla utilitza el selector per a desfer-se del subratllat per defecte i el contorn de l’estat amb el focus (que varia d'un navegador a un altre), i afegeix una petita quantitat d’àrea de farciment a cada enllaç; tot això ho acabarem d’aclarir més endavant.
  • A continuació, s'utilitzen els selectors a:link i a:visited per a establir un parell de variacions de color en els enllaços no visitats i visitats, de manera que siguin diferents.
  • Les dues regles següents utilitzen a:focus i a:hover per a establir que els estats d’enllaç amb el focus i enllaç activat pel desplaçament del punter del ratolí tinguin colors de fons diferents, i un subratllat perquè l'enllaç destaqui encara més. Dos punts que cal destacar són:
    • El subratllat s'ha creat amb border-bottom, no amb text-decoration; hi ha qui ho prefereix perquè la primera propietat té més opcions d'estil que la darrera, i el subratllat es dibuixa una mica més avall, de manera que no talla els traços descendents de la paraula que es subratlla (per exemple, les cues de la g i la j).
    • El valor border-bottom s'ha establert amb 1px solid, sense especificar-ne el color. D'aquesta manera, la vora adopta el mateix color que el text de l'element, i és útil en casos com aquest, en què el text té un color diferent en cada cas.
  • Finalment, a:active s'utilitza per a donar als enllaços un esquema de color invertit quan s’activen, per deixar clar que passa alguna cosa important.

Aprenentatge actiu: Fes el teu disseny d’enllaç propi

En aquesta sessió d'aprenentatge actiu, et proposem que aprenguis el nostre conjunt de regles buides i hi afegeixis les teves declaracions pròpies perquè els teus enllaços llueixin fantàstics! Utilitza la imaginació, deixa't anar! Segur que pots trobar alguna cosa tan funcional com el nostre exemple, i més fresca!

Si t’equivoques, sempre pots tornar a començar amb el botó Reinicia. Si t’encalles, prem el botó Mostra la solució per a inserir l'exemple mostrat a dalt.

Icones en els enllaços

Una pràctica comuna és incloure icones en els enllaços per a proporcionar més d'un indicador quant al tipus de contingut al qual apunta l'enllaç. Vegem-ne un exemple molt senzill, que afegeix una icona als enllaços externs (enllaços que apunten cap a altres llocs web). Aquesta icona normalment té l’aspecte d’una petita fletxa que apunta cap enfora d'una caixa: per a aquest exemple, utilitzarem aquest fantàstic exemple de icons8.com.

Vegem alguns HTML i CSS, que ens donarà l'efecte que volem. En primer lloc, alguns simple HTML a l'estil:

<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

A continuació, el CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Què passa aquí, doncs? Ens saltarem la major part del CSS, perquè és la mateixa informació que ja has vist abans. Tanmateix, l'última regla és interessant perquè inserim una imatge de fons personalitzada en els enllaços externs d'una manera similar a com hem tractat les vinyetes personalitzades dels elements de llista de l'article anterior, però fem servir la propietat abreujada background, en comptes de les propietats individuals. Establim la ruta a la imatge que volem inserir i especifiquem no-repeat perquè només se’n vegi una còpia, i a continuació especifiquem la posició com al 100% a la dreta del contingut de text i a 0 píxels de l’extrem superior.

També fem servir background-size per a especificar la mida amb què volem que es mostri la imatge de fons; és útil tenir una icona més gran i canviar-ne la mida per a propòsits de disseny de webs adaptatius. Tanmateix, això només funciona amb IE 9 i posteriors, de manera que si has de donar suport a aquests navegadors antics, només has de canviar la mida de la imatge i inserir-la tal qual.

Finalment, establim una mica de padding-right als enllaços perquè la imatge de fons tingui espai i no es superposi amb el text.

Per acabar, com etiquetem els enllaços externs? Bé, si escrius els teus enllaços HTML correctament, només has d'utilitzar les URL absolutes en el codi d’etiquetatge dels enllaços externs; per enllaçar a altres parts del teu lloc web propi és més eficient utilitzar enllaços relatius. Per tant, el text «http» només hauria d'aparèixer en enllaços externs i pots etiquetar-los amb un selector d'atributs: a[href*="http"], selecciona elements <a>, però només si tenen un atribut href amb un valor que conté «http» en algun lloc.

Això és tot - torna a visitar la secció d'aprenentatge actiu anterior i prova aquesta tècnica nova.

Nota: No et preocupis si encara no tens prou familiaritat amb els fons i el disseny web adaptatiu perquè s’expliquen en altres articles.

Enllaços amb estil de botó

Les eines que has explorat fins ara en aquest article també es poden utilitzar d'altres maneres. Per exemple, els estats com el flotant (hover) es poden utilitzar per a dissenyar molts elements diferents, no només enllaços; pot ser que vulguis dissenyar estats flotants (hover) per a paràgrafs, elements de llista o altres elements.

A més, és habitual aplicar estil als enllaços perquè semblin i es comportin com botons en determinades circumstàncies –el menú de navegació d’un lloc web s’acostuma a marcar com una llista que conté enllaços, i es pot configurar fàcilment perquè sembli un conjunt de botons o pestanyes de control que proporcionen a l'usuari accés a les altres parts del lloc web. Expliquem com es fa.

Primer, una mica d’HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

I ara, el nostre CSS:

body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {     
  background: orange;
}

a:active {
  background: red;
  color: white;
}

Això ens dona el resultat següent:

Expliquem què passa aquí, i ens centrem en les parts més interessants:

  • La segona regla elimina el padding per defecte de l'element <ul> i n’estableix una amplada que abasta el 100% del contenidor exterior (l’element <body>, en aquest cas).
  • Els elements <li> normalment són elements de bloc per defecte (vegeu els tipus de caixes CSS per refrescar la memòria), que significa que cadascun ocuparà la seva línia pròpia. En aquest cas, creem una llista d'enllaços horitzontal, i en la tercera regla establim la propietat display en el valor inline, que fa aparèixer tots els elements de la llista en la mateixa línia. Ara es comporten com elements de línia.
  • La quarta regla, que dissenya l'element <a>, és la més complicada aquí. Anem pas a pas:
    • Com en els exemples anteriors, comencem per desactivar el valor per defecte de text-decoration i outline; no volem que espatllin la nostra aparença.
    • A continuació, establim la propietat display a inline-block; els elements <a> estan en línia per defecte, i si bé no volem que desbordin de la seva línia com passaria amb un valor block, volem ser capaços de dimensionar-los. La propietat inline-block ens permet fer-ho.
    • Ara, passem a la mida! Volem omplir tot l'ample de <ul> i deixarem un petit marge entre cada botó (però no hi ha un buit a la vora dreta), i hi han de cabre 5 botons que han de ser de la mateixa mida. Per a això, establim l’amplada width al 19,5%, i el margin-right al 0,625%. Observa que tot aquest ample suma 100,625%, que fa desbordar l'últim botó <ul>, que cau a la línia següent. Tanmateix, recuperem el 100% amb la regla següent, que selecciona només l'última <a> de la llista i n’elimina el marge. Fet!
    • Les tres últimes declaracions són força senzilles i acostumen a tenir finalitats cosmètiques. Centrem el text dins de cada enllaç, establim line-height a 3 per a donar una mica d'alçada als botons (que també té l'avantatge de centrar el text verticalment), i establim el color del text en negre.

Nota: És possible que hagis observat que en l’HTML hem col·locat tots els elements de llista en la mateixa línia; fem això perquè els espais / les línies entre els elements de línia de bloc creen espais a la pàgina, com els espais que hi ha entre les paraules, i aquests espais trencarien el disseny de menú de navegació horitzontal. De manera que hem eliminat els espais. Pots trobar més informació sobre aquest problema (i les solucions) a Fighting the space between inline block elements.

Resum

Esperem que aquest article t’hagi proporcionat tot el que has de saber sobre els enllaços, per ara. L'article final del nostre mòdul de text «Aplicació d’estils» explica com pots utilitzar tipus de lletra personalitzats en els teus llocs web o tipus de lletra per a web, com es coneixen més sovint.