Discussion :

[FoxLeRenard]

Je doute fortement qu'on y arrive un jour: chaque navigateur est doté de son propre moteur de rendu (même si les différents moteurs tendent naturellement à se rapprocher d'un comportement standard en partie grâce à un plus grande conformité aux specs CSS) et surtout ses styles par défaut ne sont actuellement pas normalisés malgré une feuille de style indicative HTML4
(à noter que qu'XHTML2 s'est doté quant à elle d'une CSS UA normalisée).

Il faudra bien y arriver, notre culture fait que nous pouvons comme ici, parler des heures sur le bien fondé de xxxxx....
Mais déjas nos enfants ne comprennent même pas qu'on en parle

Il auraient plus-tôt tendance a me tomber dessus en m'apportant leur iphone en disant "pourquoi ton site il est tout déformé sur mon iphone ?"

[sidimoha2]

Pour ma part, je m'efforce de toujours faire du code qui respecte les standards. C'est en imposant la normalisation (par des moyens marketing, effet de mode, buzz, ...) que les éditeurs feront en sorte que le rendu de leurs navigateurs respecte les spécifications du W3C. Tous le monde y gagne :
- les éditeurs affiche des produits de qualité (qui respecte les normes),
- les internautes n'auront pas de différences de rendu lors de leur navigation,
- et ça sera moins casse-tête pour les développeurs web et les infographistes ;-)

Mais c'est sur, que mettre en place une politique de dev orienté "respect des normes W3C" peut être difficile pour les boites qui font du web :
Extrait du site www.compliant.fr :

"La mise en conformité d'un nombre limité de pages (la page d'accueil et les principales sections ou types de pages) est une solution dont les bénéfices sont immédiats et qui permet de se faire une idée du temps approximatif de mise en conformité d'un site. Mais cette méthode a ses limites : dans certains cas, la mise en conformité absolue d'un site, c'est-à-dire de l'intégralité de ses pages peut dissimuler une masse de travail gigantesque.

Il a été montré que la mise en conformité répondait à une distribution de Pareto, 80% des problèmes peuvent être très facilement résolus. Les 20% restants sont dus à (...)"

[Macmillenium]

Mais c'est sur, que mettre en place une politique de dev orienté "respect des normes W3C" peut être difficile pour les boites qui font du web :
Extrait du site www.compliant.fr

Parler des recommandation du W3C, c'est parler de :

ATAG (Authoring Tool Accessibility Guidelines)
AWWW (Architecture of the World Wide Web)
CC/PP (Composite Capabilities/Preferences Profiles)
CGI (Common Gateway Interface)
CSS (Cascading Style Sheet / Feuilles de style en cascade)
DOM (Document Object Model)
GRDDL (Gleaning Resource Descriptions from Dialects of Languages)
HTML (HyperText Markup Language)
MathML (Mathematics Markup Language)
OWL (Web Ontology Language)
RDF (Resource Description Framework)
SMIL (Synchronized Multimedia Integration Language)
PNG (Portable Network Graphics)
RDFa (Resource Description Framework for HTML)
SML (Service Modeling Language)
InkML (Ink Markup Language )
URL (Uniform Resource Locators)
URI (Universal Resource Identifiers)
XML Signature
XML Encryption
XProc (XML Pipeline Language)
XML Processing Model
SVG (Scalable Vector Graphics)
SOAP( Simple Object Access Protocol)
XForms
XHTML (eXtensible HyperText Markup Language)
XML (Extensible Markup Language)
XPath
XQuery
XML Schema
XSLT (Extensible Stylesheet Language Transformations)
EXI (Efficient XML Interchange)
HTTP (HyperText Transfer Protocol)
PICS (Platform for Internet Content Selection)
POWDER ( Protocol for Web Description Resources )
XPointer (XML Pointer)
WSDL (Web Service Definition Language)

http://fr.wikipedia.org/wiki/World_Wide_Web_Consortium

Il est plus correcte de parler de la validité syntaxique des documents (X)HTML/CSS et le respect des recommandations WCAG publiées par le WAI et qui vise principalement les développeurs des pages web.

[djisse]

Euh oui et non. En effet ca peut amélioré la lisibilité d'un code, et dans le même temps c'est assez pompeux de le respecter a la lettre. J'oublie souvent les

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<br />

, mais par contre pour les doctypes je les copie/coller tout le temps!

[tibotibo69]

Bien sur que c'est intéressant d'avoir des normes à respecter pour programmer une appli.On gagne du temps une fois les normes apprises , le code est plus clair donc plus facile à débugger.

