CSS: Pourquoi j’ai arrêté le web
En ce moment je me retrouve plus ou moins obligé de faire du web.
Qui dit web dit html et css, et c’est surtout dans ce dernier que je me souviens de pourquoi j’ai arrêté de faire du web pour coder du c++.
Je me souviens de l’époque où css est arrivé et où il est devenu obligatoire de ne plus utiliser de balises table sous peine de risquer une vengeance du dieu des Internets.
En effet, l’html est censé n’être que le contenu, le css la mise en forme.
Mais alors, sans tables comment on met en forme un site avec un beau titre en haut, un menu en ligne juste en dessous, des articles en long et à droite un petit bordel ?
Réponse:
On utilise des divs partout. Super, au final on se retrouve avec autant de balises de formatage dans le code html qu’avant.
Pire encore, on se retrouve avec des hacks compliqués pour garder un design fluide (comprendre que la page n’a pas une taille fixe de x pixels, mais occupe x% de largeur de l’écran). Par exemple, une horrible manière de centrer horizontalement un div :
margin-left: auto;
margin-right: auto;
Et là si je veux déplacer le menu pour le mettre à gauche du contenu sans toucher à l’html, je suis baisé.
Alors oui mais le css3 est déjà disponible sur certains navigateurs. Dans mon cas j’ai plus ou de moins de la chance, je peux me permettre d’envoyer chier les utilisateurs d’Internet Explorer (téléchargeable gratuitement ici).
Le css3 c’est des bordures arrondies, d’autres trucs tout autant kikoolol, des tables côté css, des layouts flexibles et des spécifications commencées il y a 5 ans, finies dans 10 autres années. Et puis comme je suis pas si mauvaise langue, je peux rajouter qu’il y a pas mal d’améliorations au niveau de la facilité d’écrire.
Mais au final, toujours rien pour avoir une mise en page. CSS reste un langage de stylisation, et non de mise en forme.
Bah ouais. Les display: table; et display: table-cell; c’est sympa ça évite des float: left; sauf que le seul usage que je trouve c’est pour… faire des tableaux de données.
Les layouts flexibles ça commence à être moins pire : on peut couper en trois lignes notre blog (en-tête, contenu, bas de page) et diviser contenu en deux colonnes. Mais là encore on se retrouve à devoir faire des divs dans le code html.
Une spécification a pourtant retenu mon attention : Template Layout Module.
Avec ça, on designe en css pur la mise en page complète. Et le meilleur, c’est que cette fois pas de boites de flux horizontal/vertical, pas de divs à la con, on fait de l’ascii art :
body
{
display: "zzz"
"asv"
"lol";
}
#header { position: z; }
#menu { position: a; }
#content { position: s; }
#aside { position: v; }
.note { position: l; }
#footer { position: o; }
Plutôt cool non ?
Manque plus que ça sorte.
Comme je te comprends, être développeur/intégrateur web aujourd’hui c’est un peu comme aller à l’usine avant, les prises de tête en plus.
Je compatis.
C’est vraiment pas mieux du point de vue de la séparation de la présentation et du contenu, mais des frameworks CSS comme Blueprint peuvent être utiles.
C’est pour ça qu’aujourd’hui encore j’utilise des tableaux et parfois des - les Dieux de l’interbutt me pardonnent - des align=”center” une balise deprecated mais qui est le seul truc qui fonctionne à coup sûr.
Le CSS c’est sympa, mais les intégristes du xhtml/css strict kikoolol peuvent crever.
Bof, j’arrive toujours à faire ce que je veux en CSS, mais bon, j’admets que le CSS pur n’est pas forcément le plus rapide.
C’est clair que ça devient de plus en plus galère d’avoir un affichage parfait sous tous les navigateurs et que ça nécessite souvent de modifier encore et encore jusqu’à obtenir un travail satisfaisant.
Cest un boulot harassant mais aussi assez jouissif quand tu arrives à réélement faire ce que tu veux.
Moi, ceux que j’aimerai exterminer, ce sont les connards intégristes xHTML du genre :” ta page est pas valide, il faut que tu nettoie le flash de tes vidéos Youtube !”.
Hé, sale con, si les vidéos sont filées avec de l’embed ou si le code n’est pas valide, je pense qu’il y a une raison, et que les ingés payés 10k$ chez Youtube le savent, contrairement à toi qui veut juste emmerder ton monde.
Autant les validateurs qui te sonnent les cloches quand tu as oublié un alt sur un lien, je comprends, c’est utile et ça a une importance. Autant ceux qui commencent à s’exciter quand ils voient une balise embed dans ton code, ça me donne des envies de meurtre.
“Il faut pas mettre de target=”_blank” mais du javascript !”
T’as probablement pas une connaissance très approfondie du CSS, parce que un conteneur en margin auto tu peux très bien mettre un menu a gauche sans aucun soucis.
J’aime que mon contenu soit valide W3C mais je ne suis en aucun cas un intégriste de la structure html. Si pour une raison ou une autre, une table accélère le dév et facilite la mise en page, je réfléchis pas 4 heure a comment je vais le faire en css… je le fais en table.
Moi je suis un intégriste du W3C et des standards ouverts :P
Oui c’est chaud de faire un truc à l’heure actuelle qui passe correctement sur tous les navigateurs, parce que les navigateurs sont pas à jour au niveau des normes. Ça va en s’améliorant.
Cela dit pour en revenir au CSS c’est effectivement loin d’une séparation entre contenu et présentation qui soit parfaite. (pour ça il faut plutôt faire avec un php qui génère les pages en fonction d’un contenu dans un format xml je dirais)
C’est également assez chaud de faire un truc potable qui n’ai pas une largeur fixe :-/
Le support de SVG dans tous les navigateurs aiderait quand-même grandement… (et même du SVG animé, spa Fx?)
Bref, si les navigateurs respectaient les standards existants correctement avant de s’exciter à implémenter les nouveaux trucs, ce serait déjà plus pratique.
Je ne suis pas particulièrement d’accord, généralement j’ai les des affichages très proches avec tous les navigateurs les plus utilisés (FF3+, IE7+, Opera 9+, Safari 3+, Chrome 3+), à l’exception bien sûr d’IE6 (et des vieilles versions de FF).
En fait je dois passer 75% du temps pour FF, 20% à adapter à IE6, 5% pour corriger les différences minimes sur les autres navigateurs.
Je suis d’accord avec MCMic, si les navigateurs géraient bien le SVG, nottament en image de fond CSS, ça faciliterait la vie (je rêve de faire du total vectoriel en CSS).
@__MaX__
Bien sûr. float: left; pour le menu, float: right; pour le bordel à droite, et on peut même inverser les deux facilement.
Presque trop facile : maintenant on rajoute un footer en fin de page. Et si jamais le menu (ou le bordel à droite) se retrouvent plus grands en hauteur que le contenu principal, bam le footer se fait écraser et se retrouve au même endroit que le contenu. Faut alors trouver encore d’autres hacks pour réparer ça. C’est vrai que c’est facile.
@MCMic
Les navigateurs respectent les standards, à peut près. Un reset css (j’aime pas l’idée, mais au final ça aide pas mal), au pire si IE se retrouve avec un résultat un peu différent je m’en fous je suis pas payé à faire du web donc je peux les envoyer balader.
Le SVG c’est bien beau et fun (je pense) mais ça remplace pas une page. Et si jamais ça arrivait, nombreux seraient ceux qui se plaindraient “lol noob,ton blog rame”.
Il semblerait d’ailleurs qu’il existe des plugins pour IE (oui faut l’installer. Ils ont ce qu’ils méritent ces gens là).
Je pense plutôt que ce sont les standards qui ne sont pas au point et c’est dommage qu’on doive attendre 10 ans pour que le W3C commence a avoir des idées correctes, 5 ans de plus pour finaliser, et 1 an de plus pour que les navigateurs de geeks supportent ça.
Wiz : Pas sur de mon coup pour les flottants, mais… clear: both; ?
fiou, moi j’utilise encore des et des target=”_blank”
par contre les tableaux oui j’ai abandonne…
mais il faut se dire que le bon cote du CSS c’est que tu peux changer ton design sans avoir a tout refaire sur ta page, c’est pas cool ? ca doit surement servir a des gens.
okay, je compatis, je regrette le temps des table aussi =(
Rah, je pensais que tu parlais de Counter-Strike Source.
C’est pas un hack du tout. C’est dans les spécifications…
C’est toujours un problème de devoir découvrir les critiques d’un langage par quelqu’un qui visiblement ne le pratique pas régulièrement.
Tu critiques ta vision du css mais pas le langage réel, je trouve.
En général, on se fait bien moins chier à flotter tout du même côté en définissant les largeurs.
Et un bon vieux clear both des familles sur ton footer, normal ?
Je ne vois pas quelle personne sensée peut encore regretter l’époque des tableaux (et j’ai encore l’occasion d’en faire pour les newsletters).
Même mes précédents patrons (imperméable à “l’effet” nouveautés des css) ont été convaincus par les économies de bande passante réalisées suite au passage tout en css.
C’est un problème (moins vrai pour les css qui avancent très vite que pour le html).
Le vrai problème est surtout celui d’un navigateur. Là tu parles de css3 mais ie6 et 7 (et même 8) ont déjà du mal à gérer les sélecteurs avancés du css2.
Kuro m’enlève les mots de la bouche… les écrasements dont tu parles, ce sont les soucis que tu rencontres quand tu fais du css tous les 30 février de l’an. Quand tu maitrises le langage je vois vraiment mais alors vraiment pas où est le soucis.
MCMic, je sais pas si tu bosses fulltime dans le web, mais sérieux quand il s’agit de dimensionner dynamique des conteneurs horizontaux ou verticaux, le css est à pleurer. T’es obligé de passer avec des scripts js dans tous les sens. Une table tu te posais pas de question à ce niveau. Je suis impatient qu’il pondent un jour un bloc qui se dimensionne en hauteur sur un ligne par rapport au plus grand présent sur cette ligne en question mais aussi en largeur pour prendre tout l’espace qu’il peuvent.
je te comprends très bien, et j`aure fait le même dans ton situation
Je fait pas beaucoup de web, mais j’ai eu l’occasion de faire un template Joomla, et c’est clair que c’est la galère pour faire un Layout correct.
Respectez les standards bon dieu !
Les specs disent que quand margin-left et right sont tous les deux à auto, alors le contenu du block est centré, mais le bloc lui même n’est pas pour autant centré.
Un petit test :
On remarque bien que le bloc bleu se retrouvé mélange au bloc rouge. Ce qui nique donc les marges que je peux tenter de donner au bloc bleu, ainsi que l’éventuel fond d’écran que je devrais alors décaler ou masquer.
Bref, le bloc n’est pas centré comme je le voulais mais son contenu. J’appelle ça a un hack puisqu’on ne fait pas ce que je voulais.
Quand je parle de design fluide, ça veut dire un design dont le contenu n’a pas une largeur fixe quelque soit l’écran, chose que j’ai toujours trouvé ridicule. En arriver à devoir fixer la largeur pour avoir ce qu’on veut, j’appelle encore ça un hack.
Et puis si un jour je veux placer mon aside à gauche du content, je fais un float: left; ? Ha ben non c’est déjà fait, j’ai plus qu’à modifier le code html..
Depuis le début je ne nie pas que je suis un noob en css. Mais j’arrive vraiment pas à trouver que le css c’est logique est aussi puissant qu’il devrait l’être.