28172 sujets

CSS et mise en forme, CSS3

Les <div> peuvent-elles être remplacées par une balise "dir

Bonjour !

Toujours en phase d'apprentissage, je me creuse la tête pour comprendre quelle peut bien être la différence entre

<style type="text/css"> 
.foo {background-color: #66CCFF;} 
</style>


<body> 
<div class="foo">Joli fond bleu</div> 
</body>


et

<style type="text/css"> 
foo {background-color: #66CCFF;} 
</style>

<body> 
<foo>Joli fond bleu</foo> 
</body>

Modifié par Frouppy2 (01 Sep 2009 - 16:24)
Salut,

J'ai bien envie de te dire que c'est parce que la balise foo n'existe pas alors je vais te le dire :
C'est parce que la balise foo n'existe pas.

Si tu veux plus de précisions, il serait bien que tu nous dises quelle est la balise exactement que tu veux mettre à la place de la balise foo. L'usage est totalement différent par exemple si c'est une balise de type block ou inline.
Et il serait bien aussi de mettre ta balise dans un contexte qui peut être totalement différent si tu as plusieurs balises foo, une seule, si elles sont imbriquées dans d'autres ou non.
Administrateur
Bonjour,

foo = exemple en anglais technique (foo et bar) mais cet élément (on dit à tort balise aussi) n'existe pas en HTML.
Un formateur pourra l'utiliser pour dire "n'importe quel élément div, form, span, p, h1, h4 et ce que vous voulez" mais en aucun cas ce n'est utilisable dans une vraie page HTML.
Comme je pourrais écrire pour expliquer à un étranger comment écrire une adresse postale française:
a écrit :
Jean Dupont
1 Rue de la Gare
01234 VILLAGE

Village, 01234 et Jean Dupont n'existent pas plus que "foo" mais c'est pour l'exemple Smiley smile

Si ça fonctionne quand même, ça ne fonctionnera pas dans IE6 en tout cas et ce n'est pas valide donc IE6 a parfaitement le droit de faire ça.

Une classe s'appelant "foo" c'est autorisé par contre.

Si tu savais déjà ce qui précède et que tu voulais dire <div class="p"> vs <p> par exemple, bah déjà ça ne fonctionnera pas avec form ou pre ou a et pour d'autres on utilise l'élément qui est fait pour ça et quand aucun élément ne correspond à un usage (genre "menu" qui a eu existé mais qui est déprécié ou "footer" alors là comme l'élément n'existe pas on utilise un div ou un span qui n'ont aucune sémantique particulière et on leur rajoute un id ou une classe décrivant leur fonction : nav ou menu, footer)


EDIT: en XML on a le droit à tous les éléments mais XML n'est pas HTML, on ne peut pas créer ses propres DTD
Modifié par Felipe (01 Sep 2009 - 12:22)
euhhhhhhhhhhhhhhhhh Felipe ... Je n'ai pas compris grand chose à vrai dire Smiley biggol

Je reformule ma question :

J'ai l'impression que mes deux syntaxes sont correctes et que dans les deux cas, j'ai à la fois :
- La mise en forme que je désire
- Un poids sémantique nul

Du coup : "Pourquoi utiliser une syntaxe plutôt qu'une autre" ? (Je suis désolé si je donne l'impression de radoter, mais quand je ne comprends pas, je ne comprends pas...)
Modifié par Frouppy2 (01 Sep 2009 - 13:02)
En HTML, tu ne peux pas inventer tes balises si tu veux que tout les navigateurs les comprennent de la même façon. La balise <foo> n'existe pas, tu ne peux donc pas l'utiliser.

Comme Felipe te l'a très bien expliqué, foo est un mot générique qui peut être remplacé par n'importe quoi, il est utilisé dans les exemples.

Tu as l'air de débuter, commence par te documenter sérieusement sur HTML/CSS. Un petit conseil perso pour bien débuter : utilise un bon vieux éditeur de texte plutôt que Dreamweaver.
Administrateur
Frouppy2 a écrit :
euhhhhhhhhhhhhhhhhh Felipe ... Je n'ai pas compris grand chose à vrai dire Smiley biggol

Je reformule ma question :

J'ai l'impression que mes deux syntaxes sont correctes et que dans les deux cas, j'ai à la fois :
- La mise en forme que je désire

Coup de bol ? Smiley lol Tu ne peux pas compter sur le bon vouloir des navigateurs, il existe forcément un navigateur (passé, présent ou à venir) qui ne va pas apprécier les libertés que tu prends avec la norme HTML Smiley cligne
C'est vrai que les navigateurs acceptent pas mal d'erreurs mais de là à compter dessus ...

Frouppy2 a écrit :
- Un poids sémantique nul

Du coup : "Pourquoi utiliser une syntaxe plutôt qu'une autre" ? (Je suis désolé si je donne l'impression de radoter, mais quand je ne comprends pas, je ne comprends pas...)

Vouloir ajouter de la sémantique en s'écartant totalement de la norme, c'est déconseillé Smiley smile
Modifié par Felipe (01 Sep 2009 - 15:12)
Felipe a écrit :

[...] Tu ne peux pas compter sur le bon vouloir des navigateurs, il existe forcément un navigateur (passé, présent ou à venir) qui ne va pas apprécier les libertés que tu prends avec la norme HTML Smiley cligne


Bon, euuuhhhh ok, donc, si j'essaie de résumer à ma sauce débutant, et sans utiliser le mot-clé foo qui semble être un peu troublant pour tout le monde, en gros, si je schématise

CETTE SYNTAXE EST CONSEILLEE :

<style type="text/css">
.jolifondbleuciel {background-color: #66CCFF;}
</style>

<body>
<div class="jolifondbleuciel">ce texte a un fond bleu</div>
</body>



CETTE SYNTAXE EST DECONSEILLEE :

<style type="text/css">
jolifondbleuciel {background-color: #66CCFF;}
</style>

<body>
<jolifondbleuciel>ce texte a un fond bleu</jolifondbleuciel>
</body>

Modifié par Frouppy2 (01 Sep 2009 - 16:25)
HTML est une norme qui définit un certain nombre d'éléments. Si tu définis tes propres éléments: tu ne fais plus du HTML, tu ne respecte plus la norme, ton code est invalide, tu fais ta propre mixture et tu fais des offrandes aux dieux mauvais pour que ton code soit compris par les navigateurs.

Une distinction qui peut t'aider (même si je ne sais pas si elle est bien orthodoxe), c'est la différence entre syntaxe et vocabulaire. HTML est un langage avec une syntaxe et un vocabulaire. Tu respectes la syntaxe, mais tu inventes ton propre vocabulaire.

Voici une erreur de syntaxe en HTML:
<p><strong>Kikoo lol</p>

Et voici une erreur de vocabulaire:
<kikoo lol>PTDR</kikoo>


Il est recommandé de produire du code HTML valide, qui respecte à la fois la syntaxe et le vocabulaire de ce standard. Même si les agents utilisateur arrivent à «rattraper» un certain nombre d'erreurs aussi bien de syntaxe que de vocabulaire, il n'est pas conseillé de se fier à ces largesses car on finit par avoir des surprises. Pour être plus précis:
- Tu peux avoir 10 erreurs de validation mais un seul problème qui en résulte. Le souci, c'est qu'il est bien difficile de retrouver quelle erreur de validation crée le problème concret. Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meule de foin et on maudit la personne qui a produit ce putain de saloperie de code de merde! (Que ce soit soi-même ou une autre personne.)
- Tu peux avoir 10 erreurs de validation et 0 problème dans un navigateur, 1 problème dans un deuxième navigateur, 6 dans un autre, 2 dans un dernier... Il n'y a pas de standard pour la compréhension de ce qui est hors-langage. Le standard, c'est de respecter la syntaxe et le vocabulaire du langage.
Modifié par Florent V. (02 Sep 2009 - 15:37)
Florent V. a écrit :
Il est recommandé de produire du code HTML valide, qui respecte à la fois la syntaxe et le vocabulaire de ce standard. Même si les agents utilisateur arrivent à «rattraper» un certain nombre d'erreurs aussi bien de syntaxe que de vocabulaire, il n'est pas conseillé de se fier à ces largesses car on finit par avoir des surprises. Pour être plus précis:
- Tu peux avoir 10 erreurs de validation mais un seul problème qui en résulte. Le souci, c'est qu'il est bien difficile de retrouver quelle erreur de validation crée le problème concret. Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin et on maudit la personne qui a produit ce putain de saloperie de code de merde! (Que ce soit soi-même ou une autre personne.)
- Tu peux avoir 10 erreurs de validation et 0 problème dans un navigateur, 1 problème dans un deuxième navigateur, 6 dans un autre, 2 dans un dernier... Il n'y a pas de standard pour la compréhension de ce qui est hors-langage. Le standard, c'est de respecter la syntaxe et le vocabulaire du langage.

En langage plus simple, tu t'exprime au plus simple pour être compris au mieux par tous, pour ne limiter l'erreur de compréhension qu'à l'interprétation de chacun. Smiley biggrin
Autrement, outre le fait que tu ne peux pas utiliser des éléments hors-norme et assumer que le navigateur leur appliquera par défaut une interface HTMLElement (au grand dam de ceux voulant utiliser html5 tout de suite), il y a une autre différence.

Les règles ".foo{}" et "foo{}" utilisent deux selecteurs différents. Deux selecteurs qui ne sont pas évalués au même score (poids si tu préfères), le score s'exprimant par un vecteur à quatre dimensions cela te donne respectivement :

.foo => évalué à => [0,0,1,0]
foo => évalué à => [0,0,0,1]
Florent V. a écrit :
chercher une aiguille dans une meute de foin

Tout doux le foin, tout doux ! Smiley lol

-t +l
Florent V. a écrit :
[...]différence entre syntaxe et vocabulaire. HTML est un langage avec une syntaxe et un vocabulaire. Tu respectes la syntaxe, mais tu inventes ton propre vocabulaire.[...]


J'aime bien ton analogie au vocabulaire et à la syntaxe !!!

Mais qu'on soit bien d'accord, je ne désire pas créer mes propres règles et "faire le malin" avec mes balises à moi, style "c'est moi le plus fort"...

Non non, c'est juste qu'en découvrant CSS, j'ai cru bien comprendre qu'on pouvait sans souci créer ses propres règles de mise en forme, et je ne pensais pas déclarer la guerre aux navigateurs en définissant mes propres balises...

Je dois avouer que CSS, dans mes premières approches me paraissait complexe. Puis, en comprenant l'articulation de ce "langage", j'ai finalement trouvé ceci passionnant, et pas si compliqué (Notamment les DIV et SPAN qui me paraissaient le graal de la mise en forme). Puis, dans un troisième temps, notamment au fil de cette discussion, je trouve cette imbrication de normes, de bonnes manières, d'incompatbilités entre navigateurs carrément compliquée, voire incompréhensible, et dans ma tête, j'ai presque envie de conclure : "Je fais mon site bien comme je veux, du moment qu'il tourne avec Internet Explorer, le reste, ça me fatigue !"... Je sais que c'est politiquement très incorrect de dire ça, mais c'est ce que je finis par penser à la longue... Smiley biggol

Y en a-t-il qui me comprennent ?
J'ai l'impression que tu as voulu faire beaucoup d'un coup et que tu es parti sur de mauvaises pistes... Un tutoriel pour débutant?

Edit : l'idéal c'est de faire son site pour les navigateurs modernes (firefox, safari, opera) et puis de faire les retouches pour IE. Smiley cligne
Modifié par Patidou (02 Sep 2009 - 13:21)
Patidou a écrit :
les navigateurs modernes (firefox, safari, opera)

Tu peux rajouter IE8 si on parle uniquement du support de HTML 4 et CSS 2.1. (Ce qui est déjà pas mal.)
Patidou a écrit :
J'ai l'impression que tu as voulu faire beaucoup d'un coup et que tu es parti sur de mauvaises pistes... Un tutoriel pour débutant?


C'est possible que je me soie fourvoyé... Il est très syma ce tutoriel ! Je vais le suivre, effectivement.
Sujet clos
Aller à