Focus : HTML5 et CSS3, chronique d’une révolution annoncée

Autre révolution, qui se développe en parallèle de l’HTML5, celle des feuilles de styles. Avec les CSS3, il est possible de créer une mise en page complexe et d’en moduler librement la présentation, sans changer une seule ligne du code HTML. Un concept présenté avec brio sur le site Zen Garden, qui propose de multiples thèmes. En octobre dernier, Adobe montrait comment les CSS permettaient de créer un site web capable de s’adapter automatiquement au format d’écran de la machine. Un seul site web peut ainsi être optimisé pour les machines de bureau disposant d’un écran de très grande taille, les ordinateurs portables, les tablettes, les smartphones, etc.

« CSS3 introduit la notion de “media queries”, offrant un niveau de ciblage fin de la mise en forme d’une page selon la taille de l’écran notamment. Ainsi, il est possible, au sein de la même feuille de style, de disposer d’un design complètement différent selon la résolution du terminal du visiteur : projecteur, écran de bureau, tablette ou téléphone mobile.

Tout cela sans nécessiter de compétences en langages de développement d’applications (Java, Objective-C), ni de versions de sites multiples à concevoir et maintenir selon chaque périphérique : le gain de temps et le coût de réalisation sont réellement appréciables ! »

Pour disposer d’un bon exemple d’utilisation des media queries du standard CSS3, Raphaël Goetter vous propose de vous connecter sur le site de son agence de création web, www.alsacreations.fr. Si vous disposez d’un navigateur web moderne, vous verrez – en réduisant la largeur de sa fenêtre – que le site s’adapte aux écrans de petite taille des smartphones, en basculant automatiquement vers une mise en page complètement différente lorsque la largeur de la fenêtre devient trop peu importante. Cette technologie rend ainsi totalement obsolète le besoin de recourir à plusieurs versions d’un site web, en fonction du terminal visé.