28221 sujets

CSS et mise en forme, CSS3

Bonjour,

premier post en 2005, alors bonne année à tous !

je fais mes premiers pas avec les CSS et je souhaite intégrer le CSS dans le haut de la page XHTML

Sur le site ALLHTML j'ai trouvé la recommandation suivante :

- Comme pour les navigateurs ignorant le JavaScript, vous devez cacher le code des feuilles de styles à l'aide des commentaires :
<!-- //-->

or j'ai réalisé ma page sans cacher le code et cela fonctionne bien et la validation par
le W3C pour CSS et XHTML

Alors que faut-il penser/faire par rapport à cette recommendation ?

Voici le code de ma page test ( repris de vos exemples )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fixe 750, header/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#centre {
background-color:#9999CC;
}
#pied {
height: 30px;
background-color: #99CC99;
}
p {margin: 0;}



</style>
</head>

<body>
<div id="conteneur">
	  <div id="header">header <a href="http://www.alsacreations.com/articles/modeles">(voir tous les modèles)</a> - <a href="http://www.alsacreations.com/articles/modeles/contenu_fixe.css">(voir
    la feuille de style CSS)</a>

</div>

	  <div id="centre">
  	  <p>partie centrale</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	
	<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://monsite.free.fr/test/css/20050105b.htm">http://jigsaw.w3.org/css-validator/validator?uri=http://spherecall.free.fr/test/css/20050105b.htm</a>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>

  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fmonsite.free.fr%2Ftest%2Fcss%2F20050105b.htm">http://validator.w3.org/check?uri=http%3A%2F%2Fspherecall.free.fr%2Ftest%2Fcss%2F20050105b.htm</a>

  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	</div>
	  
	  <div id="pied">pied de page</div>
</div>
</body>
</html>


@+

Gummybear Smiley cligne
euh, oui, mais euh...

Tu pourrais mettre ton code dans du BBcode, comme demandé dans les règles?

[ code]<ul><li>Liste</li></ul>[/ code] (sans les espaces)=>
<ul><li>Liste</li></ul>


Merci d'avance

@+, HoPHP
Modifié le 05 Jan 2005 - 12:31
Administrateur
gummybear a écrit :

Comme pour les navigateurs ignorant le JavaScript, vous devez cacher le code des feuilles de styles à l'aide des commentaires :
<!-- //-->

Oui effectivement, c'est conseillé.
Comme le dit HoPHP, utilise les CODE pour éviter d'avoir une page qui fait 10km de large comme ici.
a écrit :
Oui effectivement, c'est conseillé.


Ça se discute. Ces commentaires ont deux raisons d'être :
1- empêcher l'affichage du js par les navigateurs
2- permettre d'avoir des caractères spéciaux sans les échapper


Le 1 était valable du temps où les navigateurs ne connaissaient pas javascript. Actuellement c'est plus contestable :
A : votre navigateur sait intérpréter le javascript
B : votre navigateur ne sait pas interpréter le javascript mais sait l'ignorer
C : votre navigateur ne sais pas ce qu'est javascript et l'affichera s'il n'est pas dans le <head>.
D : votre navigateur ne sais pas ce qu'est javascript et l'affichera, même s'il est dans le <head> (là le navigateur est fautif).

L'astuce des commentaire n'est nécessaire que pour ceux qui répondent oui à C ou D. Sauf que je doute que quiconque ait vraiment un navigateur de cette catégorie. Même les navigateurs Jaws, lynx, netscape 3, ie 3 ... sont en A ou B. Je ne crois pas que ces commentaires soient encore nécessaire pour le navigateur


Le 2 est plus ou moins toujours vrai. On peut toujours faire trois catégories :
A : le navigateur décode les entités avant d'exécuter (ou pas) le javascript, il sait donc relire "if (1 &lt; 2)", il fonctionne comme le navigateur idéal
B : le navigateur ne décode pas les entités dans le javascript mais n'est pas gêné si on n'échappe pas les caractères spéciaux, on peut donc directement mettre "if (1 < 2)"
C : le navigateur ne décode pas les entités dans le javascript mais part en sucette si ces entités ne sont pas là (ce qui est normal)

