Tutoriel La propriété CSS Resize

La propriété CSS resize

La propriété resize permet de spécifier si un élément est redimensionnable et de quelle manière. Elle peut être utilisée sur des éléments comme les <textarea> ou les <iframe>.

Syntaxe générale de la propriété resize

selector {
  resize: none | both | horizontal | vertical | inherit;
}

Valeurs par défaut	none
Inherited:	non
Animable :	non En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.resize="both"

valeurs possibles pour la propriété resize

Les valeurs possibles pour la propriété resize sont :

none : l'élément ne peut pas être redimensionné
both : l'élément peut être redimensionné horizontalement et verticalement
horizontal : l'élément peut être redimensionné horizontalement uniquement
vertical : l'élément peut être redimensionné verticalement uniquement
inherit : l'élément hérite de la valeur de son parent

Exemple pratique d'utilisation

Pour redimensionner un élément, il suffit de spécifier la valeur de resize sur l'élément :

<textarea style="resize: both;"></textarea>

Il est également possible de définir la propriété dans une feuille de style :

.resizable {
  resize: both;
  overflow: auto;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

Voici quelques exemples d'utilisation de la propriété resize :

Exemple 1 : Redimensionnement d'un <textarea>

	<textarea style="resize: both;">Contenu du texte</textarea>

Exemple 2 : Redimensionnement d'un <div>

	<div class="conteneur">Contenu du div</div>

Résultat :

Contenu du div

En utilisant cette classe, tous les éléments ayant la classe resizable pourront être redimensionnés.

Astuces et conseils d'utilisation

La propriété resize peut être très utile pour permettre à l'utilisateur de redimensionner certains éléments comme les zones de texte. Toutefois, il est important de faire attention à la manière dont elle est utilisée car elle peut causer des problèmes d'expérience utilisateur si elle est mal employée.

Il est conseillé de ne pas utiliser la valeur both sur des éléments contenant du texte car cela peut conduire à des problèmes de lisibilité si l'utilisateur redimensionne trop l'élément.
Il est important de définir une taille minimale pour les éléments redimensionnables pour éviter qu'ils deviennent trop petits.
Il est important de noter que la propriété resize n'est pas applicable à tous les types d'éléments HTML, elle ne fonctionne que pour les éléments tels que les textarea et les div qui ont une hauteur et une largeur définies. Il est donc important de veiller à ce que l'élément auquel vous appliquez la propriété resize possède ces dimensions.
De plus, le redimensionnement peut ne pas toujours fonctionner correctement sur les appareils mobiles ou tactiles, et il est donc conseillé de tester soigneusement votre code sur plusieurs appareils et navigateurs pour vous assurer qu'il fonctionne correctement.
Enfin, une utilisation abusive de la propriété resize peut affecter négativement l'expérience utilisateur, il est donc important d'utiliser cette propriété avec parcimonie et de réfléchir à l'impact sur le design de votre site web.

En conclusion, la propriété CSS resize est un outil utile pour ajouter une fonctionnalité de redimensionnement à certains éléments HTML tels que les zones de texte et les divs. En prenant en compte les astuces et conseils mentionnés dans ce tutoriel, vous pouvez intégrer cette propriété de manière judicieuse et améliorer l'expérience utilisateur de votre site web.

Exemple montrant les différents valeurs de la propriété css resize en action

L'élément redimensionnable dans cette démo est un paragraphe. Cliquez sur les boutons et essayer de redimensionner le paragraphe pour voir les différentes valeurs de redimensionnement.

Exemple : Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple la propriété resize css</title> 
<style>
body {
  background-color: #1D1F1F;
}

section { 
  width: 50%;
  margin: 0 auto;
}

p {
  width: 100%;
  height: 5em;
  background-color: white;
  padding: .5em;
  overflow: scroll;
}
</style>
</head>
<body>

<h1>La propriété css resize</h1>

<section>
  <button>both</button>
  <button>horizontal</button>
  <button>vertical</button>
  <button>none</button>
<p class="resize">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue. In sed dui placerat nisl cursus aliquet. Integer nisl lorem, maximus et viverra non, aliquet vel arcu. Cras ullamcorper, arcu id molestie scelerisque, est turpis interdum mauris, sit amet pretium mi lectus at metus. Phasellus ornare odio in ipsum faucibus, et tempus est porttitor. Nullam sollicitudin eleifend mi at semper. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue.</p>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('button').on('click', function() {
  $('p').css('resize', $(this).text());
});
</script>
</body>
</html>

Dans cet exemple lorsque vous cliquez sur l'un des boutons, la propriété resize du paragraphe <p> sera modifiée en fonction du texte du bouton cliqué. Assurez-vous d'inclure la bibliothèque jQuery à partir de la source appropriée ou utilisez une version locale si vous l'avez déjà téléchargée.

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é.

Les numéros suivis de -moz- indiquent la première version qui fonctionne avec un préfixe.