On peut le voir avec les structures MVC ou n'importe quel framework; il faut respecter certaines règles mais en contre-partie, ça nous simplifie la vie !

[edenreal]

Je pense que les normes W3C sont utiles.
Personnellement je m'assure toujours que mes pages soit valide W3C (une fois qu'elles sont fini de codé).

Cela permet d'avoir un code plus propre et surtout plus accessible par une tiers personne qui pourrais avoir à intervenir dessus. De plus malgré leurs existence il y à souvent des "incohérences" avec IE alors je n'ose imaginer ce que ca donnerais sans.

En complément cette validation permet de voir parfois, souvent d'ailleurs de petite erreur qui (sur le moment) ne se manifestées pas au niveau du rendu.

Je pense cependant que pour renforcées leur utilités ces normes devraient être rigoureusement respectées par tout les navigateurs.

[defacta]

Salut,

Personnellement je suis pour le respect des standards afin que tous les navigateurs affichent de la même façon une page au pixel près, ce qui est le cas aujourd'hui de Safari/Firefox/Google Chrome et Opera (pour ce que je fais), par contre IE7 ou plus ou moins pose des soucis, comme d'hab.

Par contre, imposer un style de codage dans ce style, (http://www.howsthat.ie/:):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
	<div class="obl">
		<div class="tr">
			<div class="bl">
				<div class="br">
					<div class="cnt">
			  		<div class="left"><div class="dater">(10 Aug 07)</div><div class="n-titlel2">Music Concerts</div><div class="clear"></div>
 
			  		<p>How's that? Ltd plodded through the mud, wind and rain, to provide our OB facilities for one of the most respected music festivals in Europe... Oxegen                                             ... <a href="http://www.howsthat.ie/done/?client_id=84">Read more</a></p>
 
</div><img src="http://www.howsthat.ie/clients_videos/46ceffe20874b.jpg" class="cl" />
			  		<div class="clear"></div>
					</div>			
			  	</div>
		  	</div>
		</div>
 
	</div>

C'est moi qui ait fait ce code, mon chef m'obligeait à utiliser les <div>:
Je trouve ça complètement débile, l'utilisation de tableaux est beaucoup plus efficace, rapide et facile à comprendre donc facile à reprendre quelques mois plus tard.

La on comprend rien, c'est quoi <div class="obl", et surtout pourquoi <div class="tr" après obl ?

Un tableau, c'est clair, c'est carré, on sait où se trouve chacune des cellules et en générale TOUS les navigateurs réagissent de la même façon avec les tableaux...

Et vous, vous préférez faire des <div dans des <div dans lesquelles il y a des <span ?

Vincent.

[Xunil]

C'est sûr qu'avec un code html aussi infecte on peut hésiter à conserver les tableaux...

La divite et spanite aigüe ont leurs remèdes
=> sémantique.

Un tableau sert à ... des données tabulaires.

[defacta]

C'est sûr qu'avec un code html aussi infecte on peut hésiter à conserver les tableaux...

La divite et spanite aigüe ont leurs remèdes
=> sémantique.

Un tableau sert à ... des données tabulaires.

Minute papillon, regarde ces 2 pages:
http://boxfly.free.fr/
http://boxfly.free.fr/index.php?cate...1024&disfade=1
Codées uniquement avec des tableaux il y a plus de 7 ans de ça, le coding HTML m'a pris style 1 heure maximum avec les tests Firefox et IE6 à l'époque et aujourd'hui l'affichage est le même pour TOUS les navigateurs (Opera, Safari et Google Chrome).

Une question simple: Pourquoi faire autrement puisque cela marche avec TOUS les navigateurs ?

Une autre question simple: Pourquoi dire que les tableaux ne doivent servir qu'aux données tabulaires si ils peuvent servir aussi pour l'affichage ?

L'objectif du jour: Donnez-moi une seule raison valable justifiant l'utilisation de <div et <span pour faire ce qu'il était déjà possible de faire avec des <table !

[Xunil]

« Une question simple: Pourquoi faire autrement puisque cela marche avec TOUS les navigateurs ? »
Cf, ma réponse précédente...

« Pourquoi dire que les tableaux ne doivent servir qu'aux données tabulaires si ils peuvent servir aussi pour l'affichage ? »
Je répondrais par une métaphore.
Pourquoi on peut se servir d'une brosse à dent pour récurer les gogues, et d'une brosse à chiotte pour se laver les dents (si si c'est possible )

Je viens de te dire que tu as la divite aigüe et que tu n'utilises pas du tout la sémantique des balises.
Et puis bon, ton code html ouais il a 7 ans et ça se voit.
Moche, lourd, et inaccessible.

[HiRoN]

Une autre question simple: Pourquoi dire que les tableaux ne doivent servir qu'aux données tabulaires si ils peuvent servir aussi pour l'affichage ?

Dans ce cas, un <div> (balise neutre) pourrait remplacer un <p> (paragraphe), etc...

Et on se retrouvé avec des sites utilisant seulement 2/3 balises complètement dépourvus de sens (comme un site construit via un éditeur WYSIWYG).
Tout est question de sémantique, utiliser les bonnes balises à bon escient (ce qui est gage de qualité et permet un meilleur référencement naturel)...

Si utiliser des table à tout va était la bonne solution, pourquoi a-t-on inventé les balises span et div ?

Un titre h1 au sein d'une page pourrait très bien être remplacé par un div, span, p, table, etc... Mais ne serait alors plus un titre... Il en aurait l'apparence (via mise en forme CSS), mais ce ne serait qu'une utilisation détourné d'une balise n'étant pas faite / crée pour ça... (dans ce cas, les 3/4 des balises ne servent à rien alors ?), le principe est le même pour une table...

Néanmoins, je comprends ton point de vue (aucun soucis la dessus), mais ne peut y adhérer...

[defacta]

Et puis bon, ton code html ouais il a 7 ans et ça se voit.
Moche, lourd, et inaccessible.

Bien sur, moche, lourd et inaccessible, tout dépend de qui regarde quoi, à chacun sa vision du "beau, légé et accessible".

Je mets exactement 2 espaces à chaque début de nouvelle ligne, quand je regarde un <table, je sais à quoi il sert même si je le regarde 3 mois après l'avoir codé.

Je suis en train de dev ceci:
http://www.elizanet.com/
Et franchement, je ne vais pas changer ma façon de coder pour que certains puissent me dire "cool il utilise les div"...surtout que l'affichage marche avec TOUS les navigateurs, sauf IE pour lequel je suis obligé de faire cette fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function JS_IE_FixDisBug() {
  if(IsIE) { document.getElementById('TD_SpaceMenuTop').style.paddingTop = 4 ; }
  if(IsIE) { document.getElementById('TD_SpaceMenuTop2').style.paddingTop = 1 ; }
}

Y avait 1 pixel de décalage...
Je me contrefous complet de ce que pense les autres developpeurs, surtout quand leurs argumentations me parle du "beau".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
	&gt; <a class="contentlink" href="../2009/08/24/25831.html">Lire la suite</a> (0 commentaire). <span class="isnew" id="isnew:25831:1">&nbsp;</span> <script type="text/javascript">is_content_noted(25831,1,44220)</script> [<b>dépêche</b>&nbsp;: 12162 caractères] 
	</p>
 
 		</div>
 
 
 
 
 
 
 
        <div class="titlediv contentnews">

Des espaces dans tous les sens, quand une div est fermée on ne sait pas laquelle c'est, etc...

A toi ->

[12monkeys]

Bonsoir

Pour ma part je ne parlerais d'utiliser les div contre les tableaux : parce que ce n'est pas exact, il faut parler de l'utilisation d'un code sémantique. Et comme on l'a dit justement Hiron (et d'autres) utiliser des div dans tous les sens est tout aussi faux que d'utiliser des tableaux pour gérer la structure du site.

