Discussion:Le langage CSS/Techniques avancées

Remplacement d'un texte par une image

Bonjour,
J'ai un peu peur quand je lis un titre tel que Remplacement d'un texte par une image ;)
je suppose en effet que l'on va expliquer comment prendre un texte HTML, le masquer via CSS (display:none, classe de Bowman ou astuce apparentée à base de text-indent), dimensionner l'élément et faire apparaître un pseudo-contenu CSS vie background.
Petit problème: il s'agit bel et bien d'une génération de contenu CSS, c'est à dire d'une information qui ne sera pas perceptible (affichable) dans divers contextes utilisateurs, car elle dépend de l'application des propriétés de couleurs (et donc de background-image) par le navigateur. Un simple détour par l'option courante dans IE désactiver les couleurs... suffit à en illustrer l'inaccessibilité selon WCAG.
A éviter dans ici, AMHA ;) --LgD 15 mars 2007 à 18:39 (CET)

Il existe justement des techniques qui permettent d'allier accessibilité et graphisme car c'est un problème auquel la communauté CSS est sensible. Le but est d'avoir par exemple des titres dans des polices inaccessibles pour les navigateurs (et les utilisateurs) qui affichent les images de fond. JM. Philippe 19 mars 2007 à 22:14 (CET)

Il existe justement des techniques qui permettent d'allier accessibilité et graphisme: justement non, c'est ce que j'expliquais ;)

c'est un problème auquel la communauté CSS est sensible : hum... l'assimilation de l'accessibilité aux CSS nécessite actuellement quelques solides remises en cause, tout particulièrement dans la communauté CSS ;)

avoir par exemple des titres dans des polices inaccessibles : oui, c'est à dire justement sans passer par CSS, et via de bonnes vieilles images HTML.

--LgD 20 mars 2007 à 20:12 (CET)

Consulte http://www.mezzoblue.com/tests/revised-image-replacement/ et on en reparlera. C'est mieux de se renseigner avant de s'avancer ;-). JM. Philippe 21 mars 2007 à 09:28 (CET)

Oui, cette page est connue. Chacune des variantes qu'elle présente échoue dans au moins un des contextes utilisateurs suivants:

• CSS activées, images désactivées (pas d'image ni de texte ou d'alternative textuelle)
• CSS et images activées, couleurs désactivées (pas d'image ni de texte ou d'alternative textuelle)
• CSS, images et couleurs activées, styles de tailles de polices ignorées pour permettre l'agrandissement selon les besoins de l'utilisateur (chevauchement texte/image, contenu illisible)
  Pour tout dire, c'est parce que ces techniques ont fait l'objet d'évaluations répétées et récentes dans le cadre d'expertises en accessibilité que je permets justement de m'avancer en toute connaissance de cause et d'intervenir. Mais bon.... ;) --LgD 21 mars 2007 à 11:49 (CET)

Techniques avancées plus probantes à présenter

Pour dépasser le problème précédent ;), les "techniques avancées" CSS qui pourraient être abordées ici ne manquent pas. Par exemple:

• l'utilisation des contextes de formatage pour les mises en pages à base de flottants
• la maîtrise des rendus dans IE Windows via les techniques du "haslayout" (et les commentaires conditionnels)
• :after et les CSS print (l'impression de l'url des liens)

--LgD 21 mars 2007 à 12:15 (CET)