28
Août
08

CSS, design et arrachage de cheveux!





Vous ne vous en êtes sûrement pas rendu compte mais depuis deux jours, je m’arrache les cheveux à complètement refondre la structure CSS du blog. Je fais le ménage de rentrée dans le code afin de le rendre plus « compliant », plus propre et optimisé. Ceci m’a donné l’occasion de me plonger un peu plus profondément dans les méandres du CSS.

Le CSS, c’est le cascading style sheet. Au début de l’internet, il n’y avait que le HTML. Du coup, à chaque fois que l’on voulait mettre en forme du texte ou des images, il fallait redéfinir toutes les propriétés sans possibilité de les réutiliser par ailleurs.

Et puis, les informaticiens étant des gens fainéants par nature, ils ont eu l’idée de créer les CSS. Ce sont des styles ordonnés de manière hiérarchique. C’est super pratique pour développer des sites webs très rapidement puisque l’on peut réutiliser un certain nombre de styles (un peu comme la trame d’un document sous Word). Le problème, c’est que les navigateurs et notamment Internet Explorer ont une interprétation très personnelle de certaines propriétés. Résultat, ce qui marche avec un navigateur ne fonctionne pas avec un autre ou se comporte différemment.

La puissance du CSS permet les mises en forme les plus audacieuses et surtout de contrôler très finement l’interaction des différents blocs entre eux. Le problème, c’est de rendre le site compatible avec toutes les versions de IE et FF. J’ai souhaité autant que faire se peu m’assurer d’une compatibilité entre le blog, IE 6/7 et FF 2/3 qui représentent plus de 95% des browsers utilisés ici.

Je vous passe les détails mais en matière de CSS, il y a deux manières pour aligner des blocs entre eux : en absolu ou en float. La méthode absolue présente l’avantage d’être précise et d’offrir une souplesse totale dans l’ordre d’affichage des cadres. Elle requiert en revanche un certain nombre d’ajustements pour éviter certains chevauchements. La méthode float est beaucoup plus rapide et simple à mettre en place mais présente l’inconvénient de forcer à afficher les cadres « floattant » en premier ce qui n’est pas super pratique lorsque ce sont les sidebars qui flottent comme dans mon cas.

J’ai donc entrepris de passer du float à l’absolu. Je vous passe tous les problèmes d’incompatibilité que j’ai croisé, j’ai maudit les développeurs d’IE 6 une bonne dizaine de fois. Je pense être enfin parvenu à un résultat à peu près propre. Cependant, si vous observez des affichages curieux, n’hésitez pas à me les indiquer, j’essayerai de les corriger.





