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

Format

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>

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>

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>

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>

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.

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

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é.

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

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.