Share
Les dispositions fluides sont le moyen idéal pour héberger notre contenu, quelle que soit la taille de la fenêtre. Le texte peut s'écouler au fur et à mesure que les conteneurs grossissent et rétrécissent, les images et même la vidéo, et les iframes peuvent également fléchir. Mais que se passe-t-il si nous avons un contenu qui ne devrait pas modifier les dimensions? Qu'en est-il des blocs d'annonces, par exemple, qui sont souvent conçus avec un dimensionnement très spécifique? Curieusement, c’est là que les plans de table viennent à la rescousse…
Cela m’a été rappelé récemment lors de la lecture du document Implementing Responsive Design de Tim Kadlec. Il est venu juste au bon moment aussi; J'étais au milieu d'un projet client qui nécessitait justement cette approche (et j'étais occupé à l'abattre).
De nombreux sites Web dépendent des revenus publicitaires. Même si vous n’aimez pas les images de marketing Web, vous n’auriez pas accès à une grande partie du contenu gratuit auquel vous êtes habitué. Tuts +, par exemple, s'appuie en partie sur les recettes publicitaires pour maintenir son équipe grandissante d'écrivains et d'employés.
L'Interactive Advertising Bureau (iab) est responsable d'une quantité considérable de publicité numérique et s'efforce de définir des normes et des lignes directrices pour l'ensemble du secteur. Consultez leurs consignes en matière de publicité graphique pour connaître les tailles de blocs d'annonces universelles recommandées:
Quatre images à dimension fixe. Et il est important qu'ils restent aussi à ces dimensions; Les logos, les straplines et les dénis de responsabilité peuvent tous devenir méconnaissables ou illisibles s'ils sont compressés de manière fluide. En outre, les entreprises qui paient pour ces annonces le font en fonction de la taille et de la position des blocs. Une annonce de 300x250px peut ne pas être aussi visible ni efficace si elle est affichée dans un format plus petit, ce qui risque de nuire à l'entreprise concernée.
Les annonces sont conçues pour être affichées à une taille fixe, donc jusqu'à ce que nous ayons une meilleure solution pour une publicité réactive, il est préférable de respecter cette.
Construisons rapidement une structure de fluide générique pour illustrer notre problème. UNE , contenant un Et un . Tout ce dont nous avons besoin:
Ensuite, nous pouvons le styler comme suit:
section largeur: 90%; marge: 0 auto; côté largeur: 30%; float: gauche; article width: 65%; Flotter à droite; img max-width: 100%;
Avec un peu de couleur ajoutée, voici l'effet que vous obtiendrez:
Avec notre img max-width: 100% règle, nous nous sommes assurés que nos images sont fluides et ne sortent jamais de leur conteneur parent. Malheureusement, notre fluide de côté est plus étroit ici que la largeur de l'image 300px, juste ce que nous ne voulons pas arriver.
Fixons la largeur de côté, laissant à l’article le soin de fléchir. En tant que combinaison de fixe et de fluide, nous appelons ce type de disposition: hybride.
section largeur: 90%; marge: 0 auto; side width: 300px; float: gauche; article width: 65%; Flotter à droite; img max-width: 100%;
Cela fonctionne sur des écrans plus larges, mais dès que le conteneur devient trop petit, c'est-à-dire: lorsque 300px représente plus de 35% de la largeur du conteneur, l'article est poussé au-dessous:
Nous pouvons résoudre ce problème dans notre cas en inversant le balisage; placer le côté dans l'article:
Ensuite, retirez la largeur et le flotteur de l'article, et donnez enfin à la marge un droit de marge pour jouer le rôle de gouttière:
section largeur: 90%; marge: 0 auto; side width: 300px; float: gauche; marge droite: 5%; article img max-width: 100%;
Voici ce que nous obtenons:
Ce qui est parfait! Le contenu de l'article est fluide, alors que le bloc d'annonces et son parent sont de largeur fixe! Vous pouvez même déplacer le côté vers la droite, en échangeant le flotteur sur Flotter à droite et placer la gouttière (sa marge) de l'autre côté aussi.
Des problèmes se posent toutefois lorsque le contenu de l'article commence à occuper plus d'espace vertical que le côté réservé. Voici le résultat:
Il y a des astuces pour éviter cela; nous pourrions donner à la côté un rembourrage en bas massif, puis tout aussi massif négatif marge inférieure. Puis avec un débordement caché nous allongons artificiellement le côté, en cachant tout ce qui dépasse.
Ou nous pourrions utiliser le positionnement et fixer l’autre côté en haut à droite de l’article, en donnant à l’article un rembourrage pour lui faire de la place.
Aucune de ces solutions n'est idéale, chacune présentant ses propres problèmes.
Quoi?! Je vous entends dire…
C'est vrai. Les mises en page de table (Dieu se repose leur âme) étaient en fait assez bonnes pour arranger les mises en page hybrides, alors prenons une feuille de leur livre. En utilisant CSS, nous pouvons afficher nos éléments comme s’ils sont des composants d’un tableau. C'est absolument bien aussi; nous n'utilisons pas tables réelles dans notre balisage (ce serait dommage car nous ne travaillons pas avec des données tabulaires). Nous allons simplement nous appuyer sur les tables pour l'affichage, sans changer le sens sémantique de notre document.
En revenant à notre mise en page originale (où côté et article étaient côte à côte), nous pouvons modifier le CSS pour suggérer des blocs de construction ressemblant à des tableaux. Notre section contenant devient le tableau, l'article et de côté deviennent les cellules du tableau qu'il contient:
section display: table; largeur: 90%; marge: 0 auto; apartement display: table-cellule; largeur: 300px; article display: table-cell; img max-width: 100%;
Ce qui nous donne:
Hmm, pas tout à fait raison. Nous devons modifier l'alignement vertical de nos cellules, car l'image et le texte sont tous deux assis sur la même ligne de base..
côté display: table-cell; alignement vertical: en haut; largeur: 300px; article display: table-cell; alignement vertical: en haut;
Maintenant, chaque fois que l'article ou le côté se développent verticalement, l'autre grandit avec lui. L'arrangement dépend du DOM cependant; l'élément de cellule de tableau qui apparaît en premier dans le document apparaît également en premier (à gauche) de notre structure de tableau.
Et bien sûr, nous pouvons également résumer tout cela dans une requête média, de sorte que cette mise en page n'apparaisse que sur des écrans plus grands. Sur des écrans plus petits, l’autre côté s’assoira parfaitement au-dessus de l’article. Regardez la démo pour voir comment cela se comporte.
L'utilisation de l'affichage de table CSS est prise en charge par tous les navigateurs modernes, mais n'a été adoptée par Internet Explorer qu'avec la version IE8..
Pour les navigateurs plus anciens, il serait donc sage d’inclure conditionnellement une feuille de style de secours, qui vous offre une solution de présentation alternative:
(ou vous pouvez simplement ignorer IE7 et les versions antérieures…)
Comme Tim le mentionne également dans son livre, les téléphones Windows 7 seront également chargés dans les styles ie.css que nous venons de définir. Afin d'éviter que cela ne se produise, vous devez modifier les conditions suivantes:
Nous y sommes donc parvenus - qui aurait pensé que la mise en page des tables pourrait vous aider en cette ère de conception de sites Web réactifs?! Certes, ce n’est pas la solution idéale que vous espériez, mais tant que CSS Grid Layout et Flexbox ne sera pas un peu plus attrayant, c’est une excellente alternative..
Accentsconagua