Rayon de frontière conditionnel dans CSS

Cette astuce CSS, documentée par Ahmad Osheed et provenant de la base de code de Facebook, ajuste dynamiquement le rayon frontalier d'un élément basé sur sa largeur par rapport à la fenêtre. La magie se produit en une seule ligne de CSS:

 .carte {
  Border-Radius: Max (0px, min (8px, calc ((100vw - 4px - 100%) * 9999)));
} 

La logique principale compare 100vw (largeur de la fenêtre) avec 100% (largeur d'élément). Normalement, le border-radius est de 8px. Cependant, lorsque la largeur de l'élément s'approche de la largeur de la fenêtre (dans une tolérance d'environ 4px), le calcul entraîne une valeur négative. Les fonctions max(0px, ...) et min(8px, ...) , combinée avec le grand multiplicateur (9999), assurent une bascule nette entre 0px et 8px Border-Radius, éliminant toutes les valeurs intermédiaires. La suppression du multiplicateur (9999) montre une transition progressive à mesure que la largeur de l'élément approche de la largeur de la fenêtre.

Cette approche offre des avantages par rapport aux requêtes @media :

• Contrue-Aware: Contrairement aux requêtes multimédias qui reposent sur des largeurs de fenêtres fixes, cette technique répond dynamiquement à la largeur de l'élément par rapport à la fenêtre, agissant comme une forme de requête de conteneur. Il n'a pas besoin de connaître la taille de la carte à l'avance. Une requête multimédia dépendrait de cette largeur prédéfinie.

• Polvalerie: Cette technique "Fab Four" (comme on l'appelle parfois) est particulièrement utile dans le développement des e-mails et d'autres contextes où un contrôle précis sur la réactivité de la disposition est crucial.

Les développeurs mettent en évidence son adaptabilité supérieure par rapport aux requêtes médiatiques, ce qui en fait un outil puissant pour les scénarios de conception réactifs.

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!