Successfully reported this slideshow.

Vive les tableaux de mise en page !

16

Share

Loading in …3
×
1 of 108
1 of 108

Vive les tableaux de mise en page !

16

Share

Download to read offline

Le design web en 2011 consiste encore à se battre avec des positionnements flottants, absolus, relatifs, des clear, des problèmes de compatibilité, des hacks, des bidouilles, des bugs d'affichage et autres frameworks CSS encombrants.

On ne devrait plus en être là aujourd'hui. C'est du rôle des CSS de nous offrir des solutions simples, intuitives et stables (NDLR : genre "KISS" quoi).

Les propositions CSS3 avant-gardistes telles que Flexible box model et Grid Layout ne seront pas utilisables en production avant un bon bout de temps. En attendant, si la solution était sous nos yeux depuis des années ? Et si l'avenir (proche) des CSS étaient les tableaux de mise en page ?

Note : ça parlera (un peu) de tableaux HTML bien fichus, linéarisables, toussa et aussi (surtout) de CSS display: table, de ses avantages et inconvénients.

Le design web en 2011 consiste encore à se battre avec des positionnements flottants, absolus, relatifs, des clear, des problèmes de compatibilité, des hacks, des bidouilles, des bugs d'affichage et autres frameworks CSS encombrants.

On ne devrait plus en être là aujourd'hui. C'est du rôle des CSS de nous offrir des solutions simples, intuitives et stables (NDLR : genre "KISS" quoi).

Les propositions CSS3 avant-gardistes telles que Flexible box model et Grid Layout ne seront pas utilisables en production avant un bon bout de temps. En attendant, si la solution était sous nos yeux depuis des années ? Et si l'avenir (proche) des CSS étaient les tableaux de mise en page ?

