Caractères gras et CSS

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

Mirovinben
Lézard vert
Messages : 194
Enregistré le : 13 nov. 2004, 08:54
Localisation : Dole
Contact :

Caractères gras et CSS

Message par Mirovinben » 27 févr. 2005, 09:58

Bonjour,

Je souhaite différencier complétement le fond (texte sous HTML) de la forme (CSS) comme mes lectures, questions et réponses dans ce forum m'incitent à le faire. Je me pose une question (encore ? :oops: la 3ème aujourd'hui... désolé !) :

Cette question concerne l'utilisation de la "balise" <b> qui devient obsolète, semble-t-il et est aisément remplacée par un "font-weight: bold;" en CSS. Mais ce n'est pas trop pratique lorsqu'on ne veut mettre en gras qu'un seul mot dans un paragraphe... Faut-il créer un style spécifique à l'aide de la balise <span> ou peut-on sémantiquement, tolérer l'usage du <b> ?

Question annexe :
En CSS, quand on nomme (baptise) un style, faut-il lui donner un nom sans rapport avec son rendu ou peut-on l'évoquer dans son "nommage" ? Exemple, je veux donner une couleur spécifique à certains liens... est-il bien venu de le baptiser par exemple a.Pink {...} ou vaut-il mieux dé-corréler son nom de la couleur...

Merci d'avance...
Bienheureux les fêlés car ils laissent passer la lumière...

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51
Localisation : Le frigo scandinave
Contact :

Re: Caractères gras et CSS

Message par calimo » 27 févr. 2005, 10:43

Mirovinben a écrit :Bonjour,

Je souhaite différencier complétement le fond (texte sous HTML) de la forme (CSS) comme mes lectures, questions et réponses dans ce forum m'incitent à le faire. Je me pose une question (encore ? :oops: la 3ème aujourd'hui... désolé !) :

Cette question concerne l'utilisation de la "balise" <b> qui devient obsolète, semble-t-il et est aisément remplacée par un "font-weight: bold;" en CSS. Mais ce n'est pas trop pratique lorsqu'on ne veut mettre en gras qu'un seul mot dans un paragraphe... Faut-il créer un style spécifique à l'aide de la balise <span> ou peut-on sémantiquement, tolérer l'usage du <b> ?
Tout dépend de ce que tu veux faire. Si c'est juste pour décorer, alors il faut effectivement utiliser un font-weight:bold;. MAIS je doute que ce soit là à titre purement décoratif dans ton cas, mais que c'est bel et bien dans le but de mettre en évidence ton texte que tu as cette balise <b>.
Dans ce cas, il existe des moyens de mettre en évidence des morceaux de texte :wink: Ce sont les éléments em et strong, em servant à mettre de l'emphase sur le texte, et strong a mettre une emphase plus forte. À toi de choisir lequel tu veux, sachant que em est souvent rendu en italiques dans les navigateurs graphiques et strong en gras. Mais via les CSS tu peux très bien mettre en gras tes em si tu estimes que c'est une simple emphase que tu veux, et qu'il n'y a pas d'insistance forte dessus :wink:
Mirovinben a écrit :Question annexe :
En CSS, quand on nomme (baptise) un style, faut-il lui donner un nom sans rapport avec son rendu ou peut-on l'évoquer dans son "nommage" ? Exemple, je veux donner une couleur spécifique à certains liens... est-il bien venu de le baptiser par exemple a.Pink {...} ou vaut-il mieux dé-corréler son nom de la couleur...

Merci d'avance...
Mieux vaut effectivement mettre un nom sans rapport avec le rendu, mais plutôt un nom en rapport avec le sens que tu donne à la classe.
Dans ton cas ta classe "pink" le jour où tu trouve que le rose est plus drole mais que tu veux la mettre en vert vif... eh ben tu es embêté, tandis que si tu lui a mis un nom représentant à quoi elle sert, tu pourra facilement changer sa représentation graphique. Quelques exemples dans les trucs et astuces du W3C : Use class with semantics in mind.

Mirovinben
Lézard vert
Messages : 194
Enregistré le : 13 nov. 2004, 08:54
Localisation : Dole
Contact :

Message par Mirovinben » 27 févr. 2005, 11:26

Merci Calimo d'avoir si rapidement et si exhaustivement répondu à mes 2 questions.

