Inset - Propriété CSS

inset
top
right
bottom
left

Résumé des caractéristiques de la propriété inset

Description rapide
Définit la position de l'élément lorsque celui-ci est positionné autrement qu'en statique.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto
Pourcentages
Calculés par rapport à la taille du bloc parent.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété inset passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Éléments positionnés
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: WD (document de travail)

Schéma syntaxique de inset.

Inset property - Syntax diagramSyntax diagram of the inset CSS property. See stylescss.free.fr for details. auto auto length / % length / % {1,4} {1,4}inset:;inset:;
Schéma syntaxique de la propriété inset
Les liens du schéma donnent accès à plus de détails

Précisions sur le schéma :

  • length est une valeur numérique suivie d'une des unités de dimension.
  • % est un pourcentage calculé par rapport aux dimensions du bloc parent.
  • La syntaxe peut être répétée de 1 à 4 fois.

Description de la propriété inset.

La propriété inset définit l'emplacement d'un élément positionné autrement qu'en statique, c'est à dire ceux pour lesquels la propriété position a une des valeurs absolute, fixed, relative ou sticky. Elle est sans effet sur les éléments non positionnés, c'est à dire les éléments pour lesquels la propriété position a sa valeur initiale ou static. Reportez vous à la propriété position pour plus de détails sur le positionnement des éléments.

inset est en fait une propriété résumée des quatre propriétés top, right, bottom et left. Contrairement à ce qu'on pourrait croire, ce n'est pas un raccourci pour inset-block et inset-inline car ces deux propriétés sont sensibles à la direction et au sens d'écriture, tandis que inset ne l'est pas.

Prise en charge de la langue.

Si le positionnement doit se faire relativement au mode d'écriture, on utilisera plutôt les propriétés inset-inline et inset-block, ou les propriétés détaillées correspondantes.

   

top
left
La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.
right
bottom

Syntaxes pour inset.

  • inset: auto;

    La position de l'élément est déterminée par le navigateur.

  • inset: 15px 25px 30px 50px; a b c d

    De une à quatre valeurs, séparées par des espaces, et suivies d'une unité de dimension (voir les unités de dimension). Chacune de ces valeurs définit la distance de l'un des bords de l'élément par rapport à la référence :
    - La page si l'élément est position en absolu.
    - L'écran si l'élément est positionné en fixed.
    - Etc.

    Suivant le nombre de valeurs présentes dans la syntaxe, le navigateur devra les traiter de la façon suivante :

    Propriété inset avec une seule valeur
    Une seule valeur
    Elle s'applique à tous les côtés.
    Propriété inset avec deux valeurs
    Deux valeurs
    La première s'applique a bord haut et au bord bas, et la deuxième au bord gauche et au bord droit.
    Propriété inset avec trois valeurs
    Trois valeurs
    Elles s'appliquent conformément au schéma ci-dessus.
    Propriété inset avec quatre valeurs
    Quatre valeurs
    Elles s'appliquent chacune à un des 4 côtés, en commençant par le haut.

    Si les valeurs sont exprimées en pourcentages, ceux-ci sont calculés par rapport aux dimensions du bloc parent.

    Si les dimensions de l'élément ne sont pas imposées, ce dernier peut être redimensionné pour satisfaire les contraintes définies par inset. Si les dimensions de l'élément sont fixées, il peut y avoir contradiction avec la propriété inset. Dans ce cas, les valeurs correspondant à bottom et right seront ignorées.

Valeurs communes :

inset: initial (auto) inset: inherit inset: revert inset: revertLayer inset: unset
top: initial (auto) top: inherit top: revert top: revertLayer top: unset
right: initial (auto) right: inherit right: revert right: revertLayer right: unset
bottom: initial (auto) bottom: inherit bottom: revert bottom: revertLayer bottom: unset
left: initial (auto) left: inherit left: revert left: revertLayer left: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de inset

Des éléments mobiles peuvent facilement être créés, en fixant leur position (ici en relative) et en appliquant une animation sur la propriété inset.

Cible avec une position animée

Manipulation de la propriété inset par programme.

Dans les exemples de code ci-après, le paramètre el représente l'élément de la page sur lequel on souhaite travailler.

Voici deux exemples de code pour modifier, en Javascript, la valeur de la propriété inset pour un élément el.


function setInset(el) {
el.style['inset']='10px 0 0 10px';
}
ou

function setInset(el) {
el.style.inset='10px 0 0 10px';
}

Deux syntaxes également pour lire la valeur de inset. La propriété doit avoir été affectée directement à l'élément lui-même et non pas par l'intermédiaire d'une classe. La valeur est renvoyée sous la même forme et les mêmes unités que lors de sa définition dans la feuille de styles.


function getInset(el) {
return el.style['inset'];
}
ou

function getInset(el) {
return el.style.inset;
}

Pour retrouver la valeur calculée de inset, utilisez le code ci-dessous. La valeur renvoyée est, soit le mot auto, soit de une à quatre valeurs en pixels, même si d'autres unités ont été utilisées pour définir la propriété dans la feuille de styles.


function getInset(el) {
return window.getComputedStyle(el).getPropertyValue('inset');
}

Avec JQuery, modifier ou relire la valeur calculée de la propriété inset peut se faire avec les codes ci-dessous. La valeur calculée qui est renvoyée est, soit le mot auto, soit une série de une à quatre valeurs en pixels.


function setInset(el) {
$(el).css('inset','auto');
}

function getInset(el) {
return $(el).css('inset');
}

Simulateur avec la propriété inset.

Le simulateur agit sur le bloc bleu, qui se trouve au départ sur la gauche de la fenêtre du navigateur. Ce bloc est en position fixe par rapport à la fenêtre du navigateur. Dans la mesure où les dimensions du bloc sont fixées, les 2ème et 3ème valeurs de inset sont ignorées, elles correspondent au positionnement par la droite et par le bas.

En changeant la langue, vous constaterez que la propriété inset est bien une propriété physique (qui ne s'adapte pas au mode d'écriture) puisque la position du bloc ne change pas en fonction de la langue.

Mode d'écriture :
inset :


Ce bloc est
positionné par
rapport à la page
position:fixed;
with:250px;
height:180px;

Compatibilité.

La prise en charge de inset est correcte, sauf pour Internet Explorer puisque, à l'époque, cette propriété n'existait pas.

Colonne 1
Prise en charge des propriétés logiques (dont le nom commence par inset) qui prennent en compte le mode d'écriture en fonction de la langue du texte.
1
Propriété
inset
Estimation de la prise en charge globale.
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

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

Historique de la propriété inset.

Voir aussi, concernant le dimensionnement des blocs.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété inset et décrite dans le module CSS Positioned Layout Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

bottom
Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
inset-block-end
Pour un élément positionné, définit l'emplacement du côté fin de block.
inset-block-start
Pour un élément positionné, définit l'emplacement du bord coté début de block.
inset-inline-end
Sur un élément positionné, définit l'emplacement du bord situé en fin de ligne.
inset-inline-start
Pour un élément positionné, définit l'emplacement du côté début de ligne.
left
Pour un élément positionné, définit l'espace entre le bord gauche de l'élément et le bord gauche de l'élément de référence.
position
Change le positionnement d'un élément, pour le rendre par exemple fixe par rapport à la page.
right
Pour un élément positionné, définit l'espace entre le bord droit de l'élément et le bord droit de l'élément de référence.
top
Pour un élément positionné, définit l'espace entre le haut de l'élément et le haut de l'élément de référence (parent positionné ou viewport).
z-index
Définit sur quelle couche un élément doit s'afficher (dessus, dessous). Surtout utile pour des éléments positionnés.