CSS avancées. Vers HTML 5 et CSS 3. Raphaël Goetter. Préface de Daniel Glazman. Groupe Eyrolles, 2011, ISBN :

Transcription

1 CSS avancées Vers HTML 5 et CSS 3 Raphaël Goetter Préface de Daniel Glazman Groupe Eyrolles, 2011, ISBN :

2 122 Tirer le meilleur de CSS première partie background: gray; margin: 5px; padding: 5px; Ce nouveau mode de rendu, flottant, semble satisfaisant bien qu il nous faille à présent gérer les éventuels cas de débordements et de contextes de formatage. 4. Cependant, les différents essais et tests vont démontrer que notre dernière mission consistant à centrer les liens horizontalement au sein de leur parent est extrêmement complexe à accomplir dans ce mode de positionnement flottant. C est alors que le rendu inline-block intervient pour notre plus grand bonheur. Débarrassonsnous du flottement hors flux au profit de ce type de positionnement méconnu : #nav a { float: left; display: inline-block; height: 2.2em; background: gray; margin: 5px; padding: 5px; L alignement horizontal devient un jeu d enfant puisqu il suffit d exploiter la propriété textalign en l appliquant sur un ancêtre : #nav { text-align: center; Cette touche finale (figure 5-8) clôt l exercice en beauté puisque nous avons accompli l ensemble des missions avec brio, en demeurant dans le flux tout en restant compatible avec les anciennes versions d Internet Explorer, puisque ce rendu est parfaitement pris en charge par IE6 et IE7 lorsqu il est appliqué à des balises en ligne telles que les liens <a>. Figure 5-8 Résultat final : liens dimensionnés et centrés Un rendu de tableau en CSS Positionnement absolu, relatif, marges négatives, flottements, clear, problèmes de compatibilité, hacks et «bidouilles» pour Internet Explorer sont autant d étapes nécessaires à la mise en œuvre d un projet web de nos jours.

3 Positionnement avancé CHapitre Concevoir des mise en pages globales sans positionnement hors flux devrait pourtant être possible en toute simplicité. Cela devrait même être l objectif fondamental des spécifications CSS, sans quoi elles n ont aucune raison d exister et nous pourrions retourner sagement à nos mises en page via balises <table> imbriquées. En parcourant ce livre, vous commencez à comprendre que le problème ne provient généralement pas des normes CSS, mais de certains navigateurs retardataires. Là encore, la bonne recette existe depuis CSS 2.1 et elle est encore plus simple qu on ose l imaginer. Quelle est cette solution? Les tableaux de mise en page, pardi! Ne vous méprenez pas (et reposez cette tomate, s il vous plaît). Je ne vous parle bien sûr pas de l antique mise en page usant des balises HTML <table> et <td>, mais bel et bien d une conception via des propriétés CSS conçues pour cela, sans interférer dans la structure HTML qui demeurera parfaitement sémantique. Cette alchimie est rendue possible grâce à de nouvelles valeurs de la propriété display. Vous connaissiez block, inline, none et je vous ai présenté inline-block. Laissez-moi à présent vous décrire table, table-cell, table-row et consœurs (figures 5-9 et 5-10). L ampleur du phénomène est grandissant dans le monde des concepteurs web avant-gardistes, tant et si bien qu un livre anglophone publié par Sitepoint.com est entièrement dédié à cette technique : Everything you know about CSS is wrong! [Tout ce que vous pensez connaître à propos de CSS est faux] (Rachel Andrew & Kevin Yanks, SitePoint, 2008). Figure 5-9 Des colonnes flottantes, hors du flux Figure 5-10 Des colonnes avec display: table cell CompAtiBilité Valeurs tabulaires de la propriété display Les valeurs tabulaires de la propriété display que je vais traiter dans cette partie sont reconnues par tous les navigateurs récents, y compris Internet Explorer 8, Firefox 2, Chrome 2, Safari 4.0, Opera 9.6 et même Konqueror Seules manquent à l appel les versions IE6 et IE7.

