28172 sujets

CSS et mise en forme, CSS3

Différence entre classe (.) et id (#)

Bonjour !

Je crois comprendre, a force de le lire sur tout le web, qu'une classe se définit une fois, et peut être réutilisée autant de fois qu'on veut dans une page web, mais qu'un id ne peut (doit ?) être utilisé qu'une seule fois..

Certes !

Mais dans ce code:

<head>
<style type="text/css">
#truc {color: red;}
</style>
</head>


<body>
<p id=truc>Foo</p>
<p id=truc>Bar</p>
</body>


Je m'attends tout naturellement à ce que Foo soit écrit en rouge, mais pas Bar... Or, quelque soit le navigateur, les deux textes sont écrits en rouge... J'aurais trouvé pourtant drôlement pratique que seul Foo soit écrit en rouge...

C'est moi qui n'ai rien compris, ou c'est un bug ?
Modifié par Florent V. (27 Aug 2009 - 09:42)
Modérateur
Salut Frouppy2 et bienvenue sur le forum,

Certes, certains navigateurs vont acceptés. Cependant, la compatibilité à long terme ne va être optimale. Au validateur W3C, il y a bien une erreur.

validateur W3C a écrit :

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).


En outre, ton code comporte également une erreur supplémentaire. La valeur des attributs doivent être entourés par des guillemets.

Au passage, je te remercie par avance de rééditer ton message afin d'entourer ton code par les boutons qui vont biens (règle 13).

++
Nolem a écrit :
Salut Frouppy2 et bienvenue sur le forum,


Merci merci !!!

Nolem a écrit :
Certes, certains navigateurs vont acceptés. Cependant, la compatibilité à long terme ne va être optimale. Au validateur W3C, il y a bien une erreur.


D'accord... EN tout cas, ça n'engage pas vraiment à utiliser les ID ... Smiley decu

Nolem a écrit :
En outre, ton code comporte également une erreur supplémentaire. La valeur des attributs doivent être entourés par des guillemets.


Woupssssssssssssss !!!

Nolem a écrit :
Au passage, je te remercie par avance de rééditer ton message afin d'entourer ton code par les boutons qui vont biens


Alors là, je rame, je rame... J'ai bien pensé ça, mais rien ne fonctionne chez moi... Ni smiley ni une quelconque mise en forme... Dès que je sélectionne mon texte pour le mettre en forme, a peine ai-je cliqueé sur une couleur, ou gras, ou quoi que ce soit, le texte se désélectionne, et rien ne se met en forme...

++
Smiley biggrin
Frouppy2 a écrit :


Ni smiley ni une quelconque mise en forme... Dès que je sélectionne mon texte pour le mettre en forme, a peine ai-je cliqueé sur une couleur, ou gras, ou quoi que ce soit, le texte se désélectionne, et rien ne se met en forme...

++


Les balises de code arrivent à la fin de ton texte sur le forum (réédite ton message, et tu verras ce que je veux dire Smiley smile )

Un ID se doit d'être unique, car il peut être utilisé pour fabriquer une ancre. Si tu en a plusieurs, tu ne pourras diriger ton visiteur uniquement vers la première ancre (première ID). Mais aussi, ... ca peut être aussi super aléatoire suivant le navigateur.

Une classe peut être utiliser plusieurs fois, mais ne peux pas servir d'ancre.
Modifié par Super_baloo8 (27 Aug 2009 - 02:55)
Frouppy2 a écrit :
Je m'attends tout naturellement à ce que Foo soit écrit en rouge, mais pas Bar... Or, quelque soit le navigateur, les deux textes sont écrits en rouge... J'aurais trouvé pourtant drôlement pratique que seul Foo soit écrit en rouge...

Les navigateurs essayent de s'adapter aux auteurs de pages web qui, comme toi, produisent du code invalide. Il n'est pas dit que tous les navigateurs le feront toujours de cette manière, donc mieux vaut rester dans les clous, cependant cette erreur dans l'utilisation de l'attribut id est tellement courante que ce comportement des navigateurs est destiné à perdurer.

On notera aussi que si utiliser le même id sur plusieurs éléments dans une page ne pose pas de problème concret en CSS, ce n'est pas le cas en JavaScript.
Florent V. a écrit :

...auteurs de pages web qui, comme toi, produisent du code invalide.


Ouah l'autre hè... reste poli
Smiley cligne avec les pauvres débutants qui se débattent avec les CSS.

Je suis programmeur de formation, et je dois dire que ce que je trouve troublant, limite désagréable, c'est cette extrême tolérance des navigateurs qui s'escriment à vouloir absolument donner un résultat correct, quoi qu'on fasse...

Du coup, comme dans mon exemple, on se creuse drôlement la tête pour comprendre la différence entre une classe et un ID que finalement tout le monde utilise indifféremment... Smiley langue
Si tu veux, tu peux faire en sorte que les navigateurs ne laisse rien passer* en envoyant les pages en application/xhtml+xml (IE ne le supporte pas, à réserver pour des tests). Souvent les pages statiques sont lues dans ce mode quand les fichiers ont l'extension .xhtml (à la place de html).


*du moins en xhtml
Modifié par Patidou (27 Aug 2009 - 15:41)
Frouppy2 a écrit :
Je suis programmeur de formation, et je dois dire que ce que je trouve troublant, limite désagréable, c'est cette extrême tolérance des navigateurs qui s'escriment à vouloir absolument donner un résultat correct, quoi qu'on fasse...

Il serait intéressant de voir où en serait le Web aujourd'hui, sans cette tolérance historique (sur laquelle les navigateurs ne peuvent pas revenir). De même que l'on peut se demander où en serait le XHTML (le vrai, servi en "application/xhtml+xml" et interprété par un parseur XML) si IE avait supporté cette technologie.

Frouppy2 a écrit :
Du coup, comme dans mon exemple, on se creuse drôlement la tête pour comprendre la différence entre une classe et un ID

La différence:
- la spécification;
- une convention d'usage qui applique la spécification et réserve les identifiants pour des éléments précis, et les classes pour des styles réutilisables.

C'est pas très compliqué. À cela on peut rajouter des conventions d'usage plus précises à usage personnel ou pour un projet ou une équipe. Des coding conventions, donc. Exemple de convention plus précise: les id sont réservés aux principaux conteneurs et à certains éléments de l'interface globale; les contenus, et les niveaux les plus fins de l'arbre DOM, utilisent plutôt les classes.

Frouppy2 a écrit :
que finalement tout le monde utilise indifféremment... Smiley langue

Qui a dit que tout le monde produisait du code invalide et ne savait pas utiliser les id? J'ai dit que l'erreur était très courante, ça ne veut pas dire qu'elle est majoritaire ou même qu'elle touche ne serait-ce que 10% des sites. Juste qu'elle est suffisamment répandue pour que la plupart des utilisateurs d'un navigateur aient à en souffrir si jamais ce navigateur décidait d'un coup d'être strict sur ce point.
[HORS SUJET]

En tout cas, même si je suis fâché avec les ID Smiley confus , je vous trouve très accueillants et précis dans vos réponses dans ce forum !

J'ai cherché dans Google "Forum CSS", et je suis tombé sur des forums "Counter Strike" Smiley biggol

Puis, en grattant un peu, je suis tombé ici, et je ne le regrette pas !

Merci de votre bon accueil, même si je suis (un peu ? Smiley lol ) maladroit ...
Sujet clos
Aller à