Inset - Propriété CSS

Schéma syntaxique de inset.

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

• length est une valeur numérique suivie d'une des unités de dimension.
• % est un pourcentage calculé par rapport à la dimension correspondante 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.

Valeurs 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 :

  
  Une seule valeur
  Elle s'applique à tous les côtés.

  
  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.

  
  Trois valeurs
  Elles s'appliquent conformément au schéma ci-dessus.

  
  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 (valeurs de width et height égale à auto, 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.

• inset: initial; (auto) inset: inherit; inset: revert; inset: revertLayer; inset: unset;

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

Animation de la propriété 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.

Manipulation de la propriété inset par programme.

Avec Javascript, modifier la valeur de inset.

Voici deux exemples de code pour modifier, en Javascript, la valeur de la propriété [inset}.

let el = document.getElementById('id'); el.style['inset'] = '1cm 2%'; // ou let el = document.getElementById('id'); el.style.inset = '1cm 2%';

Avec Javascript, lire la valeur de inset.

Et deux exemples pour relire la valeur de la propriété. Attention ! Celle-ci doit avoir été affectée dans le code HTML via l'attribut style, et non pas en passant par un sélecteur CSS. Ces deux codes renvoient la valeur sous la même forme et les mêmes unités que lors de sa définition.

let el = document.getElementById('id'); let value = el.style['inset']; // ou let el = document.getElementById('id'); let value = el.style.inset;

Avec Javascript, lire la valeur calculée de 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. La valeur calculée est toujours définie.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('inset');

Avec JQuery, modifier la valeur de inset.

Avec JQuery, on trouve des codes comparables.


$('#id').css('inset', '1cm 2%');


Avec Javascript, lire la valeur de inset.

let value = $('#id').css('inset');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété inset et affichent ensuite soit la valeur telle qu'elle a été appliquée (premier bouton), soit la valeur calculée (deuxième bouton). Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de inset. On constate en particulier que toutes les autres unités sont converties en pixels, sauf les pourcentages, qui sont mémorisés en tant que pourcentages (voir le chapitre sur l'héritage).

Simulateur avec la propriété inset.

Le simulateur agit sur le bloc bleu, qui se trouve au départ sur la gauche de son bloc parent. Le bloc bleu est en position absolute et se positionne donc au début de son parent, lui même en position relative. Dans la mesure où les dimensions du bloc bleu sont sur auto, ses dimensions peuvent varier pour satisfaire aux valeurs fournies par inset. Mais vous pouvez fixer la largeur et/ou la hauteur du bloc bleu, à ce moment 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.

Prise en charge de inset par les navigateurs.

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

1

Propriété
inset

2

Propriétés
top, right,
bottom et left

Estimation de la prise en charge globale.

94%

96%

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

Caniuse

Historique de la propriété inset.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Concernant inset. Résumé des propriétés physiques.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Éléments positionnés - Niveau 3

  Concernant inset. Pas de changement concernant la propriété inset.
  

  07 Février 2012

  Document de travail.

  

  

  

Voir aussi, concernant le positionnement des blocs.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété inset est décrite dans le module Module CSS - Éléments positionnés. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :