Position d'ancrage Quirks

L'almanac CSS-Tricks possède désormais une couverture complète de la nouvelle API de positionnement d'ancrage, détaillant chaque propriété, fonction et règle. Ma plongée profonde récente dans ce module a révélé des bizarreries et des bogues potentiels intrigants, que je vais explorer ici pour vous sauver un gratte-ciel.

le bloc contenant du modèle modéré en coffre-fort (IMCB)

Bien que le bloc contenant des éléments statiques soit simple (la zone de contenu du parent), les éléments absolument positionnés introduisent la complexité. Leur bloc contenant est généralement la fenêtre ou l'ancêtre positionné le plus proche. Cependant, le bloc contenant en coffre-fort en insert (IMCB) ajoute une couche de nuance, particulièrement pertinente pour le positionnement de l'ancrage.

L'IMCB est défini dans la spécification comme le bloc contenant effectivement rétréci par les propriétés inset (top, right, bottom, left) de l'élément absolument positionné.

par exemple:

.absolute {
  position: absolute;
  top: 80px;
  right: 120px;
  bottom: 180px;
  left: 90px;
}

Ici, l'IMCB est plus petit que la fenêtre, réduit par les valeurs d'insertion spécifiées. Comprendre l'IMCB est crucial pour maîtriser le positionnement de l'ancrage, en particulier les propriétés position-area et position-try-order. position-area divise le bloc contenant en une grille, et l'IMCB définit la zone de positionnement dans cette grille. position-try-order utilise les dimensions IMCB pour déterminer le positionnement de secours. L'outil visuel d'UNA Kravets à https://www.php.cn/link/7e77e4a1b051ec0a510b48eec2f3a3c fournit une excellente visualisation.

Spécification par rapport à la mise en œuvre: une histoire d'évolution rapide

Alors que la spécification a servi de guide précieux, l'implémentation du navigateur réel a révélé des écarts. Le développement et le déploiement rapides du positionnement de l'ancrage (premier projet de juin 2023, version de Chrome 125) ont conduit à certaines incohérences initiales entre la spécification et le comportement du navigateur. Les modifications apportées après l'implémentation initiale du navigateur incluent:

• inset-area renommé position-area: inset-area est obsolète, utilisez position-area.
• position-try-options renommé position-try-fallbacks: utiliser position-try-fallbacks.
• inset-area() Fonction supprimée: La fonction de wrapper n'est plus nécessaire pour position-try-fallbacks.
• anchor(center) Simplification: Une syntaxe plus concise pour le centrage est maintenant disponible.
• bogues: Plusieurs bogues existent, en particulier concernant le comportement position-area lorsqu'une ancre par défaut est absente et position-visibility comportement par défaut.

Considérations d'accessibilité

Alors que le positionnement de l'ancrage excelle pour les info-bulleurs et les popovers, l'utiliser à des fins purement décoratives (par exemple, les éléments de connexion avec les lignes) peuvent entraver l'accessibilité. Les lecteurs d'écran peuvent ne pas comprendre la relation entre les éléments liés visuellement mais sémantiquement non liés. L'utilisation d'attributs Aria comme aria-describedby et role est recommandé d'établir une relation sémantique claire, assurant l'accessibilité des technologies d'assistance.

Conclusion

La maîtrise du positionnement de l'ancrage nécessite de naviguer dans ses complexités. Alors que l'Almanac CSS-Tricks fournit des ressources précieuses, n'oubliez pas que l'API évolue, promettant d'autres opportunités d'apprentissage et des raffinements futurs potentiels.

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!