Inset() - Fonction CSS

inset()

Résumé des caractéristiques de la fonction inset()

Description rapide
Définit un rectangle, utilisable pour découper un élément.
Statut
Standard
Pourcentages
Calculés par rapport aux dimensions de l'élément parent.
Module W3C
Module CSS - Formes de base
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de inset().

Schéma syntaxique de la fonction inset()Syntaxe de la fonction inset() : définition d'un rectangle pour le découpage d'un élément. length / % length / % {1,4} {1,4} round round length / % length / % {1,4} {1,4}inset()inset()
Schéma syntaxique de la fonction inset().
Cliquez sur les termes du diagram pour plus de précision.
Télécharger le schéma en SVG

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

  • length sont des dimensions (nombre suivi d'une des unités de dimension), répétables jusqu'à 4 fois.
  • % est un pourcentage calculé par rapport aux dimensions de l'élément.

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 valeur inset() peut être utilisée avec les propriétés suivantes :

  • 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 la forme du contournement du texte pour un élément flottant.

Syntaxes de la fonction inset().

  • clip-path: inset(10px 20px 10px 20px); a b c d

    a, b, c et d sont quatre valeurs positives ou nulles, suivies d'une unité de dimension absolue ou relative (voir les unités de dimension). Ces quatre valeurs déterminent les dimensions du rectangle de découpe, conformément au schéma ci-dessous.

    Paramètres de la fonction inset()

    Fonction inset() avec un paramètre
    Si une seule valeur est indiquée, elle est utilisée pour les quatre cotés.
    Fonction inset() avec deux paramètres
    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.
    Fonction inset() avec deux paramètres
    Si trois valeurs sont indiquées, elles correspondent respectivement au coté haut, aux cotés gauche et droit, au au coté bas.
    Fonction inset() avec quatre paramètres
    Enfin, si les quatre valeurs sont indiquées, elles s'appliquent chacune à un côté, en tournant dans le sens horaire et en com­men­ç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 optionnelles r1, r2, r3 et r4. 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.

    Paramètres de la fonction inset()

    Fonction inset() avec un paramètre
    Si une seule valeur est indiquée, elle s'applique aux quatre angles.
    Fonction inset() avec deux paramètres
    Si deux valeurs sont indiquées, elles s'appliquent aux paires d'angles opposés.
    Fonction inset() avec deux paramètres
    Si trois valeurs sont indiquées, elles s'appliquent conformément au schéma ci-dessus.
    Fonction inset() avec quatre paramètres
    Enfin, si les quatre valeurs sont indiquées, elles s'appliquent chacune à un angle, en tournant dans le sens horaire.

Simulateur avec la fonction inset()

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.

clip-path :
shape-outside :
Démo pour la fonction inset() Le W3C est composé d'entreprises et d'universités qui ont une activité en rapport avec Internet. C'est le cas par exemple d'éditeurs informatiques, en particulier les éditeurs des navigateurs (Mozilla Fondation, Microsoft, Apple, Opera, Google, etc.). On trouve également des centres de recherches (Inria, National Research Council Canada, etc.), des opérateurs de réseaux, ainsi que de nombreuses autres entreprises investies dans le Web.
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.
 

Support de la fonction inset().

Colonne 1
Support des formes géométriques utilisables avec clip-path, shape-outside, etc.
Colonne 2
Support de la fonction inset() pour définir une forme géométrique (un rectangle) utilisable par exemple avec la propriété clip-path.
1
Formes
géométriques
2
Fonction
inset()
Estimation de la prise en charge globale.
97%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Chrome

Safari

Firefox

Safari sur IOS

Edge

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction inset().

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. La fonction inset() fait partie du "module CSS - Formes de base". Les définitions suivantes sont également décrites dans ce même module. Plus d'infos ? Reportez-vous à CSS Shapes Module.

Propriétés :

shape-image-threshold
Définit le seuil de transparence en vu de l'habillage d'une image.
shape-margin
Définit la marge pour l'habillage d'un élément flottant.
shape-outside
Définit la forme du contournement du texte pour un élément flottant.

Fonctions :

circle()
Définit un cercle qui pourra étre utilisé pour découper un élément ou définir une marge de contournement.
ellipse()
Définit une ellipse.
path()
Définit un contour d'après la syntaxe SVG d'un chemin.
polygon()
Définit une forme.