HTML : Comment redimensionner une image avec des requêtes de conteneur CSS !

Vous savez ce qui est plus cool que d'utiliser une image lors de la création d'un site Web ? Que diriez-vous de créer quelque chose avec HTML et CSS qui ressemble et agit comme une image ? Et vous savez quoi, c'est désormais très simple avec les requêtes de conteneurs. Dans cet article, nous allons créer une annonce qui ressemble à une image, avec HTML et CSS.

Ensuite, nous allons la faire agir comme une image lorsqu'elle sera écrasée, agrandie et déplacée vers d'autres emplacements du document. Ok, vérifions ça !

Ok, nous avons donc cette publicité Vans dans la barre latérale du site que nous construisons, et c'est actuellement une image.

Cela rend la modification difficile ; un designer devrait le mettre à jour et nous fournir une nouvelle image si quelque chose devait changer.

De plus, nous aurions probablement besoin de plusieurs versions à utiliser avec l'ensemble source afin qu'il soit net sur les écrans haute densité et basse résolution.

Nous sommes donc chargés de le convertir en HTML ; Comment peut-on le faire?

Quelques inconvénients liés à l'utilisation d'images et d'unités de fenêtre

Eh bien, nous pourrions probablement utiliser des unités de fenêtre, mais nous aurions besoin d'ajouter du code supplémentaire si nous devions placer l'annonce à différents emplacements où ses dimensions seraient différentes puisque tout serait basé sur la fenêtre d'affichage et non sur les dimensions du conteneur.

Donc, nous pourrions y parvenir, mais cela pourrait devenir un peu compliqué. Au lieu de cela, nous pourrions utiliser des requêtes de conteneur et des unités de requête de conteneur. Les requêtes de conteneur ressemblent un peu aux requêtes multimédias, mais sont basées sur les dimensions d'un conteneur donné dans la page au lieu de la fenêtre d'affichage globale.

Configuration d'un conteneur avec la propriété CSS container-type

Ok, voyons par quoi nous commençons.

Donc, ça a l'air plutôt bien ici, mais comment se comporte-t-il lorsqu'il réagit ?

Euh, le texte et les bordures ne changent pas de taille, donc il a besoin d'un peu d'amour car il est assez cassé en l'état. Maintenant, une chose que nous faisons déjà ici est que nous utilisons un aspect-ratio qui permet au conteneur de répondre comme le ferait une image, c'est très bien.

 figure { aspect-ratio: 1 / 1.5; }

Il nous suffit de modifier toutes les dimensions du contenu pour qu'il réponde également correctement. La première étape ici consiste à fournir un conteneur pour surveiller nos dimensions. Ce sera notre élément de figure.

Pour utiliser des requêtes de conteneur ici, nous devons définir ce que l'on appelle un contexte de confinement. Nous pouvons le faire avec la propriété container-type . Pour cet exemple, nous pouvons utiliser une valeur de taille en ligne.

 figure { ... container-type: inline-size; }

Cela va configurer un conteneur qui dimensionnera les éléments en fonction de sa taille en ligne qui, dans ce cas, sera la largeur de la figure. Très bien, nous avons maintenant un conteneur à surveiller, nous sommes donc désormais libres d'utiliser les unités de requête de conteneur. Et il y a beaucoup de choix. Nous pouvons utiliser n’importe laquelle de ces valeurs unitaires :

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

Ici, nous allons utiliser cqi qui, je crois, signifie conteneur query inline. Une unité cqi équivaut à un pour cent de la largeur du conteneur. Ok, c'est tout ce dont nous avons besoin ; à partir de là, nous définissons simplement les unités selon les besoins.

Ici, nous avons quelques propriétés personnalisées qui sont utilisées sur plusieurs éléments de cette annonce.

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

Commençons par la mesure dans laquelle ce cadre est inséré par rapport au bord extérieur du conteneur. Faisons trois cqi .

 figure { ... --frameInset: 3cqi; }

Ensuite, définissons ici l'épaisseur des bordures. Dans ce cas, je vais utiliser la fonction max pour empêcher les bordures de rétrécir sous un pixel, mais je veux qu'elles soient dynamiques tant qu'elles sont plus grandes que cette valeur d'un pixel.

Ainsi, la première valeur est un pixel, puis la seconde est la valeur dynamique. Faisons-en un cqi .

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

Maintenant, pour l'élément strong , qui est le titre principal, le texte "Vans", faisons-en vingt-cinq cqi . Et, pour l'espace sous le titre, faisons trois cqi .

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

Passons maintenant au sous-titre « Off the Wall ». Il devrait faire environ la moitié de la taille du titre principal, essayons donc douze cqi . Et, pour l'espace au-dessus du texte, reprenons trois cqi .

 em { font-size: 12cqi; padding-top: 3cqi; }

Très bien, pour le dernier élément, le label "Depuis 1966", optons pour une taille de police de six cqi . Et, pour l'espace au-dessus et en dessous, nous utilisons la propriété logique pour padding-block qui prend jusqu'à deux valeurs. La première valeur est la valeur au-dessus du texte et la deuxième valeur correspond à l'espace en dessous.

Alors, allons-y avec deux cqi ci-dessus. Et, dans notre calcul, nous laisserons le --frameInset tel quel, mais nous utiliserons cinq cqi d'espace supplémentaire.

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

Ok cool, ça a l'air bien.

Voyons comment il réagit. Au fur et à mesure que nous le pressons, tout répond correctement et uniformément comme nous le souhaitions. Cela ressemble beaucoup à une image.

Il a l'air plutôt bien même lorsqu'il est petit, et vous pouvez voir que les bordures ne rétrécissent jamais en dessous d'un pixel. Ensuite, lorsque nous abordons des largeurs très étroites, cela devient plus large et tout semble toujours aussi beau.

C'est pas cool ? Un ensemble de styles, et cela fonctionne tout au long. Au fur et à mesure que nous l’agrandissons, cela semble superbe.

Maintenant, ce qui est encore plus cool, c'est que nous pouvons prendre le balisage de notre annonce, le déplacer vers la région de la colonne principale ici, et tout continue de fonctionner comme s'il s'agissait d'une image.

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

C'est tellement gentil et tellement cool. N'oubliez pas qu'il n'existe qu'un seul ensemble de styles pour réaliser tout cela. Et aucune requête des médias n’a été impliquée. Il y a bien plus à dire sur les requêtes de conteneurs dans leur ensemble, alors soyez à l'affût des prochains articles dans lesquels je couvrirai différents aspects.

Vous voulez le voir en action ?

Découvrez le code de démonstration et des exemples de ces techniques dans l'exemple Codepen ci-dessous. Si vous avez des questions ou des idées, n'hésitez pas à laisser un commentaire.