CSS3 : la propriété resize

Vous savez que par défaut la valeur de la propriété overflow est visible. Ce qui signifie que si le contenu d'une boite dépasse la capacité de celle-ci il y a débordement comme c'est le cas pour la première boite ci-dessous. Et on ne peut pas dire que ce soit très joli.

Quelques exemples

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 overflow : hidden mais sur survol on ajuste la taille de la boite au contenu avec height : auto.

Survolez la boite 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

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

Nouveauté CSS3 : le visiteur règle la taille de la boite

Nous avons vu qu'avec HTML5 le contenu d'une boite pouvait devenir éditable (attribut contenteditable= true).
Et bien les dimensions d'une boite peuvent être modifiées avec la propriété resize de CSS3 par le visiteur. Ainsi il peut lire le texte initialement masqué.

Pour lire tout le texte 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.

Nouveauté HTML5 : contenu éditable

Attention si vous souhaitez que le visiteur puisse écrire dans une boite il faut utiliser HTML5 et non pas CSS3 et plus précisement l'attribut contenteditable = true.

Présentez vous en quelques lignes ! Vous pouvez augmenter la hauteur de la boite si vous êtes très inspiré.

Le code correspondant

... <style> 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, div.editable {overflow:hidden ; resize : vertical;} ... <h3>Débordement</h3> <div style ="color : red;"> 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. </div> <h3>Masquer une partie du texte</h3> ... <div class ="masque"> Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis ... </div> <h3>Ajouter une barre de défilement</h3> ... <div class ="defile"> Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis ... </div> <h3>Nouveauté CSS3 : le visiteur règle la taille de la boite</h3> ... <div class ="ajuste"> Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis ... </div> <h3>Nouveauté HTML5 : contenu éditable</h3> ... <div class ="editable" contenteditable ="true"> Présentez vous en quelques lignes ! Vous pouvez augmenter la hauteur de la boite si vous êtes très inspiré. </div> ...

La propriété resize

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


Retour menu