inset - Propriété CSS
Résumé des caractéristiques de la propriété inset
auto
auto
inset
passe progressivement d'une valeur à une autre.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
.
inset
(top)
inset
(left)
inset
(right)
inset
(bottom)
Syntaxes pour inset
.
length
est une valeur numérique suivie d'une unité de dimension.%
est un pourcentage dont l'évaluation correspond à une dimension.- Cette syntaxe peut être répétée de 1 à 4 fois.
- 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 CSS 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é enfixed
.
- 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, 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
etright
seront ignorées. La valeur initiale est :
.auto
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
.
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';
}
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'];
}
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.
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 correspondant 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.
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.
inset
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
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 - Propriétés et valeurs logiques (CSS Logical Properties and Values). Les définitions suivantes sont également décrites dans ce même module.