15 commentaires pour “CSS, design et arrachage de cheveux!”
  1. Gilles dit :

    As-tu testé avec IE8 beta2 ? 😀 Il respecte CSS 2.1 normalement 😉
    Sinon, le coup de Firefox 2 tu peux oublier, la version 3 va être proposé en mise à jour auto dans les mois à venir 🙂
    Sinon, à part moi au boulot par obligation, qui utilise IE6 ?
    LOL
    Et sous FF 3.01 + IE7, aucun souci 🙂

  2. Olivier dit :

    Non j’ai pas testé IE 8, j’ai déjà pas installé IE 7 alors IE 8, on verra en 2010… 😉
    Et puis les versions bêta, je me méfie toujours, y a plein de bugs et de failles de sécurité.

    J’utilise encore IE 6 : au boulot par obligation et chez moi parce que j’aime pas trop la navigation par onglet, je trouve pas cela très pratique et en plus quand tu as un site qui plante le navigateur, tu es obligé de tout fermer alors qu’avec un process différent par fenêtre sous IE 6, tu n’as pas ce genre de pbs. Maintenant, IE 6 et la compliance au CSS, ça fait cinq… 😉

  3. Gilles dit :

    Ha moi je peux pas me passer de la navigation par onglet et heu les navigateurs comme Opéra ou Firefox intègre une restauration des onglets en cas de crash donc je comprends ton problème.
    Mais bon IE7 intégre une meilleure prise en charge de CSS1 (on ne rigole pas) et plus de sécurité, etc. donc je te conseille quand même de migrer, à force tu sentiras la différence je pense.
    En plus certains sites sont vraiment incompatibles IE6 et passent en IE7.
    Essaye de mettre un autre navigateur en plus. au pire un prog. en plus 😀
    J’ai Firefox par défaut et Ie7 pour les sites qui ne passent pas bien (très rares en fait) et on sent la différence, ne serait-ce que le temps de chargement/rendu.
    Et Opéra est pas mal aussi dans ce principe (plus lourd car plus de fonctions de base que FF).

  4. Olivier dit :

    Je ne crache pas sur IE7 et FF… J’ai FF installé sur mon PC aussi mais je l’utilise très rarement. Je passerai sûrement un jour à IE7 mais en matière de migration sous Windows, je fais attention. Quand on a un PC stable, il vaut mieux éviter de le chatouiller…

  5. Gilles dit :

    Oh je suis d’accord avec toi mais côté expérience, je n’ai jamais eu de soucis d’instabilité dûs à IE7. De toute façon, quand on ré-installe XP, c’est IE6 donc on passe toujours par IE6 puis mise à jour vers IE7 😉 (sauf si tu installes Vista) donc amiaclement, passe à IE7 😀 sinon FF passe devant, à cause de la rapidité et surtout des fonctions offertes par les plugins sans compter que grâce aux standards bien interprétés, un site que tu trouves sympa se trouve en plus assez beau et bien fichu (les dév. se casse pas la tête pour le design sous IE6, ils font en général nu truc banal qui passe et réserve le cassage de tête aux navigateurs modernes).
    Sinon, anecdote : IE6 a eu 7 ans il y a quelques jours.
    SEPT ans LOL

  6. Olivier dit :

    C’est sûr que cela ne nous rajeunit pas…

    Le CSS a révolutionné la manière de concevoir des sites webs. IE 6 est sorti alors que le CSS en était à ses balbutiements donc cela explique le rendu un peu aléatoire parfois.

    Pour FF, je suis assez d’accord, il lisse mieux les pages…

  7. Gilles dit :

    IE6 est sorti le 27 août 2001.
    CSS 1 est officiel et publié depuis décembre 1996.
    Sont très longs les balbutiements 😉
    Pour info, CSS2 date de may 1998 et 2.1 de 2005.
    Donc désolé mais Ms a toujours prouvé, jusqu’à récemment, que les CSS, il s’en tapait. C’est un fait. Point.
    Seul IE8 beta2 rend bien CSS 2.1 donc…
    J’attends la finale en VF avec impatience mais je ne pense pas y revenir car FF 3.1 promets bien, genre encore plus vite 😉

  8. Olivier dit :

    Je ne sais pas si tu as une idée de la longueur du cycle de développement d’un logiciel… Une spec, cela s’implémente pas comme ça en claquant des doigts. Certains comportements « curieux » de IE n’ont été remontés que bien après sa sortie. En outre, certains changements de comportement ne peuvent être fait sans changer complètement l’architecture interne d’un logiciel. Bref, ce n’est pas si simple…

  9. Gilles dit :

    3 ans pour implémenter des règles CSS, désolé mais soit à cette époque y’avait 3 dév. maxi chez MS soit c’était pas la priorité.
    Bon, tu me diras, implémenter des recommandations d’un organisme dont on fait partie, c’est inutile LOL
    Bref…
    Voyons le point positif : ton blog est l’un des rares que je peux mater au boulot avec IE6 sans que ça merde, ça devient rare LOL.
    Autre point positif : IE8 semble sur la bonne voie.
    Avec Windows 7, aura-t-on un vrai système d’exploitation (troll inside) ?

  10. Olivier dit :

    lol 🙂
    qu’aurais tu fait si tu n’avais pas eu IE 6 à une époque? et je ne parle pas de Windows…
    Perso, vu le nombre d’attributs du CSS, je pense que cela n’a pas dû être très simple à implémenter, d’autant plus que comme dans bcp de specs, un certain nombre de points sont sujets à interprétation…

  11. Gilles dit :

    Ben y’a un minimum quand même 🙂 et Ie6 est en dessous, sinon on se casserait pas la tête à adapter des sites à IE 😉
    Je reconnais que IE6 était une bonne mise à jour mais IE7 aurait dû sortir 1 ou 2 ans maxi après.
    Je me souviens, quelques mois avant la sortie de IE7, MS disait qu’il n’y aurait jamais d’onglets car les utilisateurs ne le voulaient pas.
    Le problème vient de la culture Ms je pense : on est les meilleurs, les autres existent (ça fait pas longtemps qu’on le reconnaît) mais on les ignore ou au mieux on fait mine de regarder car de toute façon, leur produit n’est que de la crotte.
    En 2008, Windows ne reconnaît pas une partition en Ext3 (Linux). Ca changerait quoi que ça soit reconnu ? Soit on est utilisateur de Linux et ça sert à rien d’ignorer que Linux est là vu qu’on est assez « geek » pour outrepasser les limites MS, soit on n’utilise pas Linux et on ne voit rien mais bon, c’est la culture MS : on est les meilleurs, point.
    La seule façon de bouger de MS est de recevoir un coup de pied aux fesses.

  12. Olivier dit :

    Tu compares des choses qui ne sont pas comparables… Microsoft est une société commerciale. Son but n’est pas de faire plaisir à quelques geeks mais de vendre des licences. Le fait de support les partitions Linux ne lui permettra pas à priori de vendre plus de licences.

    Linux est développé par des passionnés dont le but est de se faire plaisir et qui peuvent passer du temps sur des développements non prioritaires ne rapportant rien.

    C’est un peu comme si tu compares Typepad et WordPress. Typepad est une plate forme packagée pour être commercialisée là où WordPress est un joyeux empilement de features et de plugins dont l’utilité nous semble indispensable en tant que geeks du blog mais dont 95% des utilisateurs lambdas n’ont rien à faire…

  13. Jérôme dit :

    Il ne faut pas maudire les développeurs d’IE6, qui est conforme à l’anarchie qui régnait à l’époque de sa création.

    Il faut Maudire Microsoft d’avoir attendu 5 ans pour le faire évoluer, et remercier Mozilla et autre Opera de les obliger à se bouger un peu.

  14. Jérôme dit :

    « Linux est développé par des passionnés dont le but est de se faire plaisir et qui peuvent passer du temps sur des développements non prioritaires ne rapportant rien »

    Non ça c’était au début.

    Je vous invite à lire cet article qui vous permettra peut-être de réviser votre point de vue sur le supposé amateurisme des développeurs de linux.

    http://sebsauvage.net/rhaa/index.php?2008/04/08/10/59/12-opensource-et-payant

  15. Olivier dit :

    Je ne dis pas du tout que les développeurs de Linux sont des amateurs, loin de là… Il faut des compétences pour développer, que cela soit sur Windows ou Linux. Maintenant, le cycle de développement du logiciel gratuit open source est complètement différent de celui d’une société commerciale pour des raisons évidentes de coût et de rentabilité.



L'autre monde | Thème liquide par Olivier