 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Indiquer visuellement la langue d'une ressource |
| |
| C'est en faisant intervenir les pseudo-attributs du langage CSS que l'on peut préciser ainsi à l'internaute la langue d'une page liée.
(16/03/2005) |
 |
 |
Forum |
|
|
Réagissez
dans les forums de JDN Développeurs
|
Un site Web peut contenir toutes sortes de liens, envoyant le lecteur intéressé
vers d'autres sites, sans que celui-ci puisse connaître par avance la langue de
site lié. La balise A, marquant le lien, dispose
d'un attribut hreflang, mais celui-ci n'est généralement
visible qu'en se plongeant dans le code source.
Les pseudo attributs
de CSS permettent cependant de résoudre de manière graphique cette situation.
Plus précisément, il est possible d'afficher, via CSS, le contenu de l'attribut
hreflang après le lien, sans pour autant devoir
modifier le code HTML ni gêner l'accessibilité... bien au contraire.
Un lien vers JDN Développeurs pourrait ainsi prendre cette forme :
<a href="http://www.journaldunet.com/developpeur/"
hreflang="fr-FR">JDN Développeurs</a>
Les codes de langues sont expliqués
en ligne, et sont le plus souvent composés de quatre lettres : les
deux premières correspondent à la langue,
la deux dernières au pays
d'application. "pt-BR" indiquera ainsi la langue portugaise telle
que parlé au Brésil, "en-UK" l'anglais parlé en
Angleterre. La seconde partie est facultative pour certaines langues.
La CSS permettant d'afficher la langue pourrait être ainsi :
a[hreflang]:after { content: " [" attr(hreflang) "] ";
}
ce qui donnera
JDN Développeurs [fr-FR]
On pourra même préciser le tout :
a[hreflang='fr-FR']:after { content: " [page en français
(France)] "; }
Pour obtenir :
JDN Développeurs [page en français
(France)]
Notez bien que comme de nombreuses techniques avancées CSS, celle-ci n'est
accessible qu'aux navigateurs modernes, ce qui met malheureusement souvent IE6
hors-jeu.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
|
|
|
|
|
|
