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 !   https://youtu.be/5ugwp7HlpGs?embedable=true  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   qui permet au conteneur de répondre comme le ferait une image, c'est très bien. aspect-ratio   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é   . Pour cet exemple, nous pouvons utiliser une valeur de taille en ligne. container-type   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   qui, je crois, signifie conteneur query inline. Une unité   é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. cqi cqi  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   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. max  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   , qui est le titre principal, le texte "Vans", faisons-en vingt-cinq   . Et, pour l'espace sous le titre, faisons trois   . strong cqi 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   . Et, pour l'espace au-dessus du texte, reprenons trois   . cqi 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   . Et, pour l'espace au-dessus et en dessous, nous utilisons la propriété logique pour   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. cqi padding-block  Alors, allons-y avec deux   ci-dessus. Et, dans notre calcul, nous laisserons le   tel quel, mais nous utiliserons cinq   d'espace supplémentaire. cqi --frameInset cqi   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.   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps