CSS Shapes est un module de spécification CSS qui décrit les formes géométriques. Selon le niveau 1 de cette spécification, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.

Exemple simple

Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété shape-outside qui lui est appliquée vaut circle(50%). Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.

Référence

Propriétés

Types de donnée

Guides

Spécifications

Spécification État Commentaires
CSS Shapes Module Level 1 Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

shape-outside

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple37 ?531 2 Non248 -webkit-
<gradient> ? ? Non Non Non ?
inset() ? ?543 Non Non ?
polygon() ? ?554 Non ? ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? ?531 2248 -webkit- ?
<gradient> Non ? ? Non ? ? ?
inset() Non ? ?543 Non ? ?
polygon() Non ? ?554 ? ? ?

1. Firefox only supports values <shape-box>, circle(), and ellipse().

2. From version 53: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 54: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 55: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

shape-margin

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui ? Non Non Non7 -webkit-
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui ? ? Non Non ? ?

shape-image-threshold

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple37 ?591 Non247 -webkit-
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui ? ?59124 ? ?

1. From version 59: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, xdelatour
Dernière mise à jour par : SphinxKnight,