Journal Ô Joie, ô bonheur, ô miracle du W3C !

Posté par  . Licence CC By‑SA.
Étiquettes :
29
23
mai
2012

Cher journal,
Je me dois de prendre la plume le clavier pour te conter ma découverte du jour, celle qui illuminera à coup sûr cette journée déjà fort ensoleillée (et par ici, c'est pas si courant que ça…) : les Flex Box de CSS3 !
"Kézako les Flex Box ?" te dis-tu sans doute (oui oui, tu te le dis !), et bien c'est tout simplement LA propriété CSS qui va faire que tu arrêteras de t'arracher les cheveux, que ta femme reviendra au bercail, que tu gagneras au loto même sans jamais jouer, que le trou de la couche d'ozone se résorbera et que Claude Allègre croira au réchauffement climatique d'origine humaine (non, ça c'est pas possible : à l'impossible nul n'est tenu, pas même le W3C).

Bon, je te la fais simple : cette propriété permet à des éléments (par ex. des 'div') de s'aligner côte à côte (horizontalement et/ou verticalement) et de se répartir l'espace libre restant. Autrefois, il fallait se battre à coup de float : left et de width : X%, soit rien de moins que les 2 plus gros emmerdements de tout développeur Web qui a déjà eu à tenir compte de plusieurs navigateurs (et, surtout, d'une famille en particulier).

  • # Table FTW

    Posté par  . Évalué à 10.

    Autrefois, il fallait se battre à coup de float : left et de width : X%, soit rien de moins que les 2 plus gros emmerdements de tout développeur Web qui a déjà eu à tenir compte de plusieurs navigateurs (et, surtout, d'une famille en particulier).

    Tout ça pour ne pas utiliser un tableau, ça en fait de la masturbation intellectuelle…

    • [^] # Re: Table FTW

      Posté par  (site web personnel) . Évalué à 10.

      Le pire c'est que ton commentaire est drôle au second degré, et pertinent au premier.

    • [^] # Re: Table FTW

      Posté par  (site web personnel) . Évalué à 6.

      Tout ça pour ne pas utiliser un tableau, ça en fait de la masturbation intellectuelle…

      Sachant qu'il existe déjà display: table[-cell|-row|-column], ainsi qu'une autre proposition http://dev.w3.org/csswg/css3-grid-layout/ …

      J'ai l'impression que les membres du w3c ont pour objectif de pondre les normes les plus complexes possibles.

      Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.

      • [^] # Re: Table FTW

        Posté par  (site web personnel, Mastodon) . Évalué à 10.

        les propriétés pour les tables n'ont aucun rapport avec le modèle de boite flexible. Avec une table, les élements sont obligatoirement alignés verticalement et horizontalement (bref, ça forme une grille). Ce n'est pas le cas avec le flex. Le contenu peut imposer une taille à son conteneur, mais contrairement au tableau, cela n'impacte pas forcément les conteneurs sur les "lignes" ou "colonnes" d'à coté.

        Bref, table layout : pour faire un affichage tabulaire. flexible layout = pour arranger des éléments d'une interface. L'objectif et le résultat n'est pas du tout le même.

        Quant au grid layout, c'est un mix entre le flexible layout et table layout. J'avoue que là effectivement, on peut s'interroger sur son objectif final…

      • [^] # Re: Table FTW

        Posté par  . Évalué à 3.

        le " display: table[-cell|-row|-column]", ce n'est pas non plus la panacée quand on commence à vouloir faire des trucs tricky.
        Au début, tu veux faire un truc clean en div. A la fin, tu finis par revenir à des tables.

        • [^] # Re: Table FTW

          Posté par  (site web personnel) . Évalué à 5.

          Je ne comprends pas comment on en est arrivé là. Pourquoi n'a-t-on pas un bête système de layout (vertical/horizontal/grid box) ?

          Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.

          • [^] # Re: Table FTW

            Posté par  . Évalué à 3.

            Pourquoi n'a-t-on pas un bête système de layout (vertical/horizontal/grid box) ?

            Parce que ça n'aurait pas été assez doctrinaire novateur. De plus, une fois qu'on a adopté et claironné une doctrine, difficile de se déjuger (cf. Gnome 3).

    • [^] # Re: Table FTW

      Posté par  . Évalué à 10.

      Je n'y connais pas grand chose, mais peut être que l'avantage de ne pas utiliser de tableau c'est de ne pas fixer une structuration dans la page. Si tu veux permettre à tes utilisateur d'avoir un menu horizontal ou vertical l'usage d'un tableau peut être gênant là où un changement de CSS peut être plus simple.

      Je crois que depuis quelques temps il est d'usage sur le web de n'employer les tableaux que pour des données tabulaires et plus pour s'en servir comme gestionnaire de layout. Je présume que ça permet d'avoir un meilleur découplage entre contenu et forme et que d'un point de vu sémantique c'est meilleur.

      Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)

      • [^] # Re: Table FTW

        Posté par  . Évalué à 9.

        Je crois que depuis quelques temps il est d'usage sur le web de n'employer les tableaux que pour des données tabulaires et plus pour s'en servir comme gestionnaire de layout.

        Tu n'y es pas du tout. Voilà ce qu'il c'est réellement passé :

        Au départ il y avait des balises, et les gens s'en servaient quand il y en avaient besoin. Lorsqu'ils avaient besoin d'organiser de donner un structure de tableau à la leur page, ils utilisaient les tableaux. Bêtes qu'ils étaient.

        Mais ce n'était pas de leur faute, on ne leur avait pas dit.

        Un matin, quelqu'un qui était beaucoup plus intelligent que les autres s'est levé avec la ferme intention de bien expliquer à tout le monde qu'utiliser des tableaux pour autre chose que « des données tabulaires » était vraiment très mal et que ceux qui faisaient ça étaient des idiots, ou pire, des républicains qui détruisaient la planète.

        Certains, bien décidés à ne pas passer pour des arrières du midwest l'ont écouté, et ce sont mis en quête de solutions alternatives aux tableaux, à base de CSS, ce qui, vraiment, était beaucoup plus civilisé et intelligent. La marque de cette intelligence supérieure était d'ailleurs le nombre de lignes et la complexité du CSS à mettre en œuvre, sans parler de la compatibilité entre les navigateurs.

        Mais cela n'a pas suffi, certains hérétiques refusaient d'entendre la voix de la raison et continuaient, malgré les insultes constantes, à utiliser des tableaux pour structurer leurs pages. Voyant que ces irréductibles ne céderaient jamais, il faut décidé de leur proposer une voie de conversion au culte CSS plus accessible : Le GRID Layout. Le GRID Layout leur permet de conserver leur culte paien et rétrograde tout en parvenant à l'illumination CSS.

        • [^] # Re: Table FTW

          Posté par  (site web personnel) . Évalué à 10.

          Ça a vraiment un intérêt, ça. Souvent, dans des CMS, on voit des styles qui sont rédigés sous forme conjointe de modèles de génération de page et de styles CSS. Le fait de devoir passer par un modèle de génération de page pour mettre en œuvre un simple style de mise en page montre qu'il y a un réel problème : CSS n'est pas assez complet pour permettre un découplage complet entre le contenu et la mise en page. C'est pour résoudre ce problème qu'on continue à étendre CSS.

        • [^] # Re: Table FTW

          Posté par  . Évalué à 10.

          Voilà…
          Ou alors, les gens ont fini par comprendre que les tableaux imposent une la mise en forme de la page, ce qui est contraire au principe de séparation contenu/mise en forme du HTML/CSS. Va refaire CSS Zen Garden avec des tableaux, et on en reparle…
          Autre point : les tableaux (et surtout, les tableaux dans des tableaux dans des tableaux dans…) emmerdent profondément les navigateurs alternatifs (synthétiseurs vocaux, …) et… les moteurs de recherches, qui ont du mal à trouver ce qui est est le plus important dans la page (ceci dit, la "div-ite aiguë" existe aussi) !
          Le jour où j'ai présenté cet argument à un fan des tableaux, j'ai cru qu'il venait de découvrir la question dont la réponse est 42, tellement ça a fait tilt dans son esprit…

          • [^] # Re: Table FTW

            Posté par  . Évalué à 8.

            Ou alors, les gens ont fini par comprendre que les tableaux imposent une la mise en forme de la page, ce qui est contraire au principe de séparation contenu/mise en forme du HTML/CSS.

            Oui ca c'est la théorie.
            En pratique pour pouvoir vraiment faire la mise en page voulue par le client les webdesigner enpilent les containers les un dans les autres pour pas qu'un navigateur explose la mise en page. Au final on se retrouve avec autant d'élément de structure dans une page DIV/CSS que dans une page tableau.
            Sans compter les hacks à coup d'image de fond pour donner l'illusion que tous les éléments cote à cote d'une page font la même hauteur.

            Il y a combien de pages calibrées en em sur le net ? 1% 0.1% ?

            On arrive enfin au moment ou on devrait voir la puissance des DIV/CCS à cause de tous les appareils mobiles qui sortent chaque jour, mais au final on se rend compte que faire un site qui passe aussi bien sur un iphone tenu droit que sur une télé 21/9 ca reste une vraie gageure. Le truc qui a poussé à l'utilisation des DIV/CSS plutôt que les tableaux c'est AJAX avec du javascript qui va faire mumuse avec les éléments et le DOM. Mais sinon les sites sont pas franchement plus propres qu'avant. (Et les arrangements de DIV à la con sont au moins aussi pénibles à lire avec un synthétiseur vocal ou une plage braille qu'un tableau)

      • [^] # Re: Table FTW

        Posté par  (site web personnel) . Évalué à 9.

        Je n'y connais pas grand chose, mais peut être que l'avantage de ne pas utiliser de tableau c'est de ne pas fixer une structuration dans la page.

        Exact, sauf que là, ces nouvelles propriétés permettent précisément de placer en ligne ou en colonne des conteneurs hors tableau. Autrement dit, de faire des tableaux sans tableaux.

        Je crois que depuis quelques temps il est d'usage sur le web de n'employer les tableaux que pour des données tabulaires et plus pour s'en servir comme gestionnaire de layout. Je présume que ça permet d'avoir un meilleur découplage entre contenu et forme et que d'un point de vu sémantique c'est meilleur.

        Ça c'est très juste en revanche. D'ailleurs cette meilleure séparation du contenu et de la mise en page permettra de styler plus en profondeur sans quitter la CSS, pour fournir des styles alternatifs par exemple.

        • [^] # Re: Table FTW

          Posté par  . Évalué à 6.

          Je n'y connais pas grand chose, mais peut être que l'avantage de ne pas utiliser de tableau c'est de ne pas fixer une structuration dans la page.

          Exact, sauf que là, ces nouvelles propriétés permettent précisément de placer en ligne ou en colonne des conteneurs hors tableau. Autrement dit, de faire des tableaux sans tableaux.

          Ce que je voulais dire c'est :

          Je n'y connais pas grand chose, mais peut être que l'avantage de ne pas utiliser de tableau c'est de ne pas fixer une structuration dans le code HTML.

          Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)

    • [^] # Re: Table FTW

      Posté par  . Évalué à 3.

      Tout ça pour ne pas utiliser un tableau, ça en fait de la masturbation intellectuelle…

      Le jour où tu tombera sur un site qui imbrique des dizaines de tableau et à un site qui fait l'équivalent en divs, je t'invite à comparer la consommation ram.

      Le FN est un parti d'extrême droite

      • [^] # Re: Table FTW

        Posté par  . Évalué à 6. Dernière modification le 23 mai 2012 à 13:05.

        Ça, c'est peut-être plutôt un problème de navigateur ou de parser.

        Je pense qu'il vaut mieux éviter de le confondre format et l'implémentation.

        Article Quarante-Deux : Toute personne dépassant un kilomètre de haut doit quitter le Tribunal. -- Le Roi de Cœur

  • # Gecko

    Posté par  . Évalué à 4.

    Le lien que tu donne (et qui est récent) semble indique que Gecko le supportera peut être bientôt. C'est dommage.

    Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)

    • [^] # Re: Gecko

      Posté par  (site web personnel) . Évalué à 0.

      D'ailleurs, je n'y connais pas grand chose en dev web mais j'ai vu ça sur le lien donne :

      #flexbox {
      display: -webkit-flex;
      -webkit-flex-flow: row; // Children elements will be in rows
      -webkit-flex-wrap: nowrap;
      width: 100%;
      }

      Le -webkit- veut dire que c'est temporaire et pas encore officiel, j'imagine. Alors pourquoi mettre webkit ? Pourquoi pas -tmp- ? Quel est le lien avec webkit, si a l'avenir ça doit être la norme ? Est-ce qu'il y aura un traitement particulier pour chaque moteur ? Je croyais que IE nous avait appris quelque chose de ce point de vue.

      J’espère que l'officialisation ne prendra pas trop de temps, et que ces machins specifiques aux moteurs/browsers disparaitront fissa.

      • [^] # Re: Gecko

        Posté par  (site web personnel) . Évalué à 5.

        C'est toujours comme ça, et ça n'a pas été inventé par Webkit : Mozilla font pareil depuis bien longtemps. Il y a eu plein de propriétés du style -moz-border-radius par exemple.

        • [^] # Re: Gecko

          Posté par  (site web personnel) . Évalué à 2.

          La forme de mon message prête peut-être à confusion : je ne blâme pas webkit spécialement, ou n'importe quel moteur/communauté. Je suis juste triste de constater que chacun peut faire ce qu'il veut dans son coin.

          Je suppose qu'il y a quand même de la collaboration derrière, non ?

          • [^] # Re: Gecko

            Posté par  . Évalué à 4.

            Je suis juste triste de constater que chacun peut faire ce qu'il veut dans son coin.

            Dans la mesure où c'est le W3C qui recommande de faire de la sorte, pour éviter les accidents que je cite dans un commentaire un peu plus bas, je vois mal ce qu'on peut reprocher…
            D'ailleurs, ce système a sans doute même un effet positif : les moteurs testent "grandeur nature" de futures propriétés CSS, permettant ainsi de vérifier que la recommandation couvre bien tous les cas possibles, et les (éventuels) conflits avec d'autres propriétés ("si je mets ceci et cela, comment le moteur doit-il réagir ?").
            Je n'y vois que du bon !

      • [^] # Re: Gecko

        Posté par  (site web personnel, Mastodon) . Évalué à 10.

        Le -webkit- veut dire que c'est temporaire et pas encore officiel, j'imagine. Alors pourquoi mettre webkit ? Pourquoi pas -tmp- ?

        parce que comme c'est temporaire, les implémentations dans les différents navigateurs peuvent être différentes, et donc si tout le monde utilise -tmp- on aura des comportements différents selon le navigateur.

        alors qu'avec -webkit-, -moz-, -o-, -ie- etc, pas d'ambiguité. Le navigateur ne reconnait que son prefixe et ignore les autres.

        • [^] # Re: Gecko

          Posté par  (site web personnel) . Évalué à 1.

          parce que comme c'est temporaire, les implémentations dans les différents navigateurs peuvent être différentes, et donc si tout le monde utilise -tmp- on aura des comportements différents selon le navigateur.

          C'est justement ce que je me demandais : pourquoi ? Fondamentalement, pourquoi un moteur ferait un traitement différent entre un -webkit-flex-flow et un -moz-flex-flow, si au final, ça va devenir la norme ? Est-ce que le fonctionnement interne de cette commande n'est pas encore totalement défini par le W3C?

          Le navigateur ne reconnait que son prefixe et ignore les autres.

          Si seulement ça pouvait s'arrêter aux phases de dev =]

          • [^] # Re: Gecko

            Posté par  . Évalué à 3.

            Est-ce que le fonctionnement interne de cette commande n'est pas encore totalement défini par le W3C?

            C'est tout à fait ça, le but est double, offrir une fonctionnalité avant quelle soit normalisé mais aussi tester cette fonctionnalité et adapter la norme en fonction des retours sur l'utilisation de cette fonctionnalité. D'ailleurs, un -webkit-flex-flow et un -moz-flex-flow n'ont pas forcément le même comportement.

            « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

          • [^] # Re: Gecko

            Posté par  . Évalué à 5.

            pourquoi un moteur ferait un traitement différent entre un -webkit-flex-flow et un -moz-flex-flow, si au final, ça va devenir la norme ?

            Parce qu'un navigateur "Webkit-based" ne saura jamais lire une propriété -moz-flex-flow et vice-versa. Et heureusement, d'ailleurs : car il s'agit d'implémentations qui ne respectent peut-être pas la norme complètement.
            Et la norme sera flex-flow, et tous les navigateurs finiront par ne supporter que cette propriété là, après avoir déclaré leur version deprecated

            Est-ce que le fonctionnement interne de cette commande n'est pas encore totalement défini par le W3C?

            C'est exactement ça ! La propriété à l'état de brouillon. Les moteurs anticipent sur son officialisation, en l'implémentant. Ce qui permet :
            * de la faire connaitre à l'avance, donc d'habituer les développeurs ;
            * de donner l'eau à la bouche à ceux qui ont un navigateur qui ne supporte pas la propriété ;
            * de tester "grandeur nature" une future propriété CSS ;
            * de continuer le jeu du "qui pisse le plus loin".

      • [^] # Re: Gecko

        Posté par  . Évalué à 1.

        Le -webkit- veut dire que c'est l'interprétation qu'en fait webkit, c'est utile quand la norme n'est pas figée et donc que mozilla pourrait le gérer de façon différente.
        Si tout le monde utilisait le même préfixe et qu'un navigateur aurait un comportement incorrect il serait impossible de faire une page qui marche pour tous.

        Ici c'est plus pour pouvoir tester que c'est fait, aucun site ne l'utilisera avant un bon moment, la mise en page serait totalement incorrecte selon le navigateur utilisé.

        • [^] # Re: Gecko

          Posté par  (site web personnel) . Évalué à -1.

          Si tout le monde utilisait le même préfixe et qu'un navigateur aurait un comportement incorrect il serait impossible de faire une page qui marche pour tous.

          Il n'y a que moi que ça dérange ? Le principe du Web (et d'internet, surtout, en général), c'est que tout le monde fasse pareil afin que tout le monde se comprenne, non ?

          On a déjà vu le cas d'un navigateur qui a un comportement incorrect avec les standards. Alors c'est quoi la solution ?

          • Comme tu le suggères, changer la page afin qu'elle s'adapte au navigateur ? Mettre un gros if(IE) qui tâche ?
          • ou alors faire en sorte que ce soit le navigateur qui s'adapte, afin d'aller interroger une ressource qui est la même pour tous ?

          Je pense tout de même que c'est la deuxième solution, qui bien que plus difficile (d'apparence au moins), est la Bonne Solution (TM)

          • [^] # Re: Gecko

            Posté par  . Évalué à 5.

            Sauf que lorsque les extensions -webkit -mozilla… sont mise en place, c'est que le standard n'est pas encore défini. Tu fais comment pour respecter un standard qui n'existe pas ?

            « Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche

      • [^] # Re: Gecko

        Posté par  . Évalué à 6.

        C'est là qu'on comprends pourquoi les compilateurs de CSS ça déchire : http://lesscss.org/ (voir l'exemple des mixin).

        Tous les contenus que j'écris ici sont sous licence CC0 (j'abandonne autant que possible mes droits d'auteur sur mes écrits)

      • [^] # Re: Gecko

        Posté par  . Évalué à 3.

        le -webkit- indique qu'il s'agit de l'implémentation (non-officielle) par le moteur du même nom. Donc si la norme officielle vient à changer le comportement, tu pourras soit continuer d'utiliser la version temporaire qui ne changera pas de rendu, soit utiliser la version officielle, avec un rendu différent mais il faudra passer par une modification de ton CSS, donc c'est que tu l'auras voulu.
        Ainsi, pas de (mauvaises) surprises !

    • [^] # Re: Gecko

      Posté par  (site web personnel, Mastodon) . Évalué à 5.

      Le modèle de boite flexible existe depuis 12-15 ans dans Gecko. Je l'utilise tout les jours depuis de nombreuses années. Il est en effet utilisé pour l'affichage du XUL. Ce sont les propriétés -moz-box-* https://developer.mozilla.org/en/CSS/CSS_Reference/Mozilla_Extensions

      Cependant il est possible que le comportement ne correspond pas entièrement aux derniers brouillons des specs.

  • # Bein ça existe déjà ...

    Posté par  . Évalué à 1.

    … sous la forme de Bootstrap.js, framework HTML/CSS qui nous vient de twitter.

    Et outre Bootstrap, je crois qu'il y a une multitude de framework du même type implémentant des systèmes de "grid".

    Après, c'est sur que c'est pas du "natif", mais ça a le mérite de s'intégrer très facilement et surtout d'être très facile à prendre en main.

  • # En production

    Posté par  (site web personnel) . Évalué à 3.

    J'ai un outil en production entièrement basé là dessus, j'avais défriché cette possibilité avec la création d'une interface HTML5/CSS3 : http://www.elitwork.com/actualite-html_css_interface_utilisateur.html

    A savoir, il existe FlexIE qui permet d'utiliser ça dans IE et Opéra qui pour l'instant ne l'implémentent pas.

    Globalement, j'en suis content, surtout depuis que Mozilla a résolu un bug assez gênant qui ne permettait pas d'utiliser le flexible box model dans des éléments positionnés (position:absolute;).

    while(coding) alert('smile');

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.