Utiliser un code sémantiquement correcte signifie qu'on utilise les bonnes balises au bon endroit: et donc ne plus utiliser les tableaux pour la structure du document.

Quels en sont les avantages : le code va être plus léger, donc plus rapide à télécharger, réduction de la bande passante... Un code lourd ne dépend pas de la vision de chacun : en passant un site en tableaux vers un site fondée sur une mise en page en CSS, on réduit sérieusement le nombre de lignes, le poids du fichier. Ce n'est pas "selon la vision de chacun", c'est très objectif et calculable. De plus une page très fournie avec une présentation complexe, aura une imbrication de tableaux aussi imbuvable que des div avec des noms de classe et d'id qui ne signifient rien ! Et on ne saura pas non plus quel table est fermée à tel endroit comme l'exemple que tu donne pour les div...

Utiliser les bonnes balises et le CSS pour la mise en page permet une plus grande flexibilité : on peut par exemple changer la présentation du site sans toucher à chaque page HTML : il suffit de changer le fichier CSS... Voir l'exemple de Zengarden...

Des espaces dans tous les sens, quand une div est fermée on ne sait pas laquelle c'est, etc...

Ca c'est de la mauvaise foi : c'est exactement la même chose avec les tableaux (voir plus haut) si un développeur n'indente pas correctement son code, en quoi est ce la responsabilité du codage en div ?