4 124 Tirer le meilleur de CSS première partie L arrivée d Internet Explorer 8 va véritablement changer la donne dans ce domaine, tout particulièrement puisqu il interprète parfaitement ce mode de rendu très prometteur. table, table-cell et table-row La propriété display dispose d un large panel de valeurs relatives aux rendus de forme tabulaire, dans le but d afficher les éléments comme s il s agissait de tableaux, de cellules ou de lignes. Tableau 5-2 Différentes valeurs relatives aux tableaux répertoriées dans les spécifications pour la propriété display Valeur Spécification Correspondance HTML display: table display: inline-table display: table-row display: table-row-group display: table-header-group display: table-footer-group display: table-column display: table-column-group Rendu de type tableau pour un élément, c est-à-dire de type bloc mais qui n occupe que la largeur du contenu. Comportement de table de type en-ligne pour un élément : c est un bloc rectangulaire qui participe à un contexte de mise en forme en-ligne. L élément doit s afficher tel une rangée de cellules. L élément regroupe une ou plusieurs rangées de cellules. Comme pour table-row-group. Visuellement, cet élément est toujours affiché avant toutes les autres rangées et groupes de rangées et après une éventuelle légende. Comme pour table-row-group. Visuellement, cet élément est toujours affiché après toutes les autres rangées et groupes de rangées et après une éventuelle légende. L élément représente une colonne de cellules. L élément regroupe une ou plusieurs colonnes. <table> <tr> <tbody> <thead> <tfoot> attribut col attribut colgroup display: table-cell L élément représente une cellule de tableau. <td> et <th> display: table-caption Légende d un tableau, positionnée par défaut en haut du tableau (mais cette disposition peut être modifiée via la propriété caption-side). <caption> Les éléments dont la propriété display a pour valeur table-column ou table-column-group ne sont pas rendus (exactement comme si celle-ci avait été none), mais ont une certaine utilité, leurs attributs pouvant donner éventuellement un certain style aux colonnes (figure 5-11).

5 Positionnement avancé CHapitre Figure 5-11 table row : les blocs deviennent des rangées «conteneurs de cellules» Les présentations sommaires ayant été faites, voici à présent comment réaliser simplement une mise en page de trois colonnes avec des blocs d en-tête et de pied de page (figure 5-12). Partie HTML <div id="header">en-tête</div> <div id="main"> <p id="menu">ici le menu</p> <p id="content">ici le contenu</p> <p id="news">ici les news</p> </div> <div id="footer">pied de page</div> Partie CSS #header { background: #555; #main { display: table; width: 100%; #menu, #news { width: 25%; display: table-cell; background: #bbb; #content { display: table-cell; #footer { background: #555; Figure 5-12 Mise en page sur trois colonnes avec en tête et pied de page

6 126 Tirer le meilleur de CSS première partie Quelle différence avec HTML <table>? Après vous avoir rabâché durant des années qu il fallait abandonner les mises en page avec des tableaux sous peine de brûler en enfer, voilà que je viens chambouler toutes vos certitudes en prononçant l innommable «table». Cependant, vous aurez saisi qu il s agit bien de CSS (display: table) et non de HTML (<table>) et que la différence est colossale. Les tableaux HTML pour la mise en page impliquent un appauvrissement sémantique évident, sans oublier leur tendance à devenir trop lourds, médiocres en terme d accessibilité et de référencement. Je rappelle toutefois que les éléments <table> sont toujours nécessaires pour structurer des données tabulaires. Employer une propriété de rendu CSS va nous permettre d appliquer cette mise en page sur des éléments HTML ayant du sens : <h1>, <p>, <ul>, mais aussi <header>, <footer>, <aside>, etc. en HTML 5. Il n y a donc pas lieu de se sentir coupable d employer cette méthode de positionnement, tout comme il est tout à fait naturel d utiliser display: inline pour afficher une liste horizontale de liens. Il ne s agit pas de modifier la sémantique des éléments de liste, mais simplement leur présentation à l écran. Il en va exactement de même avec display: table-cell. À retenir Spécificités des rangées et légendes Les valeurs de rangées (display: table-row) et de légende (display: table-caption) présentent des particularités liées à leur rendu : table-row ne comprend pas la propriété padding, tandis qu il ne peut y avoir qu un seul table-caption au sein du tableau. Particularités du modèle tabulaire La structure de rendu sous forme de tableau CSS comporte un certain nombre de singularités qui la distingue des autres modèles dans le flux : la création spontanée d objets anonymes, l alignement vertical et la répartition fluide des enfants au sein de leur parent. Éléments anonymes Chaque élément de rendu tableau en CSS crée automatiquement des objets de table anonymes autour de lui-même, c est-à-dire que les éléments de structure manquants sont créés par le navigateur. Cela signifie que, dans le cas d un élément affiché sous forme de cellule de tableau ( display: table-cell), il ne vous est pas nécessaire de l entourer d éléments de structure additionnels tels que les rangées de cellules (display: table-row) : celles-ci sont implicitement établies. Il en est de même pour le conteneur global (display: table). Prenons l exemple d une présentation sous forme d une grille de trois cellules telle que représentée sur l image 5-13.