Objets avec média

Le motif Media Object (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. Intitulé ainsi par Nicole Sullivan, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).

Spécifications sommaires

Voici ce qu'on souhaite obtenir :

  • Un empilement des deux zones sur mobile et deux colonnes sur ordinateur
  • L'image peut être à gauche ou à droite
  • L'image peut être petite ou grande
  • Les objets avec média peuvent être imbriqués
  • L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand.

Recette

Choix effectués

On a ici choisi d'utiliser une grille pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.

La grille permet également d'utiliser fit-content pour la piste contenant l'image. En utilisant fit-content avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant max-width avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.

En utilisant grid-template-areas pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a max-width qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.

En ajoutant une classe media-flip, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.

Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.

Méthodes alternatives

Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.

Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.

En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété gap permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).

Compatibilité des navigateurs

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

grid-template-areas

BCD tables only load in the browser

float

BCD tables only load in the browser

Voir aussi