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

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

Una Kravets

Remarque : Résumé: Il est essentiel de conserver un rapport largeur/hauteur cohérent, appelé format, pour le Responsive Web Design et pour éviter le décalage cumulatif de la mise en page. Il existe désormais un moyen plus simple de le faire avec la nouvelle propriété aspect-ratio lancée dans Chromium 88, Firefox 87 et Safari Technology Preview 118.

Format

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 88
• <ph type="x-smartling-placeholder"></ph> 88
• <ph type="x-smartling-placeholder"></ph> 89
• <ph type="x-smartling-placeholder"></ph> 15 ans

Source

Le format est le plus souvent exprimé sous la forme de deux entiers et de deux-points, selon les dimensions suivantes: width:height 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 plus récents, sont généralement au format 16:9.

<ph type="x-smartling-placeholder">

</ph>

Deux images au même format. L'une mesure 634 x 951 pixels, tandis que l'autre mesure 200 x 300 pixels. Elles sont toutes les deux au format 2:3.

Avec l'avènement du responsive design, il est devenu de plus en plus important de conserver le format développeurs Web, d'autant que les dimensions des images et les tailles des éléments changent en fonction l'espace de stockage.

Voici quelques exemples dans lesquels il est important de conserver les proportions:

• Créer des iFrames responsifs dont la hauteur correspond à 100% de la largeur d'un élément parent un ratio de fenêtre d'affichage spécifique
• 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éation d'un espace uniforme et réactif pour les visualisations de données interactives ou les animations SVG
• Création d'un espace uniforme et réactif pour les composants multi-éléments, tels que les cartes ou les dates de calendrier
• Créer un espace réactif et uniforme pour plusieurs images de dimensions variables (peut être utilisé avec object-fit).

Ajustement des objets

La définition d'un format nous aide à dimensionner les contenus multimédias dans un contexte responsif. Un autre outil est la propriété object-fit, qui permet aux utilisateurs de décrire comment un objet (une image, par exemple) dans un bloc doit remplir ce bloc:

<ph type="x-smartling-placeholder">

</ph>

Affichage de différentes valeurs object-fit. Regardez la démonstration sur Codepen.

Les valeurs initial et fill ajustent l'image pour qu'elle occupe tout l'espace. Dans notre exemple, cela entraîne l'image soit floutée, car les pixels sont ajustés. Pas idéal. object-fit: cover utilisations la plus petite dimension de l'image pour remplir l'espace et recadrer l'image pour l'adapter à cet espace . Elle fait un "zoom avant" à sa limite la plus basse. object-fit: contain garantit que l'intégralité de l'image est toujours visible, donc à l'opposé de cover, où elle prend la taille de la plus grande limite (dans notre exemple ci-dessus, il s'agit de la largeur), et redimensionne l'image pour conserver ses proportions intrinsèques. tout en s'adaptant à l'espace. Le cas object-fit: none montre l'image recadrée en son centre. (position par défaut de l'objet) à sa taille naturelle.

object-fit: cover fonctionne dans la plupart des situations pour garantir une interface uniforme lors de la gestion avec des images de dimensions variables, mais vous risquez de perdre des informations ses bords les plus longs).

Si ces détails sont importants (par exemple, lorsque vous travaillez à plat sur une pose de produits de beauté), le recadrage de contenu important n'est pas autorisé. Le scénario idéal serait donc des images réactives de des tailles différentes pour s'adapter à l'espace de l'interface utilisateur sans recadrage.

Autre conseil: conserver le format avec padding-top

<ph type="x-smartling-placeholder">

</ph>

Utilisation de padding-top pour définir un format 1:1 sur les images d'aperçu des posts dans un carrousel

Afin de les rendre plus réactives, nous pouvons utiliser le format. Cela nous permet de définir des proportions spécifiques et baser le reste du contenu sur un axe individuel (hauteur ou largeur).

Solution multinavigateur actuellement largement acceptée pour maintenir le format en fonction de la taille d'une image est connu sous le nom de "Padding-Top Hack". Cette solution nécessite un conteneur parent un conteneur enfant bien positionné. On calculerait ensuite le format en pourcentage à définir comme 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;
}

Maintien des proportions avec aspect-ratio

<ph type="x-smartling-placeholder">

</ph>

Utilisation de aspect-ratio pour définir un format 1:1 sur les images d'aperçu des posts dans un carrousel

Malheureusement, le calcul de ces valeurs padding-top n'est pas très intuitif et nécessite quelques des frais généraux et un positionnement supplémentaires. Avec le nouveau CSS intrinsèque aspect-ratio , la langue utilisée pour conserver l'aspect les rapports est beaucoup plus claire.

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

Utiliser la marge intérieure supérieure

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

Utiliser les proportions

.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 marge intérieure. pour effectuer une action en dehors de son champ d'application habituel.

Cette nouvelle propriété permet également Définissez le format sur auto, où "les éléments remplacés par un format intrinsèque utilisent ce format ratio; sinon la boîte n'a aucun format préféré." Si auto et <ratio> sont tous les deux spécifié ensemble, le format préféré est le format spécifié de width divisé par height, sauf si il s'agit d'un élément remplacé par 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 la grille CSS et Flexbox. Envisagez d'utiliser une liste avec les enfants que vous souhaitez conserver au format 1:1, comme une grille d'icônes de soutien:

<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;
}

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

. Images dans une grille avec leur élément parent dans différentes dimensions de format Voir la démo sur Codepen

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

aspect-ratio offre également une autre fonctionnalité très utile : il peut créer un espace d'espace réservé pour empêcher Cumulative Layout Shift et améliorer les Web Vitals. Au cours de cette première Par 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é.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

</ph> Vidéo d'un décalage de mise en page cumulatif qui se produit lorsqu'aucun format n'est défini sur un élément chargé. Cette vidéo est enregistrée avec un réseau 3G émulé.

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

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

. Une vidéo au format défini est définie sur un élément chargé. Cette vidéo est enregistrée avec un réseau 3G émulé. Voir la démo sur Codepen

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

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

Pour notre exemple ci-dessus, si les dimensions sont de 800 x 600 pixels, le balisage d'image ressemblerait à ceci: <img src="image.jpg" alt="..." width="800" height="600">. Si l'image envoyée présente le même aspect mais pas nécessairement ces valeurs de pixels exactes, nous pourrions tout de même utiliser pour définir le ratio, en l'associant au style width: 100% afin de que l'image occupe l'espace approprié. L'ensemble se présente comme suit:

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

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

Au final, l'effet revient à définir aspect-ratio sur la 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, lancée dans plusieurs navigateurs modernes, avec le maintien de dans vos conteneurs de contenu multimédia et de mise en page devient un peu plus simple.

Photos d'Amy Shamblen et Lionel Gustave via Unsplash.