La boucle for...in js : La boucle for... in peut exécuter des commandes à plusieurs reprises. La boucle for... in est couramment utilisée pour la manipulation d'objet.
Définition et utilisation da la propriété css inline-size
La propriété CSS inline-size définit la largeur d'un élément en ligne, c'est-à-dire la largeur de l'élément sur une ligne de texte. Elle peut être utilisée pour définir la largeur d'un élément de type inline, inline-block ou inline-table.Voici la syntaxe générale de la propriété CSS inline-size :
element {
inline-size: value;
}
Element est l'élément HTML sur lequel vous souhaitez appliquer la propriété inline-size. Value est la valeur de la largeur que vous souhaitez définir pour l'élément.Voici quelques exemples d'utilisation de la propriété inline-size avec différentes valeurs :
inline-size: 200px; : définit une largeur de 200 pixels pour l'élément
inline-size: 50%; : définit une largeur de 50% de la largeur de l'élément parent
inline-size: auto; : utilise la largeur de l'élément en fonction de son contenu
inline-size: fit-content; : utilise la largeur minimale nécessaire pour contenir le contenu de l'élément
Notez que la propriété inline-size ne fonctionne que si l'élément est affiché en ligne. Si l'élément est affiché en tant qu'élément de bloc, vous devrez utiliser la propriété width au lieu de inline-size.
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.inlineSize="250px"; |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 79 | 41 | 12.1 | 44 |
Voici un exemple HTML et CSS qui utilise la propriété inline-size pour définir la largeur d'un élément en ligne :
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété css inline-size</title>
<style>
.container {
width: 600px;
}
.mon-element {
display: inline-block;
inline-size: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="mon-element">Je suis un élément avec une largeur de 200 pixels grâce à la propriété inline-size.</span> Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Et malesuada fames ac turpis egestas sed tempus urna et.
</div>
</body>
</html>
Dans cet exemple, l'élément span avec la classe mon-element a une largeur de 200 pixels grâce à la propriété inline-size. Notez que l'élément parent, le div avec la classe container, a une largeur de 600 pixels. Cela signifie que l'élément p s'étendra sur environ 40% de la largeur de son parent.Astuces et conseils pour utiliser la propriété inline-size
Voici quelques astuces et conseils pour utiliser efficacement la propriété CSS inline-size dans vos styles CSS :1- Utilisez la propriété inline-size pour contrôler la largeur d'un élément en ligne lorsque vous souhaitez que l'élément ait une largeur différente de celle de l'élément parent.
2- Si vous utilisez la propriété inline-size avec une valeur en pourcentage, assurez-vous que l'élément parent a une largeur définie.
3- Évitez d'utiliser la propriété inline-size avec une valeur en pixels si vous souhaitez que votre site soit responsive et s'adapte aux différentes tailles d'écran. Utilisez plutôt des valeurs en pourcentage ou la valeur auto.
4- N'oubliez pas que la propriété inline-size ne fonctionne que sur les éléments affichés en ligne. Si vous souhaitez définir la largeur d'un élément de bloc, utilisez la propriété width au lieu de inline-size.