Passos per eliminar el subratllat dels enllaços de text i els problemes a tenir en compte
Per defecte, el contingut del text que està enllaçat a HTML mitjançant l'element o "anchor" té un estil subratllat. Sovint, els dissenyadors web opten per eliminar aquest estil predeterminat eliminant el subratllat.
Molts dissenyadors no es preocupen per l'aspecte del text subratllat, especialment en blocs densos de contingut amb molts enllaços. Totes aquestes paraules subratllades poden trencar el flux de lectura d'un document. Molts han argumentat que els subratllats realment fan que les paraules siguin més difícils de distingir i de llegir ràpidament a causa de la manera en què el subratllat canvia les formes de lletres naturals.
Tanmateix, hi ha beneficis legítims per mantenir aquests subratllats en enllaços de text. Per exemple, quan navegueu per grans blocs de text, els enllaços subratllats, juntament amb un contrast de color adequat, fan que els lectors puguin escanejar immediatament una pàgina i veure on estan els enllaços. Si observeu els articles de disseny web a About.com, així com altres articles del lloc, veurà aquest estil d'enllaços subratllats al vostre lloc.
Si decideixes eliminar enllaços del text (un procés senzill que anem a cobrir en breu), assegureu-vos de trobar maneres d'escriure aquest text per diferenciar encara el que és un enllaç del que és text pla. Això es fa sovint amb aquest contrast de colors abans esmentat, però el color només pot suposar un problema per als visitants amb deficiències visuals com la ceguesa del color. Depenent de la seva forma particular de ceguesa de color, el contrast es pot perdre totalment en ells, impedint que vegin la diferència entre text enllaçat i no enllaçat. Per això, el text subratllat encara es considera la millor manera de mostrar enllaços.
Llavors, com es desactiva un subratllat si encara voleu fer-ho? Atès que aquesta és una característica visual que ens preocupa, ens dirigirem a la part del nostre lloc web que s'encarrega de tots els aspectes visuals: CSS.
Utilitzeu fulls d'estil en cascada per desactivar els subratllats en enllaços
En la majoria dels casos, no esteu buscant convertir un subratllat en un sol enllaç de text. En canvi, el vostre estil de disseny probablement us obliga a eliminar subratllats de tots els enllaços. Això ho faria afegint estils al full d'estils extern.
a {text-decoration: none; }Això és! Aquesta senzilla línia de CSS desactivaria el subratllat (que actualment utilitza la propietat CSS per a "text-decoration") en tots els enllaços.
També podeu obtenir-ne més específic amb aquest estil. Per exemple, si només voleu desactivar el subratllat o els vincles de l'element "nav", podeu escriure:
nav a {text-decoration: none; }Ara, els enllaços de text a la pàgina obtindrien el subratllat per defecte, però els que hi ha a la navina ho tindrien eliminat.
Una cosa que molts dissenyadors web trien fer és tornar "tornar" el link quan algú superi el text. Això es farà amb la següent: pseudoclasa CSS desplaçada, com aquesta:
a {text-decoration: none; } a: hover {text-decoration: underline; }Utilitzant CSS inline
Com a alternativa per fer canvis a un full d'estils extern, també podeu afegir els estils directament a l'element en HTML, com aquest:
aquest enllaç no té subratllatEl problema amb aquest mètode és que col·loca informació d'estil a l'interior de l'estructura HTML, que no és una pràctica recomanada. L'estil (CSS) i l'estructura (HTML) s'han de mantenir separats.
Si volíeu que tots els enllaços de text d'un lloc haguessin eliminat el subratllat, afegir aquesta informació d'estil a cada enllaç de forma individual significaria que s'afegís una quantitat justa de marcatge addicional al codi del vostre lloc. Aquest augment de pàgina pot frenar el temps de càrrega d'un lloc i fer que la gestió general de la pàgina sigui molt més difícil. Per aquestes raons, és preferible que sempre torni a un full d'estils extern per a totes les necessitats d'estil de pàgina.
En tancament
Tan fàcil com eliminar el subratllat dels enllaços de text d'una pàgina web, també haureu d'estar atents a les conseqüències de fer-ho. Tot i que en realitat pot netejar l'aspecte d'una pàgina, pot fer-ho a costa de la usabilitat general. Tingueu en compte la propera vegada que consideri canviar les propietats de "text-decoration" d'una pàgina.
Article original de Jennifer Krynin. Editat el 19/09/16 per Jeremy Girard