Introduction au CSS l’interface utilisateur

Cours introduction au CSS l’interface utilisateur, tutoriel & guide de travaux pratiques en pdf.

Le redimensionnement

La dernière version de Safari est dotée d’une fonction qui permet de redimensionner les zones de textes. C’est un gros plus je trouve, en l’utilisant tous les jours. Le CSS3 vous permet de l’appliquer facilement à tous les éléments, ce qui le rend finalement compatible avec tous les navigateurs (cross-browser). Le code est la ligne resize:both
.ui_resizable { padding: 20px; border: 1px solid; resize: both; overflow: auto; }

Le dimensionnement des boîtes

Le module CSS3 de « modèle de boîte » est l’une des techniques les plus vastes et beaucoup d’informations peuvent être trouvées dans la spécification officielle. Le dimensionnement des boîtes vous permet de définir quelques éléments propres à un domaine d’une certaine manière. Par exemple, si vous voulez deux boîtes bordées l’une à côté de l’autre, cela peut être réalisé en mettant la propriété box-sizing à border-box. Cela force le navigateur à afficher la boîte avec la largeur et la hauteur spécifiées et de positionner la bordure et la marge intérieure (padding) de la boîte.
À l’heure actuelle, d’autres préfixes sont nécessaires pour que ce soit compatible avec tous les navigateurs. Vous pouvez voir la liste complète sur la page d’exemples. Voici une base possible :
.area { width: 300px; border: 10px solid #ddccb5; height: 60px; } .boxes { box-sizing: border-box; width:50%; height: 60px; text-align: center; border: 5px solid #897048; padding: 2px; float:left; }