Une nouvelle polyfill de requête de conteneur qui fonctionne juste

Une requête de conteneurs qui change la donne est arrivée, offrant une compatibilité transparente entre les navigateurs. Ce polyfill, développé par Chrome, garantit une implémentation simple: le chargement conditionnellement pour les navigateurs dépourvus de support natif, écrivez votre CSS à l'aide de la syntaxe des requêtes de conteneur standard et profitez de la fonctionnalité sans faille.

Ce polyfill convivial simplifie considérablement le développement, contrastant avec des solutions antérieures comme CQFill qui nécessitaient un traitement CSS et postCSS supplémentaire.

Voici comment charger le polyfill pour l'intégration légère:

 // Test de support
const supportSontainerQueries = "conteneur" dans document.documentElement.style;

// importation conditionnelle
if (! supportSpontainerQueries) {
  import ("https://cdn.skypack.dev/continer-Query-polyfill");
}

Le NPM est une autre option, mais cette méthode maintient les choses rationalisées.

L'utilisation de requêtes de conteneur nécessite un élément de wrapper autour du contenu stylé. Vous ne pouvez pas interroger directement l'élément que vous stylisez. Par exemple, considérez un widget météo:

<div class="weather-wrap">
  <dl>
    <div>
      <dt>Dimanche</dt>
      <dd>
<b>26 °</b> 7 °</dd>
    </div>
    <div>
      <dt>Lundi</dt>
      <dd>
<b>34 °</b> 11 °</dd>
    </div>
  </dl>
</div>

L'emballage est défini comme un conteneur:

 .weather-wrap {
  conteneur: en ligne de taille / manueur météo;
  /* ou: */
  / * Type de conteneur: taille en ligne; * /
  / * Nom de conteneur: Weather-Wrapper; * /

  / * Facultatif: redimensionner la poignée pour les tests * /
  / * redimensionner: les deux; * /
  / * débordement: caché; * /
}

Les styles globaux et encadis sont ensuite appliqués:

 .météo {
  Affichage: flex;
}
@Container Taille de la météo (max-largeur: 700px) {
  .météo {
    Flex-Direction: colonne;
  }
}

Une démo plus complète présentant le polyfill avec un widget météo est disponible (lien vers la démo omise car elle n'est pas fournie dans l'entrée). Le blog de Bramus propose également un exemple de carte utile.

Support et considérations du navigateur:

Le polyfill prend en charge Chrome / Edge 88, Firefox 78 et Safari 14 en raison de sa dépendance à l'égard de ResizeObserver , MutationObserver et :is() . Alors que la documentation Polyfill détaille les limitations mineures, les cas d'utilisation de base sont entièrement couverts.

Avec le statut officiel du projet de spécifications et le support en arrière-plan dans Chrome, un support généralisé du navigateur est prévu. Cependant, le calendrier exact reste incertain.

La petite taille du polyfill (environ 2,8 kb) en fait une surcharge de performance négligeable, ce qui a potentiellement augmenté l'adoption de la requête en conteneurs.

Flash de contenu non syntylé (FOUC):

La nature asynchrone du polyfill introduit un FOUC potentiel. Tout en atténuant cela nécessite un retard de rendu (généralement indésirable), le bref FOUC est préférable aux retards de contenu. Le problème se résoudra une fois que le support du navigateur natif deviendra omniprésent.

Embrassez la puissance des requêtes de conteneurs aujourd'hui avec ce polyfill robuste! Partagez vos propres démos et expériences.

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!