28173 sujets

CSS et mise en forme, CSS3

Pages :
Pour ceux qui ne connaissent pas la différence entre


acronym : <acronym title="Société National des Chemins de Fer">SNCF</acronym>

abbr : <abbr title="mètre carré">m²</abbr>

dfn : <dfn title="Plan vertical parallèle à un axe antéro-postérieur">plan sagital</dfn>


Le problème est que dans un texte, les acronymes, définitions et abbréviations ne sont pas visible. Beaucoup optent pour changer la forme du curseur lors du survol de la souris pour signaler que le mot est "traité" ... mais encore faut-il passer la souris dessus.

Firefox et Opera mettent un border-bottom sur "acronym" et sur "abbr", Opera met en italique dfn ... cependant je pense qu'il faut mieux mettre en évidence ces termes, aussi je pensais à mettre le mot en surligné, comme quand on tape un mot dans la fonction recherche d'un pdf en ligne et qu'il apparait en jaune ou vert ...

qu'en pensez-vous ?
Modifié par Gunner4902 (11 Jul 2007 - 09:32)
Pour dfn, c'est normalement l'introduction d'une définition. Donc on encadre le(s) mot(s) à définir et puis on continue normalement la phrase avec la définition.

Enfin... C'est comme ça que j'ai compris... Smiley confused
Il est possible d'écrire la définition hors balise ou bien de mettre un title dans celle-ci.

Cependant je trouve qu'elle n'a d'un intérêt qu'avec title, sinon autant faire une parenthèse pour expliciter le terme.

Les deux façons passent aux validateurs XHTML


le texte montrant l'attribut title dans la balise dfn :
web.accessibilisation.net
Modifié par Gunner4902 (11 Jul 2007 - 10:13)
Pour les abréviations et acronymes: à priori, on privilégiera plutôt <abbr>.