Pour la première, je voulais me simplifier la frappe (un peu cossard l'gars pour tapper <span class="xxx">...</span> !!) et je vais adopter <em> plutôt que <b> ou <strong> qui se rapprochent trop de ma 2ème question "pink" ou "pas pink"... quitte à enrichir mon <em> dans la CSS en fonction du conteneur qui, lui, aura un "id" ou une "class" selon mes besoins...

Pour la deuxième, ça confirme ce que je pensais... autant dé-corréler totalement...
Bienheureux les fêlés car ils laissent passer la lumière...

HP
Tyrannosaurus Rex
Messages : 2196
Enregistré le : 21 oct. 2004, 10:25
Localisation : meatspace
Contact :

Message par HP » 27 févr. 2005, 14:21

<strong></strong> remplace <b> en XHTML me semble t'il ...
il n'est pas forcément nécessaire de passer par CSS pour utiliser le gras me semble t'il ...

en tout cas <strong> valide en XHTML strict ...

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”

Mirovinben
Lézard vert
Messages : 194
Enregistré le : 13 nov. 2004, 08:54
Localisation : Dole
Contact :

Message par Mirovinben » 27 févr. 2005, 14:35

Tout à fait d'accord avec toi, "HP"... mais si on veut séparer la forme du fond on doit légitimement s'interdire l'usage de balises modifiant l'affichage d'un texte dans le code HTML et faire migrer cette mise en forme dans la CSS. Et le mot "strong" évoque trop précisément la mise en "gras" d'un texte... qui peut éventuellement être affiché dans une couleur différente, en italique, gras ou avec une taille de caractère plus grande. Le fait de s'affranchir d'une balise trop explicite rendra la maintenance de la CSS plus aisée (voir les réponses très intéressantes de Calimo à mes différentes questions)...

Je sais, je donne l'impression de couper les cheveux en quatre mais à l'étape où je suis dans mon utilisation de plus en plus intensive des CSS, une erreur de choix peut entraîner une perte de temps et d'énergie dont je souhaite me passer. :wink:

Vous ne pouvez pas imaginer la révolution culturelle que je suis en train de vivre !... Mon but est d'arriver à construire un site qui puisse fonctionner comme Zen Garden (URL ?): changer complètement l'apparence d'un site sans toucher à son contenu en changeant simplement de feuille de style. Le site de Calimo (?) http://extensions.geckozone.org/Accueil est pas mal également dans le genre.
Bienheureux les fêlés car ils laissent passer la lumière...

HP
Tyrannosaurus Rex
Messages : 2196
Enregistré le : 21 oct. 2004, 10:25
Localisation : meatspace
Contact :

Message par HP » 27 févr. 2005, 14:40

enfin à mon sens si gras, barré (<del>) ou italique sont utilisés à bon escient,
ces balises ont autant de sens que les balises de titre (<h1>, <h2>, etc ) ...
la feuille de style pourrait par exemple venir ajouter des effets de couleur par dessus, mais leur place en dur dans le code se justifie aisément à mon sens, ce ne sont pas de simples balises de mise en forme.

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”

Mirovinben
Lézard vert
Messages : 194
Enregistré le : 13 nov. 2004, 08:54
Localisation : Dole
Contact :

Message par Mirovinben » 27 févr. 2005, 14:56

C'est tout à fait vrai...

Le mieux est d'utiliser ces balises dans le Html ET de les re-définir dans la CSS. Ce que je fais déjà avec h1..h6 (mais la signification de ce que peut représenter h1..h6 n'est pas indiqué textuellement dans la balise, contrairement à <b>, <i> ou <strong>...

voui ! je pinaille mais j'avance grâce à vous tous !
Bienheureux les fêlés car ils laissent passer la lumière...

HP
Tyrannosaurus Rex
Messages : 2196
Enregistré le : 21 oct. 2004, 10:25
Localisation : meatspace
Contact :

Message par HP » 27 févr. 2005, 15:04

par contre une question que je me pose c'est pourquoi de HTML à XHTML des balises comme <b> sont devenues <strong>, <strike> est devenu <del> ...
je me demande un peu la nécessité de ces changements ...
:roll:

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”

Mirovinben
Lézard vert
Messages : 194
Enregistré le : 13 nov. 2004, 08:54
Localisation : Dole
Contact :

Message par Mirovinben » 27 févr. 2005, 15:45

J'ai fait un tour sur le site d'Alsacréation - page traitant de ces balises... c'est intéressant. Par contre il semble que l'obsolescence de certaines balises soit controversée...
Bienheureux les fêlés car ils laissent passer la lumière...

HP
Tyrannosaurus Rex
Messages : 2196
Enregistré le : 21 oct. 2004, 10:25
Localisation : meatspace
Contact :

Message par HP » 27 févr. 2005, 16:08

OK, c'est plus clair comme çà !
merci.
:D

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51
Localisation : Le frigo scandinave
Contact :

Message par calimo » 27 févr. 2005, 17:07

Arg, au secours, STOOOOP, vous êtes complètement faux là !!! :(
HP a écrit :<strong></strong> remplace <b> en XHTML me semble t'il ...
il n'est pas forcément nécessaire de passer par CSS pour utiliser le gras me semble t'il ...
Non, il ne remplace pas, il a un sens différent.
b=bold (gras)
strong=mise en exergue forte.

Ce n'est pas du tout pareil. Sauf erreur de ma part, "b" valide en XHTML 1.0 Strict. On peut, par convention, devoir mettre un mot en gras sans vouloir y mettre une emphase.
En tous cas "i" peut se justifier parfois, par exemple dans les noms latins des animaux, il est admis qu'on les mets en italiques. Cela ne veut pas dire qu'on y mets une emphase, pas du tout, c'est juste une convention pour les représenter. Dans ce cas, <i> a tout son sens, et il ne faudrait pas mettre de <em>. C'est rare mais ça existe.
HP a écrit :en tout cas <strong> valide en XHTML strict ...
Et aussi en HTML 4.01 transitionnel. Et probablement aussi en HTML 3.2 etc.
Mirovinben a écrit :Et le mot "strong" évoque trop précisément la mise en "gras" d'un texte...
Ah bon ? Tu trouves ? Moi pas !
Strong comme je l'ai dit est défini par : Indique une mise en exergue plus forte. Je ne vois pas où tu vois le rapport avec une mise en gras. Le gras c'est juste la manière commune qu'ont les navigateurs graphiques pour la représenter. Mais ce n'est pas du tout, mais alors vraiment pas son sens :lol:

Mirovinben a écrit :Zen Garden (URL ?)
http://www.csszengarden.com/tr/francais/
HP a écrit :enfin à mon sens si gras, barré (<del>) ou italique sont utilisés à bon escient,
Argh ! Mais où as-tu vu que del=barré ? Lis les spécifications bon sang !
Dans les spécifications il y a écrit :Les éléments INS et DEL sont utilisés pour marquer les parties d'un document qui ont été insérées ou supprimées, afin de suivre l'évolution des versions de ce document
Le barré ce n'est que la manière de rendre cette suppression dans un navigateur graphique !

HP a écrit :mais leur place en dur dans le code se justifie aisément à mon sens, ce ne sont pas de simples balises de mise en forme.
Ce ne sont pas DU TOUT des balises de mise en forme ! Mais alors vraiment pas du tout du tout. Ce sont des balises qui indiquent la fonction ou l'état d'un bout de texte. Alors c'est vrai que les navigateurs graphiques leur attribuent un style par défaut, mais il ne faut pas le confondre avec leur sens.
HP a écrit :par contre une question que je me pose c'est pourquoi de HTML à XHTML des balises comme <b> sont devenues <strong>, <strike> est devenu <del> ...
je me demande un peu la nécessité de ces changements ...
:roll:
J'espère que tu as compris pourquoi ce que tu as écrit est totalement-archi-absolument faux ? Si non je réexplique ;-) Mais c'est très important de bien comprendre la différence.

b=bold/gras
strong=mise en emphase forte, et il se trouve qu'il est représenté par la mise en gras dans les navigateur graphiques.

i=italique
em=emphase, et il se trouve qu'il est représenté par la mise en italiques dans les navigateur graphiques.

strike=barré
del=supprimé, et il se trouve qu'il est représenté en barré dans les navigateur graphiques.

u=underline/souligné
ins=ajouté, et il se trouve qu'il est représenté par le soulignement dans les navigateur graphiques.

HP
Tyrannosaurus Rex
Messages : 2196
Enregistré le : 21 oct. 2004, 10:25
Localisation : meatspace
Contact :

Message par HP » 27 févr. 2005, 17:29

et pourquoi <strike> ne valide pas en XHTML ?
:roll:
je pensais à le remplacer par <del> du coup ...
mais finalement, je ne sais plus trop quoi faire !
:lol:

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51
Localisation : Le frigo scandinave
Contact :

Message par calimo » 27 févr. 2005, 17:42

HP a écrit :et pourquoi <strike> ne valide pas en XHTML ?
:roll:
je pensais à le remplacer par <del> du coup ...
mais finalement, je ne sais plus trop quoi faire !
:lol:
Mais il valide en XHTML 1.0 Transitionnel

Par contre il ne valide pas en HTML 4.01... strict :wink:

Tout dépend du sens qu'il a. C'est juste purement et uniquement décoratif ? Un text-decoration:line-trough (ou un truc du genre) est parfait. Mais si c'est un passage supprimé --> del :wink:

Si c'est autre chose, il faut trouver encore autre chose.

Mirovinben
Lézard vert
Messages : 194
Enregistré le : 13 nov. 2004, 08:54
Localisation : Dole
Contact :

Message par Mirovinben » 27 févr. 2005, 17:55

Heu... juste pour mettre mon grain de sel en attendant que les pages perso de Wanadoo soient à nouveau disponibles :

Je crois me rappeler que "strong" chez les imprimeurs typographes signife (signifiait ?) "caractère gras"... mais je n'en suis plus si certain.

Quoiqu'il en soit j'utiliserai <em> parceque c'est moins fatiguant à saisir... :oops: :shock: :D

Dans mon Harrap's "strong" = "fort"... :wink:
Bienheureux les fêlés car ils laissent passer la lumière...

HP
Tyrannosaurus Rex
Messages : 2196
Enregistré le : 21 oct. 2004, 10:25
Localisation : meatspace
Contact :

Message par HP » 27 févr. 2005, 17:58

calimo a écrit :Tout dépend du sens qu'il a. C'est juste purement et uniquement décoratif ? Un text-decoration:line-trough (ou un truc du genre) est parfait. Mais si c'est un passage supprimé --> del :wink:
OK ...
je me servirai d'un <del> comme prévu ...




idem chez moi pour le Harrap's :wink:

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 0 invité