28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je m'intéresse à la manière la plus appropriée de masquer des éléments de la page, qui ont pourtant une utilité.

Exemple, je souhaite utiliser pour le titre de ma page une balise <h1>, mais je ne veux pas afficher celui-ci car j'ai également mon titre dans une image <img>.

Je vois un peu partout des techniques de ce genre :


.offscreen {
position: absolute;
left: -9999px;
overflow: hidden;
}


Y'a t'il une raison particulière à l'emploi des ces attributs CSS ?

Pourquoi pas simplement un "display: none" ?

Merci pour vos réponses,

Fabien

Edit: je ne trouve pas la source du bug d'affichage dans mon message... Désolé...
Modifié par fabioushka (10 Jul 2009 - 13:23)
Dans ton cas précis, la meilleure méthode, et la seule que je conseille, est :

<h1><img src="" alt="Texte de ton titre qui est également celui de l'image"></h1>


Avoir une image porteuse de contenu dans un fichier CSS et le texte qui devrait être son texte alternatif dans un élément caché est une très mauvaise chose. Principalement parce que si l'image ne s'affiche pas mais que les CSS sont actifs, il n'y a plus rien.
fabioushka a écrit :
Y'a t'il une raison particulière à l'emploi des ces attributs CSS ?
Pourquoi pas simplement un "display: none" ?

Un lecteur d'écran (qui lit ce que lui communique le navigateur, qui lui-même interprète les styles CSS pour l'écran) ne va généralement pas lire un contenu en display:none. Dans certains cas, il ne lira pas non plus un contenu en visibility:hidden. On utilise donc cette astuce de placer un contenu en absolu en dehors du cadre pour garder un contenu lisible par un lecteur d'écran tout en le masquant dans le rendu visuel.
Administrateur
fabioushka a écrit :
Edit: je ne trouve pas la source du bug d'affichage dans mon message... Désolé...

Je balance: Raphael, dew et julixyde en train de tester l'affichage du code dans le forum Smiley smile
Désolé pour le dérangement Smiley smile
Je n'ai plus 3 alertbox par page Smiley crash et le code est coloré, on dirait que ça fonctionne