[defacta]

Ca c'est de la mauvaise foi : c'est exactement la même chose avec les tableaux (voir plus haut) si un développeur n'indente pas correctement son code, en quoi est ce la responsabilité du codage en div ?

C'est vrai que quand je vois le source de cette page: http://mediatemple.net/

C'est vraiment clean comme code...

Tellement clean que je vous offre une partie ;-):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="nrg" class="homesplash">
  <div id="nrgdiv" >
    <h2 class="hide">Built to Scale.</h2>
    <div class="nmhero">
      <div class="haspopup"><a class="nrglink1 gshome trigger" href="/webhosting/gs" title="(gs) Grid-Service"><em>(gs)
            Grid-Service</em></a>
        <div class="popup" id="gspopup">
          <div class="poptext">An all-purpose hosting solution designed to handle
            large spikes of traffic with ease.</div>
 
        </div>
      </div>
      <div class="haspopup"><a class="nrglink2 dvhome trigger" href="/webhosting/dv" title="(dv) Dedicated-Virtual"><em>(dv)
            Dedicated-Virtual</em></a>
        <div class="popup" id="dvpopup">
          <div class="poptext">Dedicated resources with the flexibility of virtualization.
            Customizable for nearly anything.</div>
        </div>
      </div>
      <div class="haspopup"><a class="nrglink3 dpvhome trigger" href="/webhosting/nitro" title="(dpv) Nitro"><em>(dpv)
            Nitro</em></a>
 
        <div class="popup" id="dpvpopup">
          <div class="poptext">Ultimate performance for high-traffic projects.
            One handles anything, stackable to handle everything. </div>
        </div>
      </div>
    </div>
  </div>
</div>

[Xunil]

Tu es très rigolo quand même

Si le but est d'aller trouver les codes les plus pourris du web, ça peut durer éternellement...
Des codes merdiques, il en existe aussi bien qu'avec des bases en table que sans

Je te suggère au contraire de chercher des sites références et d'en regarder la source.

Après chacun son point de vue, mais là ton argumentation ne tient pas la route.

[Bisûnûrs]

Quel est l'intérêt de s'arrêter sur l'indentation d'un code source affiché depuis un navigateur ? Aucun.

Dans la majeure partie des cas, les gros sites ou même simplement les petits sites dynamiques ont un code source généré à l'aide d'un langage de script. Donc l'indentation peut être correcte dans les fichiers mais merdique dans le code source du navigateur.

Ce qui amène à une autre question : Quel est l'intérêt de rendre l'indentation d'un code source affiché depuis un navigateur potable ? Aucun. Tant que les fichiers sur lesquels le ou les développeurs bossent sont correctement indentés et qu'ils arrivent à s'y retrouver.

@defacta : Et j'imagine que si ton code source est aussi nickel, c'est que tu n'as jamais utilisé de PHP pour générer du contenu.

[Bovino]

De plus une page très fournie avec une présentation complexe, aura une imbrication de tableaux aussi imbuvable que des div avec des noms de classe et d'id qui ne signifient rien ! Et on ne saura pas non plus quel table est fermée à tel endroit comme l'exemple que tu donne pour les div...

Pour s'en persuader, il suffit de regarder le code source généré pas un CMS ou un forum, c'est incompréhensible...

je suis pour le respect des standards afin que tous les navigateurs affichent de la même façon une page au pixel près, ce qui est le cas aujourd'hui de Safari/Firefox/Google Chrome et Opera

Permet moi d'en douter, les styles par défaut sont très différents...

Et franchement, je ne vais pas changer ma façon de coder pour que certains puissent me dire "cool il utilise les div"...surtout que l'affichage marche avec TOUS les navigateurs, sauf IE pour lequel je suis obligé de faire cette fonction:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function JS_IE_FixDisBug() {
  if(IsIE) { document.getElementById('TD_SpaceMenuTop').style.paddingTop = 4 ; }
  if(IsIE) { document.getElementById('TD_SpaceMenuTop2').style.paddingTop = 1 ; }
}

Y avait 1 pixel de décalage...

Tu peux réinitialiser les styles en CSS pour avoir des affichages plus cohérents.

