Bidouillage

Salut,

Le fait qu'une tache aussi elementaire que le centrage vertical soit compliquée en CSS, et certaines observations du meme genre, me font penser que le Web Design est en partie du "bidouillage" plutot qu'une discipline basee sur une architecture serieuse et coherente.

Depuis que j'ai commence a etudier tout ca il y a un an, j'ai dans ma tete l'image d'un immeuble moderne (le CSS) construit sur un amoncellement de carcasses de voiture (l'organisation des pages web), c-a-d qu'on essaie tant bien que mal de "faire avec", plutot que de jeter a la poubelle cet affreux systeme pour le remplacer par un autre avec lequel on pourrait faire ce qu'on veut (et ne pas batailler des heures pour realiser un malheureux centrage vertical).

Bien sur je suis conscient qu'un tel remplacement est impossible, et que nous sommes d'une certaine facon "condamnés" a travailler a la surface de cet amoncellement de carcasses de voiture.

Est-ce que d'autres que moi partagent la meme impression ou est-ce que je suis a l'ouest ?

Hello,

apericube a écrit :
Le fait qu'une tache aussi elementaire que le centrage vertical soit compliquée en CSS

Ben non justement : le centrage vertical est extrêmement simplement géré en CSS. Il ne requiert que deux instructions :

display: table-cell; (ou inline-block)
vertical-align: middle;

Après, qu'on me dise que c'est compliqué à cause du retard de certains navigateurs, je dis oui. Mais certainement pas à cause de CSS.

apericube a écrit :
j'ai dans ma tete l'image d'un immeuble moderne (le CSS) construit sur un amoncellement de carcasses de voiture (l'organisation des pages web), c-a-d qu'on essaie tant bien que mal de "faire avec", plutot que de jeter a la poubelle cet affreux systeme pour le remplacer par un autre avec lequel on pourrait faire ce qu'on veut

