Nouvelle propriété CSS de format compatible avec Chromium, Safari Technology Preview et Firefox Nightly

Nouvelle propriété CSS qui permet de maintenir l'espacement dans les mises en page responsives.

Una Kravets

Proportions

Le rapport hauteur/largeur est le plus souvent exprimé sous la forme de deux entiers et du signe deux-points, dans les dimensions suivantes : largeur:hauteur ou x:y. Les formats les plus courants pour la photographie sont 4:3 et 3:2, tandis que la vidéo et les appareils photo grand public les plus récents sont généralement au format 16:9.

Avec l'avènement du responsive design, le maintien du format est devenu de plus en plus important pour les développeurs Web, en particulier lorsque les dimensions des images diffèrent et que la taille des éléments change en fonction de l'espace disponible.

Voici quelques cas dans lesquels la maintenance du format devient importante:

• Créer des iFrames responsifs dont la largeur correspond à 100% de la largeur d'un élément parent et dont la hauteur doit respecter les proportions de la fenêtre d'affichage.
• Créer des conteneurs d'espaces réservés intrinsèques pour les images, les vidéos et les intégrations pour empêcher la remise en page lorsque les éléments se chargent et occupent de l'espace
• Créer un espace uniforme et réactif pour les visualisations de données interactives ou les animations SVG
• Créer un espace uniforme et réactif pour des composants multi-éléments tels que des cartes ou des dates de calendrier
• Création d'un espace réactif et uniforme pour plusieurs images de dimensions variables (peut être utilisé avec object-fit)

Ajustement à l'objet

Définir un format nous aide à dimensionner le média dans un contexte responsif. La propriété object-fit est un autre outil disponible dans ce bucket. Elle permet aux utilisateurs de décrire comment un objet (comme une image) dans un bloc doit remplir ce bloc:

Les valeurs initial et fill réajustent l'image pour remplir l'espace. Dans notre exemple, l'image est occultée et floue, car les pixels sont réajustés. Pas idéal. object-fit: cover utilise la plus petite dimension de l'image pour remplir l'espace et recadre l'image pour qu'elle s'adapte à l'espace en fonction de cette dimension. Elle effectue un "zoom avant" à sa limite la plus basse. object-fit: contain garantit que l'ensemble de l'image est toujours visible. Par conséquent, à l'opposé de cover, il prend la taille de la plus grande limite (dans notre exemple ci-dessus, la largeur) et redimensionne l'image afin de conserver son rapport hauteur/largeur intrinsèque tout en s'adaptant à l'espace. Le cas object-fit: none montre l'image recadrée en son centre (position de l'objet par défaut) à sa taille naturelle.

object-fit: cover a tendance à fonctionner dans la plupart des situations pour assurer une interface uniforme lors de l'utilisation d'images de dimensions variables. Toutefois, vous perdez des informations de cette manière (l'image est recadrée sur ses bords les plus longs).

Si ces détails sont importants (par exemple, lorsque vous travaillez avec des produits de beauté à plat), vous n'êtes pas autorisé à recadrer le contenu important. Le scénario idéal serait donc des images responsives de tailles variables qui s'adaptent à l'espace de l'interface utilisateur sans recadrage.

Astuce: conserver le format avec padding-top

Pour les rendre plus réactifs, nous pouvons utiliser le format. Cela nous permet de définir un ratio spécifique et de baser le reste du contenu multimédia sur un axe individuel (hauteur ou largeur).

Le "Padding-Top Hack " est une solution multinavigateur actuellement reconnue pour maintenir le format basé sur la largeur d'une image. Cette solution nécessite un conteneur parent et un conteneur enfant absoluement placé. Vous devez ensuite calculer le format en pourcentage à définir en tant que padding-top. Exemple :

• Format 1:1 = 1 / 1 = 1 = padding-top: 100%
• Format 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Format 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Format 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Maintenant que nous avons identifié la valeur du format, nous pouvons l'appliquer à notre conteneur parent. Prenons l'exemple suivant :

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Nous pouvons alors écrire le code CSS suivant:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Conserver le format avec aspect-ratio

Malheureusement, le calcul de ces valeurs padding-top n'est pas très intuitif et nécessite des frais et un positionnement supplémentaires. Avec la nouvelle propriété CSS intrinsèque aspect-ratio, le langage utilisé pour gérer les formats est beaucoup plus clair.

Avec le même balisage, nous pouvons remplacer: padding-top: 56.25% par aspect-ratio: 16 / 9, et définir aspect-ratio sur un ratio spécifié de width / height.

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

L'utilisation de aspect-ratio au lieu de padding-top est beaucoup plus claire et ne remanie pas la propriété de marge intérieure pour faire quelque chose en dehors de son champ d'application habituel.

Cette nouvelle propriété permet également de définir le format sur auto, où "les éléments remplacés par un format intrinsèque utilisent ce format. Sinon, le format n'est pas privilégié pour la zone". Si auto et <ratio> sont spécifiés ensemble, le format privilégié correspond au ratio spécifié de width divisé par height, sauf s'il s'agit d'un élément remplacé avec un format intrinsèque, auquel cas ce format est utilisé à la place.

Exemple: cohérence dans une grille

Cela fonctionne très bien avec les mécanismes de mise en page CSS tels que CSS Grid et Flexbox. Envisagez une liste avec des enfants dont vous souhaitez conserver le format 1:1, comme une grille d'icônes de sponsor:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Exemple: empêcher le décalage de mise en page

Une autre fonctionnalité importante de aspect-ratio est qu'il peut créer de l'espace d'espace réservé pour empêcher le Cumulative Layout Shift et améliorer les Signaux Web. Dans ce premier exemple, le chargement d'un élément à partir d'une API telle que Unsplash crée un décalage de mise en page lorsque le chargement du contenu multimédia est terminé.

En revanche, l'utilisation de aspect-ratio crée un espace réservé pour éviter ce décalage de mise en page:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Astuce supplémentaire: attributs d'image pour le format

Vous pouvez également définir le format d'une image à l'aide des attributs d'image. Si vous connaissez les dimensions de l'image à l'avance, il est recommandé de les définir comme ses width et height.

Pour l'exemple ci-dessus, sachant que les dimensions sont de 800 x 600 pixels, le balisage de l'image ressemblera à ceci: <img src="image.jpg" alt="..." width="800" height="600">. Si l'image envoyée a le même format, mais pas nécessairement les valeurs de pixel exactes, nous pouvons utiliser des valeurs d'attribut d'image pour définir le rapport, associées à un style de width: 100% afin que l'image occupe l'espace approprié. L'ensemble se présenterait comme suit:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

En fin de compte, l'effet est identique à la définition de aspect-ratio sur l'image via CSS, et le décalage de mise en page cumulatif est évité (voir la démonstration sur Codepen).

Conclusion

Avec la nouvelle propriété CSS aspect-ratio, qui est lancée dans plusieurs navigateurs modernes, la gestion des proportions dans vos conteneurs de contenus multimédias et de mise en page devient un peu plus simple.

Photos d'Amy Shamblen et de Lionel Gustave via Unsplash.