Dans les brouillons de HTML5, <acronym> (trop spécifique, trop vague car ne correspondant pas aux mêmes réalités d'une langue à l'autre...) est supprimé au profit de <abbr> (générique pour transmettre l'information «ceci est une forme raccourcie nécessitant une explicitation»).
Modifié par Florent V. (11 Jul 2007 - 12:23)
Gunner4902 a écrit :
Il est possible d'écrire la définition hors balise ou bien de mettre un title dans celle-ci.

Cependant je trouve qu'elle n'a d'un intérêt qu'avec title, sinon autant faire une parenthèse pour expliciter le terme.

Les deux façons passent aux validateurs XHTML


le texte montrant l'attribut title dans la balise dfn :
web.accessibilisation.net


A priori dfn s'utilise plutôt comme suit, tel que je le comprend:

<p>Une personne privée de la vue est atteinte de <dfn>cécité</dfn></p>


Où le p est la définition et dfn le terme à définir.

dfn n'a pour l'instant peu d'utilité puisque elle peu ou pas exploitée, mais pourrait permettre de définir des glossaires par divers traitements, être utilisé par des moteurs de recherches, par des UA fabriquant un glossaire etc. Les utilisations pourraient être nombreuses.

Je crois que Laurent avait fait un billet sur son blog au sujet des définitions.
Rire, ok, vous préférez utiliser dfn en ligne, mais les standards n'interdisent pas l'usage de l'attribut title (et je maintien que si dfn ne sert qu'à encadrer le mot explicité dans la phrase, ça revient à le rendre inutile, puisqu'une apposition fera le même effet et sera plus agréable à la lecture)

Mais celà ne répond pas à la question initiale de ce sujet : comment mettez-vous en valeur dans votre page les balises permettant d'expliquer le contenu (comme abbr par exemple), car renseigner ces balises ne les rends pas pour autant accessibles si on ne les démarques pas du reste de la page et le border-bottom n'est pas présent sur tous les navigateurs Smiley cligne
Gunner4902 a écrit :

qu'en pensez-vous ?


Que s'assurer de la pertinence en terme de sémantique visuelle des choix de css media ="screen" est parfois bien compliqué voire même ardu Smiley cligne

Mais que tu ne parles dans ton sujet que de css et qu'il serait mieux de le préciser, ce d'autant que tu n'as pas poster dans le salon css mais bien dans le salon relatif à l'utilisation du balisage html pour lui même et hors toute représentation en quelque sorte.
Modifié par Christian Le Bouler (11 Jul 2007 - 14:49)
Bonjour tout le monde,

Je me premet de m'incruster ici car je doit moi aussi utiliser une balise pour definir certain mot sur le site que je renove. Et je comptais utiliser la balise dfn avec un title.

Donc j'aimerai savoir si cela est correct ou pas ?

Sinon pour Gunner je pense que pour la demarques la souligner devrai suffire, ainsi que l'italique du dfn et assez visuel.
Halindel a écrit :

Sinon pour Gunner je pense que pour la demarques la souligner devrai suffire, ainsi que l'italique du dfn et assez visuel.

Justement comme tu le remarques fort justement, le boder-bottom est visuellement un soulignement (même si en lèger pointillés), or le soulignement est à réserver aux liens (my opquast) , et pour qqun ayant une vision un peu basse, différencier le soulignement des acronymes et des abbréviations n'est pas évident par rapport à ceux des liens ...
vous me direz et la couleur des liens ? My Opquast recommande de ne pas se fier uniquement sur la couleur, mais de proposer une autre marque de distinction ... donc le border-bottom de abbr et acronym peut sembler problématique ...
quand à l'italique, si l'on écrit en italique un paragraphe (comme une citation) elle n'est plus en éxergue ... Smiley murf

Mais comme le dit Christian, c'est la problématique (insoluble ?) des media screen ...
Perso je ne mettrais pas de title sur le dfn mais juste l'explication dans le contexte de la phrase au moins je suis certain que ça sera accessible par tous.
Le probleme serai si le mot se trouve dans le titre Smiley lol et si on explique le mot apres pas besoin de le mettre en relief.

J'aimerai surtout savoir si c'est pas contraire a certaine norme d'utilise le dfn avec un title Smiley lol
Modifié par Halindel (11 Jul 2007 - 15:12)
Halindel a écrit :
J'aimerai surtout savoir si c'est pas contraire a certaine norme d'utilise le dfn avec un title Smiley lol

le site web.accessibilisation.net propose de mettre l'attribut title, car comme le disait sur un autre topic Laurent Denis, la balise dfn n'est pas clairement définie et laisse donc libre champ à chacun pour user de son emploi avec title ou en usage contextuel ...

Mais celà ne résoud pas le problème de le mettre en évidence dans la page ... Smiley sweatdrop
Après tu peux utilisé le css pour spécifier tout cela. moi je vais le laisser en italique je pense, mais sinon pour toi augmente la taille et en gras peut etre Smiley ohwell
Halindel a écrit :
Après tu peux utilisé le css pour spécifier tout cela. moi je vais le laisser en italique je pense, mais sinon pour toi augmente la taille et en gras peut etre Smiley ohwell

augmenter la taille va générer une hauteur de ligne différente du reste du paragraphe, et mettre en gras ne va pas se différencier du texte en strong ... Smiley ohwell
Pourquoi ne pas rajouter un petit <sup>def</sup> a coté de ton mot avec un title dedans et le tour est joué ??
Gunner4902 a écrit :
Rire, ok, vous préférez utiliser dfn en ligne, mais les standards n'interdisent pas l'usage de l'attribut title (et je maintien que si dfn ne sert qu'à encadrer le mot explicité dans la phrase, ça revient à le rendre inutile, puisqu'une apposition fera le même effet et sera plus agréable à la lecture)


On peut mettre un title sur a peu près tout les éléments Smiley cligne

<span title="mètre carré">m²</span>


a écrit :
Mais celà ne répond pas à la question initiale de ce sujet : comment mettez-vous en valeur dans votre page les balises permettant d'expliquer le contenu (comme abbr par exemple), car renseigner ces balises ne les rends pas pour autant accessibles si on ne les démarques pas du reste de la page et le border-bottom n'est pas présent sur tous les navigateurs Smiley cligne


Je laisse faire mon navigateur et rajoute un pointer. Et la plupart du temps je développe les abréviations.
Sinon, on utilise souvent le soulignement par des pointillés. Par exemple:
abbr, acronym, dfn {
font-weight: normal;
font-style: normal;
text-decoration: none;
border-bottom: doted 1px orange;
}
Florent V. a écrit :
Sinon, on utilise souvent le soulignement par des pointillés. Par exemple:
abbr, acronym, dfn {
font-weight: normal;
font-style: normal;
text-decoration: none;
border-bottom: doted 1px orange;
}

Par expérience, celà pose problème dans le cas où l'acronyme est dans le texte d'un lien (double soulignage peu évident à prendre en compte visuellement).
Pages :