Presque tous les navigateurs avec javascript que je connais sont dans la catégorie B, ceux ne sachant pas relire javascript sont dans la catégorie A, les lecteurs XML ou SGML stricts sont dans la catégorie A. Je ne connais aucun navigateur dans la catégorie C.
Or la C est la seule catégorie qui impose l'utilisation des commentaires pour cacher les caractères spéciaux.


Reste un troisième point, la syntaxe de la page. Si on se branche dans le cas 2-B, la page n'est pas correcte coté syntaxe. Le commentaire peut apparaitre comme une solution car il corrige la syntaxe (on peut mettre des caractères spéciaux entre commentaire).
Maintenant ce n'est qu'une illusion car en réalité, un navigateur idéal ne devrait pas interpréter ce qui est entre commentaire (normal, c'est un commentaire SGML/XML et le SGML/XML est interprété avant javascript, c'est la couche au dessous). D'ailleurs Mozilla fonctionnait ainsi en mode XML la dernière fois que j'ai vérifié.
Donc au final on gagne une syntaxe valide mais uniquement coté technique, coté contenu ça revient en théorie à supprimer purement et simplement le code javascript et à se reposer sur une divergeance par rapport à la norme.

Pour ceux qui sont tout de même intéressés ou gênés par ce point 3, je vous conseille la lecture de http://ljouanneau.com/blog/2004/04/06/262-la-section-cdata-en-xml ainsi que des commentaires.
À la limite, si vous souhaitez gérer ce problème, je vous propose la syntaxe suivante qui est beaucoup plus conforme tout en étant aussi compatible à ma connaissance (ça ne traite pas le cas des navigateurs en 1-C et 1-D mais je n'en connais sérieusement aucun qui est encore utilisé) :

<script type="text/javascript" >
// <![CDATA[ 
...
//]]>
</script>


Sinon, deux autres solutions pragmatique :
- mettre les codes js dans le <head> (seul le 1-D pose alors problème)
- mettre les codes javascript en fichier joint (probablement la meilleure solution)


Mais mettre uniquement le code <!-- --> .. ce n'est vraiment plus utile et ça peut faire maintenant presque plus de mal que de bien
Modifié le 05 Jan 2005 - 14:10
Administrateur
@Ganf > merci pour le développement de la question, mais on ne parle pas de javascript mais des styles CSS Smiley cligne (même si cela revient plus ou moins au même)
...sorry pour la mise en forme du message Smiley smile

L'explication très détaillée de Ganf, parle de javascript.
Cela rajoute encore à ma confusion...

Au final, quel est la façon la plus universelle et sure si je souhaite
intégrer ma CSS dans la head de ma page ?
Administrateur
gummybear a écrit :
...sorry pour la mise en forme du message Smiley smile

Je te laisse le soin de l'éditer pour tout remettre en ordre Smiley smile

gummybear a écrit :

L'explication très détaillée de Ganf, parle de javascript.
Cela rajoute encore à ma confusion...

Au final, quel est la façon la plus universelle et sure si je souhaite
intégrer ma CSS dans la head de ma page ?

Ganf a cru que tu voulais parler de code Javascript, mais son intervention s'applique également au cas des CSS.
Mais la meilleure solution reste de placer les styles sur une feuille séparée.
Administrateur
[Résolu], il faut le mettre en éditant le titre de ton sujet.

Et tu en profiteras pour ajouter les balises [ CODE] autour de ton code, n'est-ce pas ? Smiley smile
...quand je répond, je n'ai pas accès ni au titre du sujet, ni à l'ancien contenu...comment le modifier ? Smiley decu
Administrateur
gummybear a écrit :
...quand je répond, je n'ai pas accès ni au titre du sujet, ni à l'ancien contenu...comment le modifier ? Smiley decu

Il ne faut pas répondre.
Va sur ton premier post (celui qui ouvre le sujet) et clique à droite sur le bouton "éditer", à côté du bouton "citer"
Tu pourras ainsi changer ton code et ajouter un [Résolu] dans le titre Smiley smile