Vive les tableaux de mise en page !
Upcoming SlideShare
Loading in...5
×
 

Vive les tableaux de mise en page !

on

  • 24,824 views

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 ...

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.

Statistics

Views

Total Views
24,824
Views on SlideShare
21,248
Embed Views
3,576

Actions

Likes
13
Downloads
139
Comments
5

39 Embeds 3,576

http://oseox.fr 1001
http://www.paris-web.fr 450
http://boutofcontext.com 352
http://blog.goetter.fr 310
http://www.conseilsmarketing.fr 250
http://carolineviphakone.com 221
http://www.e-systemes.com 198
http://speakerrate.com 123
http://www.conseilsmarketing.com 99
http://paper.li 82
http://www.moodytryme.com 81
http://localhost 69
http://a0.twimg.com 50
http://blog.websourcing.fr 43
http://lanyrd.com 42
http://www.stonepower.fr 40
http://durdelafeuille.tumblr.com 37
https://twitter.com 22
http://v5.e-systemes.fr 21
http://voyelle.tumblr.com 17
http://us-w1.rockmelt.com 13
http://tyseo.blogspot.com 10
http://graphisme.tv 6
http://safe.tumblr.com 6
http://goetter.tumblr.com 4
http://www.faveous.com 4
http://www.paperblog.fr 4
http://feeds.feedburner.com 4
http://webcache.googleusercontent.com 3
http://www.aurelien-bardon.fr 2
http://www.netvibes.com 2
http://www.mefeedia.com 2
http://christophebenoit.com 2
http://www.lablogule.com 1
http://www.twylah.com 1
http://www.slideshare.net 1
https://web.tweetdeck.com 1
http://www.bonkm.com 1
http://www.tumblr.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Vive les tableaux de mise en page ! Vive les tableaux de mise en page ! Presentation Transcript

  • VIVE LES TABLEAUXDE MISE EN PAGE !et si la solution était là depuis le début ? Raphaël Goetter ~ Paris Web 2011
  • Au tableau : élève Raphaël Goetter © Dew
  • TABLE(AU) DES MATIERES (hé hé) View slide
  • 1. Les dessous de table = cest quoi ?2. Comment noircir le tableau = cest naze !3. Table ronde des alternatives = le reste, cest 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 ça8. Des tableaux de maîtres marche !9. Encore une ombre au tableau ? = mais cest naze alors ?10. Table de chevet View slide
  • QUESTION DU JOUR 1 fétichisme ?
  • QUESTION DU JOUR 2 voisin, voisine
  • AVOUEZ !« tableau, cest le Mal ! »
  • LE DESIGN WEBquelles techniques aujourd’hui ? float position: absolute
  • LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspanbidouilles float position: absolute reset marges négatives commentaires clearcalques conditionnels colspan hacks frameworks CSS &nbsp;
  • LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspanbidouilles float position: absolute reset marges négatives commentaires clearcalques conditionnels colspan hacks frameworks CSS &nbsp;
  • LE DESIGN WEB on ne devrait plus en être là ! En attendant CSS3,et si les tableaux étaient la solution ?
  • LE DESIGN WEB quelles techniques aujourd’hui ? compatibilité position: relative spacer.gif flux frames bugs <br><br><br> <table> rowspanbidouilles float position: absolute reset marges négatives commentaires clearcalques conditionnels colspan hacks frameworks CSS &nbsp;
  • DESSOUS DE TABLEen mode « comment ça marche ? »
  • DESSOUS DE TABLE De la naissance à la mise au bûcher1996 →naissance (3Ko, 54px)1996 →David Siegel « creating killer web sites »1997 →spécifications HTML 3.21997 →Halelluia !2000 →au bûcher !
  • DESSOUS DE TABLE 1997
  • DESSOUS DE TABLE 2000
  • DESSOUS DE TABLECest quoi déjà un tableau ?
  • DESSOUS DE TABLE Cest quoi déjà un tableau ?<table> <tr> <td> cellule1 </td> <td> cellule2 </td> <td> cellule3 </td> </tr></table>
  • DESSOUS DE TABLECest quoi déjà un tableau ?
  • DESSOUS DE TABLEParticularités et avantages Blocs alignés parfaitement (sans sortir du flux)
  • DESSOUS DE TABLEParticularités et avantages Hauteurs identiques
  • DESSOUS DE TABLEParticularités et avantages Centrage horizontal et vertical simplissime
  • DESSOUS DE TABLE Particularités et avantagesCompatible partout !(since 1997)
  • NOIRCIR LE TABLEAU les tableaux, cest malUn courant de pratiqueaccompagnant les <table> :● imbrications multiples,● colspan, rowspan,● border, bgcolor● cellspacing, cellpadding,● <font>, <center>, valign● spacer.gif,● etc.
  • les tableaux, cest mal (1)
  • les tableaux, cest mal (2)
  • les tableaux, cest mal (3)
  • les tableaux, cest mal (4)
  • les tableaux, cest mal (5)
  • les tableaux, cest mal (6)
  • les tableaux, cest mal (7)
  • les tableaux, cest mal (8)
  • NOIRCIR LE TABLEAU les tableaux, cest mal Mais que leur reproche-t-on au juste ?
  • 1 LOURDS, COMPLEXESimbroglio et soupe de tags au menu
  • 2 PEU FLEXIBLEScolonnes et cellules figées
  • 3 PAS ACCESSIBLESsuivi impossible sur lecteurs décran
  • 4 PAS PERFORMANTSchargement de tout le tableau avant de lafficher
  • 5 INCONTRÔLABLESles contenus font éclater les cellules
  • 6PAS SEMANTIQUES cest pas fait pour ça !
  • 7 ET LES MOBILES ?« le Web mobile a tué les tableaux »
  • 8 BALISES SUPERFLUES<table> et <tr> obligatoires pour bénéficier dun <td>
  • 9METHODE OBSOLETE vive le code des années 90 !
  • 1 2 34 5 67 8 9
  • TABLE RONDE DES ALTERNATIVES les tableaux sont le Mal, alors on fait quoi ? On bidouille !
  • TABLE RONDE DES ALTERNATIVES pas de tableaux ? →on remplace toutes les cellules par des <div> ! ici le site </div> dune </div> </div> agence web
  • TABLE RONDE DES ALTERNATIVES pas de tableaux ? →… ou par dautres éléments ici <dl>, <dd>, <dt>
  • 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 ...
  • TABLE RONDE DES ALTERNATIVES hauteurs de colonnes identiques ? →faux-columns (image qui se répète) background.jpg (trèèèès long)
  • TABLE RONDE DES ALTERNATIVES centrage vertical ? <div> obscurs calculs de demi-hauteur (avec JavaScript), + positionnement absolu en % avec marges négatives e=mc²
  • TABLE RONDE DES ALTERNATIVES hauteur 100% avec pied de Xpx en bas ?JavaScriptcalcul de hauteurCSS3height : calc(100%-50px)CSS3box-sizing :content-box
  • 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 gehts Strasbourg adipiscing Mauris Heineken gewurztraminer gal Chulien schpeck sit chai libero.
  • MIEUX ? VRAIMENT MIEUX ?faux-columns divite CSS3 marges JavaScript négative sfloa t et bugs
  • FAISONS TABLE RASE DU PASSE dans la pratique, les inconvénients des tableaux HTML sont souvent exagérés
  • POSTULATdeux blocs voisins de même hauteur
  • POSTULAT deux blocs voisins de même hauteur → hors du fluxfloat → 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.
  • 1 SOUPE DE TAGS ? ah, on nest pas obligé davoir des tableaux partout dans la page ?<table> <tr> <td>Menu</td> <td>Contenu</td> <tr></table>
  • 1 SOUPE DE TAGS ? ah, on nest pas obligé davoir des tableaux partout dans la page ?→ pas obligédimbriquer les éléments→ pas obligé destructurer toute la pageen tableau→ pas obligé dutilisercolspan / rowspan
  • 2 PEU FLEXIBLES ? mais cest pas ce quon veut  ?
  • 2 PEU FLEXIBLES ? mais cest pas ce quon veut  ?→ on souhaitejustement deux colonnesindissociables→ on cherche justementobtenir les avantagesque cela procure
  • 3 PAS ACCESSIBLES ? un tableau « linéarisable » est parfaitement accessibleAccessiweb 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 balisescaption, th, thead, tfoot●●Les cellules du tableau de mise en forme (balise td) nedoivent pas posséder dattributs scope, headers, colgroup, axis.
  • 4 PAS PERFORMANTS ? table-layout , vous connaissez ? 300 pixels
  • 4 PAS PERFORMANTS ? table-layout , vous connaissez ? 400 pixels
  • 4 PAS PERFORMANTS ? table-layout , vous connaissez ? table { table-layout : fixed ; } 300 pixels
  • 4 PAS PERFORMANTS ? table-layout , vous connaissez ?table { table-layout : fixed ;}→ Le moteur de navigateur connaît dès le départ la largeurdu tableau et peut lafficher 6 OK !
  • 5 INCONTRÔLABLES ? table-layout , quon vous dit  !table-layout : fixed →Le conteneur « tableau » nest plus dépendant de la largeurde ses contenus.Il conserve les dimensions quon lui a fixées.YAY.
  • 6 PAS SEMANTIQUES ? cest pas fait pour ça ! stooOK, soit. On y reviendra
  • 7 ET LES MOBILES ? iPhone a tué les tableaux HTMLOK, soit. On y reviendra
  • 8 BALISES SUPERFLUES ? table, tr, td... cest trop !OK, soit. On y reviendra
  • 9 METHODE OBSOLETE ? génération 90sOK, soit. On y reviendra
  • 1 2 34 5 67 8 9
  • CONCLUSION ? on y gagne sur plusieurs tableaux !Des inconvénients ? OuiDes avantages ? Oui
  • CONCLUSION ? on y gagne sur plusieurs tableaux !Je nai pas dit...
  • REMETTONS-NOUS EN CELL ! et si la solution était... CSS ?
  • DISPLAY vous connaissez ?block inline none
  • DISPLAY vous connaissez ?inline-block list-item
  • DISPLAY vous connaissez ?table, table-cell, table-row, table-caption, inline-table,table-header-group, table-footer-group, etc.
  • DISPLAY CSS table model<table> … display : table<tr> … display : table-rowtd>, <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
  • 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> }
  • DISPLAY CSS table modelSéparation fond-forme o/
  • DEMOS Vive les tableaux de mise en page !1- Hauteurs de frères identiques2- Alignement vertical 3- Site de 100% de haut avec pied de page dehauteur fixe4- Répartition de la largeur restante5- Répartition de la hauteur restante6- Menu de navigation
  • DEMOSVive les tableaux de mise en page ! Bonus : Apple !
  • DEMOSVive les tableaux de mise en page ! Bonus : Apple !
  • DISPLAY CSS table model6- 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]
  • 1 2 34 5 67 8 9
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateurs
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateursOK
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateursOK OK
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateursOK OK OK
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateursOK OK OK OK
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateursOK OK OK OK OK euh oui enfin... à partir de IE8
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateurs IE6+IE7 →8%
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateurs IE6+IE7 →6%
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateursCSS2 Table display (caniuse.com)
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateursCSS3 Flexible box layout (caniuse.com)
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateursCSS3 Grid Layout (caniuse.com)
  • ET SI ON PASSAIT A TABLE ? compatibilités navigateurs Fallback : display-table.htc (2ko)
  • TABLES DE LA LOI anges et démos
  • TABLES DE LA LOI anges et démos1. les colonnes sont parfaites et toujours de même longueur, sansbesoin 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 pagetoujours 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 passervisuellement un élément prioritairement à d’autres en jouant avec lavaleur table-caption
  • TABLEAUX DE MAÎTRES pour aller encore plus loin
  • 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 (aussiavec table-header-group et table-footer-group) : pensez auxdessous de table (démo)
  • ENCORE UNE OMBRE AU TABLEAU dérives et excèsFull tableauxtableaux imbriquéscolspan, rowspanetc.
  • ENCORE UNE OMBRE AU TABLEAU dérives et excès
  • ENCORE UNE OMBRE AU TABLEAU lacunesPas de padding sur les éléments en table-row, table-row-group, table-header-group, table-footer-group, table-column-group et table-column.
  • ENCORE UNE OMBRE AU TABLEAU lacunesPas 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
  • ENCORE UNE OMBRE AU TABLEAU lacunesPas 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, overflowtable-caption : 1 seul par tableau
  • ENCORE UNE OMBRE AU TABLEAU lacunesPas 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, overflowtable-caption : 1 seul par tableaupositionnement absolu impossible directement au sein dun table-cell
  • TABLE DE CHEVET lindispensable « Everything you know about CSS is wrong ! » Rachel Andrew & Kevin Yank Sitepoint 1998 ISBN-13: 978-0980455229
  • MERCI !« In Vino Veri Table » Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetterPS : attention aux excès de table