Je crois surtout, et malheureusement, que les CSS sont appris "sur le tas", "à la va vite" sans vraiment comprendre vraiment les règles de base (modèle de boite, types d'éléments HTML, positionnements, fusion de marge, etc.)... et du coup, on tâtonne pour obtenir ce qu'on veut. Et ça foire.
Modifié par Raphael (28 Oct 2009 - 10:49)

Juste un gros +1 pour Raphael.

L-A :

a écrit :
un immeuble moderne (le CSS) construit sur un amoncellement de carcasses de voiture (l'organisation des pages web)

> Je ne parlais pas du CSS mais de ce sur quoi travaille le CSS.

Raphael : J'ai posté mon message peu apres avoir lu ce post : http://blog.themeforest.net/tutorials/vertical-centering-with-css/, qui dit que cette methode marche pas avec IE7 ni avec IE8 (beta version a l'epoque de l'article). Je l'ai donc ignoré pour passer aux methodes suivantes. Maintenant j'ai pas verifié moi-meme ce qu'ils disent !

Bonjour,

apericube a écrit :
qui dit que cette methode marche pas avec IE7 ni avec IE8 (beta version a l'epoque de l'article)

Elle marche avec IE8. Soit elle ne marchait pas avec la toute première beta de IE8, soit ils se sont planté dans leurs tests.

apericube a écrit :
Je l'ai donc ignoré pour passer aux methodes suivantes.

OK. Donc mettons qu'on n'utilise pas cette méthode parce qu'elle n'est pas compatible IE6 et 7. On admettra qu'on ne parle pas de CSS, ni même de CSS 2.1, mais du support de CSS 2.1 dans les navigateurs du marché, anciennes versions comprises.

Partant de là, pas de problème pour dire que le CSS 2.1 dans IE6 est limité et parfois foireux. D'une part de nombreuses propriétés ne sont pas supportées ou pas complètement, et d'autre part le rendu des éléments dans IE6 est gouverné par un mécanisme étranger à CSS 2.1 et à tout standard, à savoir le HasLayout. Donc oui, ça pose problème, oui c'est chiant. La conséquence, c'est que pour maitriser ce que l'on fait il faut une somme de compétences importante. Voilà pourquoi c'est un métier: l'intégration web (ou le développement front-end).

C'est une discipline difficile, comme la plupart des disciplines. Décrire cette difficulté comme un champ de ruines ou un amoncellement de carcasses de voitures, ce n'est pas vraiment un signe de professionnalisme à mes yeux.

Je pourrais dire la même chose pour l'emailing en HTML. Dans ce domaine ou sous-domaine de l'intégration web, la situation est vingt fois pire techniquement... mais la bonne réaction n'est pas l'abattement, mais plutôt de revoir quels sont les objectifs atteignables (un indice: le rendu visuel parfait dans tous les clients mail ne doit pas en être un), et de travailler sur ces objectifs.

À l'avenir, avec la disparition d'IE6 puis IE7, on aura beaucoup moins de problèmes avec CSS 2.1. Mais les attentes se seront déplacées, et la difficulté aussi: CSS3, support de JavaScript, technologies émergentes, etc. Le niveau de difficulté risque de rester constant, voire de s'élever.

Pour finir, une technique de centrage vertical en CSS compatible IE6:

<table><tr><td>
  <div>Mon contenu à centrer</div>
</td></tr></table>

table {
  width: 100%;
  height: 500px;
  border: none;
  border-collapse: collapse;
}
td {
  padding: 0;
  vertical-align: middle;
  background: #CCC;
}
div {
  background: #FAA;
}

Et voilà, magie.

(Et si, c'est du CSS. 14 lignes de CSS dans cet exemple, pour seulement 4 éléments HTML répartis sur trois lignes de code.)
Modifié par Florent V. (29 Oct 2009 - 09:10)

Tout pareil que Florent V., à part que je ne suis pas sûr que la valeur "center" fonctionne. Il me semble bien que c'est "middle" (pas le temps de vérifier ce matin, désolé).

Raphael a écrit :
Tout pareil que Florent V., à part que je ne suis pas sûr que la valeur "center" fonctionne. Il me semble bien que c'est "middle" (pas le temps de vérifier ce matin, désolé).

Pour la propriété vertical-align, c'est middle.

Je m'abstiendrai de parler de la qualité de cet exemple... utiliser un tableau pour la présentation, comme en 1995, c'est vraiment moyen.
Modifié par QuentinC (29 Oct 2009 - 10:42)

QuentinC a écrit :
utiliser un tableau pour la présentation, comme en 1995, c'est vraiment moyen.

Peux-tu préciser ce qualificatif, «moyen»? Quel est le problème concret avec cet exemple?

La réponse «les tableaux ne sont pas faits pour ça» n'est pas suffisante. Merci, tout le monde est au courant que c'est pas fait pour ça. En l'occurrence c'est la solution la plus compatible et la plus robuste. Les solutions CSS qui tentent d'être compatibles avec IE7 et IE6 ne sont applicables que dans des cas bien particuliers, imposent des restrictions importantes sur les contenus, imposent par exemple de fixer en pixels la hauteur du conteneur et/ou du contenu, ne s'adaptent pas en cas d'agrandissement du texte, etc.

Aujourd'hui si on veut un centrage vertical robuste et compatible IE6 et 7, il faut utiliser cette solution. Si par ailleurs elle pose des problèmes concrets, on pourra faire le choix... de faire une croix sur cette demande graphique, et donc pas de centrage vertical.

PS: quelqu'un peut me rappeler le nom de la figure de style qui consiste à annoncer le contraire de ce que l'on fait, par exemple: «Il va sans dire que...»

Edit: c'est une prétérition, ou «figure qui consiste à dire quelque chose en déclarant qu’on se gardera de la dire».
Modifié par Florent V. (29 Oct 2009 - 11:06)

C'est d'affichage CSS dont il est question ici, pas de structure HTML.

Un élément div qui par défaut est affiché comme un bloc est plutôt affiché comme un tableau (ou une cellule de tableau). Il ne devient pas magiquement un élément <table>

a écrit :
Peux-tu préciser ce qualificatif, «moyen»? Quel est le problème concret avec cet exemple?

La réponse «les tableaux ne sont pas faits pour ça» n'est pas suffisante. Merci, tout le monde est au courant que c'est pas fait pour ça.

Ben... les tableaux ne sont pas faits pour ça.

Non, sinon au niveau accessibilité, ça fait peut-être juste un peu plus parler jaws mais sinon ça n'a pas d'autres conséquence. Ca me paraissait seulement un peu déplacé d'utiliser des tableaux « juste pour ça ». J'aime pas, quoi.
Mais bon, si tu dis que c'est la seule solution... on est bien obligé de faire avec.

Désolé si je t'ai vexé, j'avoue y être allé un peu fort.
Modifié par QuentinC (29 Oct 2009 - 17:18)

QuentinC a écrit :
Désolé si je t'ai vexé

Pas vexé. Je suis juste un peu blasé de lire que les tableaux de mise en forme c'est mal. Ce n'est pas idéal, c'est détourner un mécanisme de sa fonction véritable... mais ça ne suffit pas à disqualifier la solution.

De ton point de vue je comprends tout à fait que le centrage vertical ne te fasse ni chaud ni froid. Pour un webdesigner, par contre, c'est quelque chose qui a son importance, à juste titre.

Salut à tous,

Je ne peux que confirmer ce qu'a écrit Florent V., à savoir que :

1. les tableaux c'est pas le mal absolu
2. question robustesse pour le centrage vertical crossbrowser, on n'a pas fait mieux jusqu'à présent
3. c'est lassant de voir ces attaques incessantes contre des méthodes éprouvées mais qui ont le "démérite" de dater du siècle dernier; et coder pour la beauté du code, c'est joli et plein de bons sentiments, mais en mode production c'est pas toujours possible.

Florent V. a écrit :
De ton point de vue je comprends tout à fait que le centrage vertical ne te fasse ni chaud ni froid. Pour un webdesigner, par contre, c'est quelque chose qui a son importance, à juste titre.

Et pour un client qui a validé et payé le travail du webdesigner, ça a aussi son importance