Note : ça parlera (un peu) de tableaux HTML bien fichus, linéarisables, toussa et aussi (surtout) de CSS display: table, de ses avantages et inconvénients.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Vive les tableaux de mise en page !

  1. 1. VIVE LES TABLEAUX DE MISE EN PAGE ! et si la solution était là depuis le début ? Raphaël Goetter ~ Paris Web 2011
  2. 2. Au tableau : élève Raphaël Goetter © Dew
  3. 3. TABLE(AU) DES MATIERES (hé hé)
  4. 4. 1. Les dessous de table = c'est quoi ? 2. Comment noircir le tableau = c'est naze ! 3. Table ronde des alternatives = le reste, c'est mieux ? 4. Faisons table rase du passé 5. Remettons-nous en cell ! = cool des CSS ! 6. Et si on passait à table ? 7. Tables de la Loi = hey ça 8. Des tableaux de maîtres marche ! 9. Encore une ombre au tableau ? = mais c'est naze alors ? 10. Table de chevet
  5. 5. QUESTION DU JOUR 1 fétichisme ?
  6. 6. QUESTION DU JOUR 2 voisin, voisine
  7. 7. AVOUEZ ! « tableau, c'est le Mal ! »
  8. 8. LE DESIGN WEB quelles techniques aujourd’hui ? float position: absolute
  9. 9. LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspan bidouilles float position: absolute reset marges négatives commentaires clear calques conditionnels colspan hacks frameworks CSS &nbsp;
  10. 10. LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspan bidouilles float position: absolute reset marges négatives commentaires clear calques conditionnels colspan hacks frameworks CSS &nbsp;
  11. 11. LE DESIGN WEB on ne devrait plus en être là ! En attendant CSS3, et si les tableaux étaient la solution ?
  12. 12. LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspan bidouilles float position: absolute reset marges négatives commentaires clear calques conditionnels colspan hacks frameworks CSS &nbsp;
  13. 13. DESSOUS DE TABLE en mode « comment ça marche ? »
  14. 14. DESSOUS DE TABLE De la naissance à la mise au bûcher 1996 →naissance (3Ko, 54px) 1996 →David Siegel « creating killer web sites » 1997 →spécifications HTML 3.2 1997 →Halelluia ! 2000 →au bûcher !
  15. 15. DESSOUS DE TABLE 1997
  16. 16. DESSOUS DE TABLE 2000
  17. 17. DESSOUS DE TABLE C'est quoi déjà un tableau ?
  18. 18. DESSOUS DE TABLE C'est quoi déjà un tableau ? <table> <tr> <td> cellule1 </td> <td> cellule2 </td> <td> cellule3 </td> </tr> </table>
  19. 19. DESSOUS DE TABLE C'est quoi déjà un tableau ?
  20. 20. DESSOUS DE TABLE Particularités et avantages Blocs alignés parfaitement (sans sortir du flux)
  21. 21. DESSOUS DE TABLE Particularités et avantages Hauteurs identiques
  22. 22. DESSOUS DE TABLE Particularités et avantages Centrage horizontal et vertical simplissime
  23. 23. DESSOUS DE TABLE Particularités et avantages Compatible partout ! (since 1997)
  24. 24. NOIRCIR LE TABLEAU les tableaux, c'est mal Un courant de pratique accompagnant les <table> : ● imbrications multiples, ● colspan, rowspan, ● border, bgcolor ● cellspacing, cellpadding, ● <font>, <center>, valign ● spacer.gif, ● etc.
  25. 25. les tableaux, c'est mal (1)
  26. 26. les tableaux, c'est mal (2)
  27. 27. les tableaux, c'est mal (3)
  28. 28. les tableaux, c'est mal (4)
  29. 29. les tableaux, c'est mal (5)
  30. 30. les tableaux, c'est mal (6)
  31. 31. les tableaux, c'est mal (7)
  32. 32. les tableaux, c'est mal (8)
  33. 33. NOIRCIR LE TABLEAU les tableaux, c'est mal Mais que leur reproche-t-on au juste ?
  34. 34. 1 LOURDS, COMPLEXES imbroglio et soupe de tags au menu
  35. 35. 2 PEU FLEXIBLES colonnes et cellules figées
  36. 36. 3 PAS ACCESSIBLES suivi impossible sur lecteurs d'écran
  37. 37. 4 PAS PERFORMANTS chargement de tout le tableau avant de l'afficher
  38. 38. 5 INCONTRÔLABLES les contenus font éclater les cellules
  39. 39. 6 PAS SEMANTIQUES c'est pas fait pour ça !
  40. 40. 7 ET LES MOBILES ? « le Web mobile a tué les tableaux »
  41. 41. 8 BALISES SUPERFLUES <table> et <tr> obligatoires pour bénéficier d'un <td>
  42. 42. 9 METHODE OBSOLETE vive le code des années 90 !
  43. 43. 1 2 3 4 5 6 7 8 9
  44. 44. TABLE RONDE DES ALTERNATIVES les tableaux sont le Mal, alors on fait quoi ? On bidouille !
  45. 45. TABLE RONDE DES ALTERNATIVES pas de tableaux ? →on remplace toutes les cellules par des <div> ! ici le site </div> d'une </div> </div> agence web
  46. 46. TABLE RONDE DES ALTERNATIVES pas de tableaux ? →… ou par d'autres éléments ici <dl>, <dd>, <dt>
  47. 47. TABLE RONDE DES ALTERNATIVES éléments côte à côte ? → float (pas conçu pour ça au départ, alambiqué) Bug Bug Bug Bug Bug Bug Bug Bug ...
  48. 48. TABLE RONDE DES ALTERNATIVES hauteurs de colonnes identiques ? →faux-columns (image qui se répète) background.jpg (trèèèès long)
  49. 49. TABLE RONDE DES ALTERNATIVES centrage vertical ? <div> obscurs calculs de demi-hauteur (avec JavaScript), + positionnement absolu en % avec marges négatives e=mc²
  50. 50. TABLE RONDE DES ALTERNATIVES hauteur 100% avec pied de Xpx en bas ? JavaScript calcul de hauteur CSS3 height : calc(100%- 50px) CSS3 box-sizing : content-box
  51. 51. TABLE RONDE DES ALTERNATIVES séparateur (bordure) entre deux blocs ? →Image de fond sur le parent →largeur fixe →CSS3 multicolonnes Lorem Elsass ipsum Spätzle und mollis schnaps id, libero, Hans munster porta suspendisse geht's Strasbourg adipiscing Mauris Heineken gewurztraminer gal Chulien schpeck sit ch'ai libero.
  52. 52. MIEUX ? VRAIMENT MIEUX ? faux-columns divite CSS3 marges JavaScript négative s floa t et bugs
  53. 53. FAISONS TABLE RASE DU PASSE dans la pratique, les inconvénients des tableaux HTML sont souvent exagérés
  54. 54. POSTULAT deux blocs voisins de même hauteur
  55. 55. POSTULAT deux blocs voisins de même hauteur → hors du flux float → réorganisation des autres éléments → dépassement du conteneur → propriété clear → ajout d’élément HTML inutile → bugs des navigateurs + création d’une image de fond qui se répète (« faux-column ») → maintenance fastidieuse + largeurs fixes, etc.
  56. 56. 1 SOUPE DE TAGS ? ah, on n'est pas obligé d'avoir des tableaux partout dans la page ? <table> <tr> <td>Menu</td> <td>Contenu</td> <tr> </table>
  57. 57. 1 SOUPE DE TAGS ? ah, on n'est pas obligé d'avoir des tableaux partout dans la page ? → pas obligé d'imbriquer les éléments → pas obligé de structurer toute la page en tableau → pas obligé d'utiliser colspan / rowspan
  58. 58. 2 PEU FLEXIBLES ? mais c'est pas ce qu'on veut  ?
  59. 59. 2 PEU FLEXIBLES ? mais c'est pas ce qu'on veut  ? → on souhaite justement deux colonnes indissociables → on cherche justement obtenir les avantages que cela procure
  60. 60. 3 PAS ACCESSIBLES ? un tableau « linéarisable » est parfaitement accessible Accessiweb 2.1 : ● ● Le contenu linéarisé reste compréhensible ● ● Soit summary="" soit pas de summary ● ● Le tableau de mise en forme ne doit pas posser de balises caption, th, thead, tfoot ● ●Les cellules du tableau de mise en forme (balise td) ne doivent pas posséder d'attributs scope, headers, colgroup, axis.
  61. 61. 4 PAS PERFORMANTS ? table-layout , vous connaissez ? 300 pixels
  62. 62. 4 PAS PERFORMANTS ? table-layout , vous connaissez ? 400 pixels
  63. 63. 4 PAS PERFORMANTS ? table-layout , vous connaissez ? table { table-layout : fixed ; } 300 pixels
  64. 64. 4 PAS PERFORMANTS ? table-layout , vous connaissez ? table { table-layout : fixed ; } → Le moteur de navigateur connaît dès le départ la largeur du tableau et peut l'afficher 6 OK !
  65. 65. 5 INCONTRÔLABLES ? table-layout , qu'on vous dit  ! table-layout : fixed → Le conteneur « tableau » n'est plus dépendant de la largeur de ses contenus. Il conserve les dimensions qu'on lui a fixées. YAY.
  66. 66. 6 PAS SEMANTIQUES ? c'est pas fait pour ça ! stoo OK, soit. On y reviendra
  67. 67. 7 ET LES MOBILES ? iPhone a tué les tableaux HTML OK, soit. On y reviendra
  68. 68. 8 BALISES SUPERFLUES ? table, tr, td... c'est trop ! OK, soit. On y reviendra
  69. 69. 9 METHODE OBSOLETE ? génération 90's OK, soit. On y reviendra
  70. 70. 1 2 3 4 5 6 7 8 9
  71. 71. CONCLUSION ? on y gagne sur plusieurs tableaux ! Des inconvénients ? Oui Des avantages ? Oui
  72. 72. CONCLUSION ? on y gagne sur plusieurs tableaux ! Je n'ai pas dit...
  73. 73. REMETTONS-NOUS EN CELL ! et si la solution était... CSS ?
  74. 74. DISPLAY vous connaissez ? block inline none
  75. 75. DISPLAY vous connaissez ? inline-block list-item
  76. 76. DISPLAY vous connaissez ? table, table-cell, table-row, table-caption, inline-table, table-header-group, table-footer-group, etc.
  77. 77. DISPLAY CSS table model <table> … display : table <tr> … display : table-row td>, <th> … display : table-cell <caption> … display : table-caption <thead> … display : table-header-group <tbody> … display : table-row-group <tfoot> … display : table-footer-group <col> … display : table-column <colgroup> … display : table-column-group
  78. 78. DISPLAY CSS table model <table> <nav>Menu</nav> <tr> <article>Contenu</article> <td>Menu</td> <td>Contenu</td> nav, article { <tr> display : table-cell ; </table> }
  79. 79. DISPLAY CSS table model Séparation fond-forme o/
  80. 80. DEMOS Vive les tableaux de mise en page ! 1- Hauteurs de frères identiques 2- Alignement vertical 3- Site de 100% de haut avec pied de page de hauteur fixe 4- Répartition de la largeur restante 5- Répartition de la hauteur restante 6- Menu de navigation
  81. 81. DEMOS Vive les tableaux de mise en page ! Bonus : Apple !
  82. 82. DEMOS Vive les tableaux de mise en page ! Bonus : Apple !
  83. 83. DISPLAY CSS table model 6- pas sémantique -> [résolu] 7- impossible de gérer plusieurs médias -> [résolu] 8- balises superflues -> [résolu] 9- obsolescence de la méthode -> [résolu]
  84. 84. 1 2 3 4 5 6 7 8 9
  85. 85. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs
  86. 86. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK
  87. 87. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK OK
  88. 88. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK OK OK
  89. 89. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK OK OK OK
  90. 90. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs OK OK OK OK OK euh oui enfin... à partir de IE8
  91. 91. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs IE6+IE7 →8%
  92. 92. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs IE6+IE7 →6%
  93. 93. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs CSS2 Table display (caniuse.com)
  94. 94. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs CSS3 Flexible box layout (caniuse.com)
  95. 95. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs CSS3 Grid Layout (caniuse.com)
  96. 96. ET SI ON PASSAIT A TABLE ? compatibilités navigateurs Fallback : display-table.htc (2ko)
  97. 97. TABLES DE LA LOI anges et démos
  98. 98. TABLES DE LA LOI anges et démos 1. les colonnes sont parfaites et toujours de même longueur, sans besoin de bidouilles, 2. les éléments alentours ne nécessitent pas de traitement de faveur (clear ou autre), puisque tout demeure dans le flux courant, 3. la gestion des alignements verticaux, notamment du centrage, devient élémentaire, 4. la fluidité des blocs est innée : finie le casse-tête du pied de page toujours collé en bas quelle que soit la longueur de la page, ou les éléments devant occuper toute la hauteur de page moins X pixels, 5. il est même envisageable de réordonner du contenu et de passer visuellement un élément prioritairement à d’autres en jouant avec la valeur table-caption
  99. 99. TABLEAUX DE MAÎTRES pour aller encore plus loin
  100. 100. TABLEAUX DE MAÎTRES pour aller encore plus loin → table-layout : remettez-vous en cell (démo) → border-collapse : surveillez votre tableau de bord (démo) → border-spacing (ex- cellspacing) (démo) 2 valeurs possibles → empty-cells / :empty : débarrassez-vous des cellules mortes (démo) → lignes paires impaires (nth-child) (démo) → Styler des colonnes : col, nth-child ou th+td+td → Jouer avec table-caption : Réordonnement des blocs (aussi avec table-header-group et table-footer-group) : pensez aux dessous de table (démo)
  101. 101. ENCORE UNE OMBRE AU TABLEAU dérives et excès Full tableaux tableaux imbriqués colspan, rowspan etc.
  102. 102. ENCORE UNE OMBRE AU TABLEAU dérives et excès
  103. 103. ENCORE UNE OMBRE AU TABLEAU lacunes Pas de padding sur les éléments en table-row, table-row-group, table- header-group, table-footer-group, table-column-group et table-column.
  104. 104. ENCORE UNE OMBRE AU TABLEAU lacunes Pas de padding sur les éléments en table-row, table-row-group, table- header-group, table-footer-group, table-column-group et table-column. Autres lacunes de table-row : pas de position, width, min/max-width, min/max-height, vertical-align, border, padding, margin, overflow
  105. 105. ENCORE UNE OMBRE AU TABLEAU lacunes Pas de padding sur les éléments en table-row, table-row-group, table- header-group, table-footer-group, table-column-group et table-column. Autres lacunes de table-row : pas de position, width, min/max-width, min/max-height, vertical-align, border, padding, margin, overflow table-caption : 1 seul par tableau
  106. 106. ENCORE UNE OMBRE AU TABLEAU lacunes Pas de padding sur les éléments en table-row, table-row-group, table- header-group, table-footer-group, table-column-group et table-column. Autres lacunes de table-row : pas de position, width, min/max-width, min/max-height, vertical-align, border, padding, margin, overflow table-caption : 1 seul par tableau positionnement absolu impossible directement au sein d'un table-cell
  107. 107. TABLE DE CHEVET l'indispensable « Everything you know about CSS is wrong ! » Rachel Andrew & Kevin Yank Sitepoint 1998 ISBN-13: 978-0980455229
  108. 108. MERCI ! « In Vino Veri Table » Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetter PS : attention aux excès de table

×