CSS3 : la propriété resize

Le code de la page

Le CSS

div {width : 80% ; height : 100px; margin : 20px auto 20px auto ; padding :10px; border :1px dashed black ;} div.masque {overflow : hidden;} div.masque:hover {height : auto ;} div.defile {overflow:auto ;} div.ajuste {overflow:hidden ; resize : vertical;}

Le code HTML

... <div style ="color : red;"> ... </div> <div class ="masque"> ... </div> <div class ="defile"> ... </div> <div class ="ajuste"> ... </div> ...

Avant d'aborder cette nouvelle propriété CSS il convient de faire quelques rappels sur la propriété overflow.

Rappels sur overflow

Vous savez que par défaut la valeur de la propriété CSS overflow est visible. Ce qui signifie que si le contenu d'une boite dépasse la capacité découlant des dimensions de celle-ci il y a alors débordement.

Dans l'exemple toutes les boites font 80% de large et 100 pixels de haut !

Débordement

Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris implacabilitati sedisset, id velut fas iusque perpensum confestim urgebatur impleri. Dum haec in oriente aguntur, Arelate hiemem agens Constantius post theatralis ludos atque circenses ambitioso editos apparatu diem sextum idus Octobres, qui imperii eius annum tricensimum terminabat, insolentiae pondera gravius librans, siquid dubium deferebatur aut falsum, pro liquido accipiens et conperto, inter alia excarnificatum Gerontium Magnentianae comitem partis exulari maerore multavit.

Masquer une partie du texte

Pour éviter le débordement il faut régler (overflow : hidden) mais une partie du texte est alors masquée.
Donc sur survol de la boite la taille de cette dernière doit être ajustée (height : auto).

Survolez la boite ci-dessous et observez ...

Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris implacabilitati sedisset, id velut fas iusque perpensum confestim urgebatur impleri. Dum haec in oriente aguntur, Arelate hiemem agens Constantius post theatralis ludos atque circenses ambitioso editos apparatu diem sextum idus Octobres, qui imperii eius annum tricensimum terminabat, insolentiae pondera gravius librans, siquid dubium deferebatur aut falsum, pro liquido accipiens et conperto, inter alia excarnificatum Gerontium Magnentianae comitem partis exulari maerore multavit.

Ajouter une barre de défilement

Autre solution : on règle overflow à scroll ou à auto ; la taille de la boite reste inchangée mais il a ajout d'une barre de défilement pour pouvoir lire le texte. La valeur "auto" que "scroll" est plus souple car l'ajout d'une barre ne se fait que si nécessaire.

Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris implacabilitati sedisset, id velut fas iusque perpensum confestim urgebatur impleri. Dum haec in oriente aguntur, Arelate hiemem agens Constantius post theatralis ludos atque circenses ambitioso editos apparatu diem sextum idus Octobres, qui imperii eius annum tricensimum terminabat, insolentiae pondera gravius librans, siquid dubium deferebatur aut falsum, pro liquido accipiens et conperto, inter alia excarnificatum Gerontium Magnentianae comitem partis exulari maerore multavit.

La propriété resize

Exemple

Les dimensions d'une boite peuvent désormais être modifiées par l'internaute à condition que cette boite dispose de la propriété resize de CSS3.

Pour lire tout le texte dans la boite ci-dessous vous pouvez étirer verticalement la boite ci-dessous à partir du coin en bas et à droite.

Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris implacabilitati sedisset, id velut fas iusque perpensum confestim urgebatur impleri. Dum haec in oriente aguntur, Arelate hiemem agens Constantius post theatralis ludos atque circenses ambitioso editos apparatu diem sextum idus Octobres, qui imperii eius annum tricensimum terminabat, insolentiae pondera gravius librans, siquid dubium deferebatur aut falsum, pro liquido accipiens et conperto, inter alia excarnificatum Gerontium Magnentianae comitem partis exulari maerore multavit.

Syntaxe

Attention resize ne s'applique pas aux blocs dont la propriété overflow est à visible. Il faut donc que la boite pour la propriété overflow ait la valeur "hidden" ou "scroll" ou "auto".


Retour menu