Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Module W3C
Module CSS - Formes de base
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

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.
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()Télécharger l'image en SVG
  • 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 CSS 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.

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.
 

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Traitement des formes géométriques de base (cercle, rectangle, chemin...).
Colonne 2
Compatibilité des navigateurs avec la fonction CSS inset().
1
Basic shapes
2
inset()
Estimation de la prise en charge en pourcentage du parc actuel.
97%
96%

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.

Propriétés.

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

Fonctions.

Définit un cercle.
Définit une ellipse.
Définit un contour d'après la syntaxe SVG d'un chemin.
Définit une forme.