Ce qui amène à une autre question : Quel est l'intérêt de rendre l'indentation d'un code source affiché depuis un navigateur potable ? Aucun. Tant que les fichiers sur lesquels le ou les développeurs bossent sont correctement indentés et qu'ils arrivent à s'y retrouver.

Pas mieux, qu'est-ce-qu'on s'en fout d'avoir un code généré bien indenté
Le plus important est bien sûr la source sur laquelle on travaille.

Utiliser les bonnes balises et le CSS pour la mise en page permet une plus grande flexibilité : on peut par exemple changer la présentation du site sans toucher à chaque page HTML : il suffit de changer le fichier CSS... Voir l'exemple de Zengarden...

Là encore, entièrement d'accord, va créer des pages avec des styles personnalisables avec des table !

Utiliser un code sémantiquement correcte signifie qu'on utilise les bonnes balises au bon endroit: et donc ne plus utiliser les tableaux pour la structure du document.

D'accord aussi à un bémol près, l'essentiel des balises HTML ont pour origine et donc pour but d'afficher des documents qui n'ont rien à voir avec une page Web actuelle, donc respecter l'aspect sémantique est parfois difficile en fonction du type de contenu.

[Erwan31]

Permet moi d'en douter, les styles par défaut sont très différents...

Oui, sans parler des différences de rendu et de comportement spécifiques à chaque moteur de rendu. Il ne faut pas espérer obtenir exactement le même rendu tant qu'il n'y aura pas un moteur de rendu unique et des styles par défaut normalisés.

Je "plussoie" sur les remarques précédentes mais on dévit du sujet initial, ce n'est pas une question de normes ici mais de sémantique voire d'accessibilité.

Dans la plupart des cas des tableaux imbriqués sont nuisibles à l'accessibilité, plus lent à s'afficher (particulièrement sur IE, peut-être qu'IE8 à changé la donne à ce niveau je sais pas), plus lourd...

Ceci dit dans certains cas de figure les possibilités de CSS parfois trop limitées rendent inévitable l'usage d'un tableau de mise en forme (bien linéarisés pour l'accessibilité). Par ailleurs, tant que le support des valeurs de display table-machin ne sera pas généralisé (pas encore implémenté sur IE7-), le comportement des tableaux ne pourra pas être reproduit via CSS (uniquement via une bibliothèque Javascript).

[defacta]

Quel est l'intérêt de s'arrêter sur l'indentation d'un code source affiché depuis un navigateur ? Aucun.

@defacta : Et j'imagine que si ton code source est aussi nickel, c'est que tu n'as jamais utilisé de PHP pour générer du contenu.

J'utilise Emacs comme editeur de texte, je ne pense pas qu'il y ait plus puissant comme éditeur, mais cela vient du monde Unix et est peu utilisé par les window-siens de base...

Quand tu codes en PHP ou même en ASP ou peu importe, et que tu indentes bien ton code sous emacs dans un echo " ou print ou peu importe il sortira bien indenté dans le code source du navigateur, forcément.

Mon code PHP génère non seulement de l'HTML mais aussi du JavaScript et tout est bien indenté, exemple de variables JavaScript générées en PHP en fonction de données récupérées dans une base:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
echo "
<script language=\"JavaScript\">
var chapter_numbers = new Array() ;" ;//On repasse au PHP
 
while($list_chapters->next_record()) {
  echo "//Et voici le JavaScript
chapter_numbers[$i] = ".$list_chapters->f("chapter_number")." ;
chapter_ids[$i] = ".$list_chapters->f("chapter_id")." ;
photos_url[$i] = \"imgs/picbooks/$picbook_id/".$list_chapters->f("chapter_number").".jpg\" ;
photos[$i] = new Image(); " ;
  $i++ ;
}
 
echo "

Et là miracle, simplement en précisant un retour chariot juste après le echo " tout devient bien indenté...
PS: Le while est du PHP alors que juste avant c'était du JavaScript.

Maintenant si l'un d'entre vous pouvait présenter un joli code div-like, ce serait cool...

[MeDeVa]

Bonjour à tous,
Je n'est pas pris le temps de lire toutes les pages du sujet, mais j'ai une question concernant directement le problème !

Je m'efforce moi aussi de respecter les normes du W3C, mais quand bien même, il y aura toujours des différences avec certains navigateurs...

Grosse question : Comment faire ? Créer plusieurs feuilles de style CSS (une pour chaque navigateur) ?
En gros je me demande quelle est la solution de la plupart des sites pour remédier a ces problèmes ?