Ajouter des styles à la balise abbr dans IE

Auteur：Eve Cole Date de mise à jour：2009-05-31 00:31:34

Introduction

<abbr> est utilisé pour ajouter des balises XHTML correctement étiquetées à l'abréviation sur la page Web (Note du traducteur : ici, l'abréviation et l'abréviation sont considérées séparément, la plage de l'abréviation est plus grande que l'abréviation, utilisez la balise <acronym> pour l'initiale abréviation), le navigateur IE pour Windows ne prend actuellement pas en charge la balise <abbr>. Dans IE, vous pouvez appliquer CSS à la balise <acronym> mais pas à la balise <abbr>. IE affichera une invite pour l'attribut title de la balise <acronym>, mais ignorera la balise <abbr>.

Ce bug (ou fonctionnalité) d'IE a amené certains utilisateurs de sites Web à penser que la balise <abbr> est inutile du tout, et c'est évidemment faux. Cette balise est toujours gérée correctement dans Mozilla et Opera, et elle est très importante pour la lisibilité et la sémantique du contenu Web. C'est pourquoi j'ai continué à chercher une solution et finalement je l'ai trouvée.

Solution

Cette méthode est basée sur un fait simple : même si IE ignore la balise <abbr>, les autres balises imbriquées dans la balise <abbr> sont toujours normales. J'ai donc intégré une balise dans <abbr>, défini les attributs de titre et de classe de , puis <abbr> a commencé à devenir identique à la balise <acronym>.

exemple de code

Jetez un œil au code ci-dessous, un exemple simple d'abréviations :

Maintenant, comparez le code modifié :

fonctionnement automatique

Intégrer manuellement dans chaque balise <abbr> est évidemment impossible - à la fois ennuyeux et inutile pour Mozilla et Opera. Heureusement, il existe désormais une solution de contournement automatisée basée sur un script côté client.

Vous avez peut-être remarqué que les mots abrégés sur cette page (Note du traducteur : la page de l'auteur original) sont affichés même dans IE, et que des styles CSS (soulignement en pointillé et curseur de souris en forme de point d'interrogation) sont ajoutés. Cependant, si vous regardez le code source, vous ne trouverez pas la balise mentionnée ci-dessus. Ceci est réalisé grâce à un simple JavaScript qui charge cette page :

fonction styleAbbr() {
var ancienBodyText, nouveauBodyText, reg
si (estIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1>$2</ABBR>');
document.body.innerHTML = newBodyText;
}
}
window.onload = fonction(){
styleAbbr()
} ;

estIE = (document.all) ? true:false;

Ce script vérifiera le navigateur client et, s'il s'agit d'IE, remplacera toutes les balises <abbr> par des versions modifiées ( intégrées). Notez que nous devons utiliser des expressions régulières et des attributs innerHTML au lieu de la méthode DOM standard, car IE ne peut pas obtenir l'attribut <abbr> via le DOM.

Stylisme

Un dernier regard sur le CSS utilisé sur cette page. Assez simple :

abbr, acronyme, span.abbr {
curseur : aide ;
bordure inférieure : 1px #000 en pointillé ;
}

Mozilla et Opera utilisent des sélecteurs d'attributs abbr et acronyme, et IE utilise acronyme et span.abbr. Quoi qu'il en soit, <abbr> et <acronym> sont stylisés - avec un curseur de souris en point d'interrogation (lorsque la souris est survolée) et un soulignement en pointillés.