Arrêtez de vous battre avec les requêtes multimédias ! Utilisez plutôt les requêtes de conteneur CSS

Avez-vous déjà créé un composant qui semble parfait dans votre contenu principal mais qui tombe en panne dans la barre latérale ? ?

Les requêtes multimédias ne résolvent que la moitié du problème : elles se soucient de la taille de l'écran, et non de l'endroit où se trouve réellement votre composant. C'est là qu'interviennent les requêtes de conteneur.

Quel est le problème avec les requêtes multimédias ?

Disons que vous avez créé ce composant de carte :

@media (min-width: 768px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

A fière allure sur mobile et sur ordinateur ! Jusqu'à ce que... votre coéquipier le mette dans une barre latérale étroite. Maintenant, votre disposition « bureau » essaie de se faufiler dans un espace de 300 px. Aïe.

Vous cherchez à renforcer vos compétences CSS ? Consultez « Techniques CSS modernes qui ont remplacé mon JavaScript » pour voir comment le CSS pur peut remplacer le code JavaScript complexe.

Requêtes de conteneur : la meilleure solution

Au lieu de demander « quelle est la largeur de l'écran ? », les requêtes de conteneur demandent « quelle est la largeur de mon conteneur ? » Voici comment ils fonctionnent :

/* Step 1: Mark the container */
.card-wrapper {
  container-type: inline-size;
}

/* Step 2: Style based on container width */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 2rem;
  }
}

Désormais, votre carte s'adapte à son contenant, et non à l'écran. Placez-le n'importe où - ça marche !

Exemple réel : une carte de produit intelligente

Voici une fiche produit qui s'adapte à tous les espaces :

<div>





<pre class="brush:php;toolbar:false">.product-wrapper {
  container-type: inline-size;
}

/* Mobile-first: Stack everything */
.product {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Medium container: Side-by-side layout */
@container (min-width: 400px) {
  .product {
    grid-template-columns: 200px 1fr;
  }
}

/* Large container: More sophisticated layout */
@container (min-width: 600px) {
  .product .content {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .product .desc {
    grid-column: 1 / -1;
  }
}

Prise en charge du navigateur ?

Bonne nouvelle ! Les requêtes de conteneur fonctionnent dans tous les navigateurs modernes. Pour les navigateurs plus anciens, votre mise en page mobile devient la solution de repli :

/* Default mobile layout */
.product { display: grid; }

/* Enhance for modern browsers */
@supports (container-type: inline-size) {
  /* Container query styles */
}

Vous voulez connaître ces détails de l'interface utilisateur ? "12 micro-interactions frontales que les utilisateurs jugent secrètement" révèle les interactions subtiles qui donnent l'impression que les sites Web sont raffinés.

Conseils rapides

1. N'imbriquez pas les requêtes des conteneurs trop profondément - cela devient compliqué
2. Utilisez la taille en ligne au lieu de la taille lorsque vous n'avez besoin que de la largeur
3. Testez vos composants dans des conteneurs de différentes tailles

Essayez-le vous-même !

1. Choisissez un composant qui vit à plusieurs endroits
2. Ajouter containers-type: inline-size à son wrapper
3. Remplacez les requêtes multimédias par des requêtes conteneurs
4. Regardez-le s'adapter automatiquement !

Vous voulez en savoir plus ?

• Guide MDN
• Puis-je utiliser – Requêtes de conteneur

Déposez un commentaire si vous créez quelque chose de sympa avec Container Queries ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!