inset() - Fonction CSS
Résumé des caractéristiques de la fonction inset()
Description de la fonction inset()
.
La fonction inset()
définit un rectangle qui pourra être utilisé pour découper un élément (avec la propriété clip-path
)
ou pour forcer un contenu à contourner sa forme (avec la propriété shape-outside
).
La fonction inset() peut être utilisée avec :
clip-path
: Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)shape-outside
: Définit le contournement du texte pour un élément flottant.
Syntaxe de la fonction inset()
.
length
est une dimension (nombre suivi d'une unité de dimension) (répétable jusqu'à 4 fois).%
est un pourcentage résultant en une dimension.
- clip-path: inset(10px 20px 10px 20px); a b c d
a
,b
,c
etd
sont quatre valeurs positives ou nulles, suivies d'une unité de dimension absolue ou relative (voir les unités CSS de dimension). Ces quatre valeurs déterminent les dimensions du rectangle de découpe, conformément au schéma ci-dessous.
Si une seule valeur est indiquée, elle est utilisée pour les quatre cotés.
Si deux valeurs sont indiquées, la première est utilisée pour les cotés haut et bas, et la deuxième pour les cotés gauches et droite.
Si trois valeurs sont indiquées, elles correspondent respectivement au coté haut, aux cotés gauche et droit, au au coté bas.
Enfin, si les quatre valeurs sont indiquées, elles s'appliquent chacune à un côté, en tournant dans le sens horaire et en commençant par le côté du haut. - clip-path: inset(10px 20px 10px 20px round 10px 10px 15px 15px); a b c d r1 r2 r3 r4
Le mot
round
introduit quatre valeurs optionnellesr1
,r2
,r3
etr4
. Ce sont également des valeurs positives ou nulles, suivies d'une unité de dimension relative ou absolue. Elles indiquent le rayon de chacun des angles, ce qui permet de définir un rectangle aux coins arrondis.
Si une seule valeur est indiquée, elle s'applique aux quatre angles.
Si deux valeurs sont indiquées, elles s'appliquent aux paires d'angles opposés.
Si trois valeurs sont indiquées, elles s'appliquent conformément au schéma ci-dessus.
Enfin, si les quatre valeurs sont indiquées, elles s'appliquent chacune à un angle, en tournant dans le sens horaire.
Simulateur.
L'image ci-dessous a été déclarée flottante (l'effet de shape-outside
n'est visible que sur les éléments flottants).
Le simulateur lui applique en plus les propriétés clip-path
et shape-outside
avec les valeurs choisies.
Cliquez sur le bouton pour consulter les styles appliqués à l'image.
Le W3C emploie environ une centaine de personnes comprenant des personnes responsables des groupes de travail, du personnel administratif, des administrateurs systèmes et des responsables de la communication. Ils sont garants du bon respect de la charte de fonctionnement du W3C.
Source : Wikipedia.
Prise en charge par les navigateurs (compatibilité).
inset()
.
inset()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que inset()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. inset()
fait partie du Module CSS - Formes de base (CSS Shapes Module). Les définitions suivantes sont également décrites dans ce même module.