Scaling fluide

Présentation

Le scaling fluide permet aux composants d'ajuster leurs proportions internes (comme la taille de la police et l'espacement) en fonction de leurs dimensions actuelles. Cela permet de créer une conception plus cohérente que de passer d'un point d'arrêt fixe à un autre.

Alors que le scaling fluide était historiquement obtenu à l'aide d'unités de fenêtre d'affichage (scaling basé sur la taille de l'écran), les unités de requête de conteneur modernes permettent aux composants de s'adapter à leur conteneur parent. Cela garantit que les composants s'affichent correctement, quel que soit leur emplacement dans une mise en page, ce qui favorise une meilleure isolation et une meilleure réutilisation des composants.

Implémentation

1. Définir un conteneur

Pour utiliser des unités de requête de conteneur, vous devez d'abord définir un contexte de confinement sur un élément parent.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. Utiliser des unités de requête de conteneur

Utilisez des unités de requête de conteneur (cqi, cqb, etc.) pour définir des tailles relatives aux dimensions du conteneur.

• cqi : 1 % de la taille intégrée du conteneur (largeur dans les modes d'écriture horizontaux).
• cqb : 1 % de la taille de bloc du conteneur (hauteur dans les modes d'écriture horizontaux).

Remarque : Les unités de conteneur peuvent être utilisées directement sur n'importe quelle propriété sans qu'une règle de requête @container soit nécessaire. Ils sont automatiquement résolus en fonction de l'ancêtre le plus proche avec un container-type défini.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. Limiter les valeurs avec clamp()

Pour éviter que les tailles ne deviennent trop petites ou trop grandes, utilisez la fonction CSS clamp(). Cela empêche l'utilisateur de zoomer ou d'ajuster la taille de police de base. Pour que le texte respecte les consignes d'accessibilité, la taille maximale ne doit pas dépasser 2,5 fois la taille minimale.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

Stratégies de remplacement

Si les requêtes de conteneur ne sont pas compatibles avec le navigateur, vous devez fournir une solution de remplacement à l'aide d'unités de fenêtre d'affichage ou de requêtes média standards.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

Cette solution de secours garantit que le texte s'adapte toujours, mais en fonction de la largeur de l'écran plutôt que de celle du composant. Vous devez tester cette option pour vérifier qu'elle fonctionne dans votre cas d'utilisation.