Les unités de conteneurs doivent être assez pratiques

Les requêtes de conteneurs sont sur le point de révolutionner la conception Web en permettant des décisions de mise en page basées sur les dimensions des éléments individuels (conteneurs), pas sur la fenêtre entière. Imaginez un conteneur qui adopte une disposition de ligne à 600 pixes de large, mais passe à une disposition de colonne à des largeurs plus étroites - ce niveau de contrôle granulaire est transformateur. Cela diffère considérablement de la conception réactive traditionnelle qui repose uniquement sur les points d'arrêt de la taille de l'écran.

Alors que les unités de pourcentage (%) offrent un certain dimensionnement relatif aux conteneurs, leurs capacités sont limitées. Par exemple, la largeur d'un conteneur peut être définie en pourcentage de la largeur de ses parents, mais il n'y a pas de mécanisme pour relier les propriétés; Vous ne pouvez pas, par exemple, définir la taille de la police en pourcentage de la largeur d'un conteneur.

Entrez les unités de conteneurs! La spécification proposée introduit plusieurs nouvelles unités:

Cela débloque une flexibilité sans précédent. La taille de la police, la hauteur de la ligne, l'écart, la marge - pratiquement toutes les propriétés - peuvent désormais être ajustées dynamiquement en fonction de la largeur du conteneur.

Un accès anticipé est disponible! Miriam (@terriblemia) met en évidence le support de Chrome Canary (avec le drapeau des requêtes de conteneur activée). Une vidéo de démonstration rapide présente le potentiel.

Une exploration plus approfondie de Scott (lien vers les travaux de Scott serait insérée ici si elle est fournie) et Ahmad ombragée fournirait des informations supplémentaires:

Ahmad Osleed met l'accent sur les gains d'efficacité des unités de conteneurs pour gérer la taille de la police, le rembourrage et la marge dans les composants, éliminant le besoin d'ajustements manuels.

La libération simultanée des requêtes de conteneurs et des unités de conteneurs reste incertaine, mais l'impact potentiel est indéniable.

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!