La mise en forme visuelle et l’affichage des sites web doivent s’adapter à une multitude de critères et de contextes d’utilisation, tels que :
- Nature du périphérique de consultation : smartphones, tablettes, ordinateurs, téléviseurs, consoles de jeux, électroménagers connectés, etc.
- Qualité de la bande passante : connexion limitée, réseau de fin de ligne, fibre optique, etc.
- Handicap de l’utilisateur : troubles de la vue, absence de périphériques comme la souris, haut-parleurs manquants, écrans tactiles endommagés, etc.
- Contexte ou environnement de consultation : usage depuis un pays étranger, clavier à idéogrammes, comptes utilisateurs restreints, imprimantes noir et blanc, etc.
- Situation lors de la consultation : faible niveau de batterie, forte luminosité extérieure, coupures de réseau intermittentes, forfait de données presque épuisé, etc.
Les contextes d’utilisation sont nombreux et variés, mais l’objectif est de garantir une expérience utilisateur homogène et optimale, quel que soit le scénario. Pour répondre à ce défi, nous disposons de plusieurs langages et technologies, notamment les CSS, les media queries, la fonction matchMedia(), et des principes de Responsive Web Design (RWD), qu’ils soient responsifs (concept d’Ethan Marcotte) ou adaptatifs (concept de Marc Boulton). Pour un approfondissement, consultez la série Quid du Responsive Web Design.
Langage de mise en forme
Depuis plusieurs années, la séparation entre le contenu et l’affichage est bien établie. Après avoir vu la mise en forme structurelle et sémantique du contenu, nous nous concentrons ici sur l’aspect visuel, englobant la mise en page (disposition, volume, emplacement, visibilité) et le formatage des éléments (couleurs, typographies, tailles, décorations).
Le langage CSS est au cœur de cette mise en forme. Depuis sa version 3, CSS a beaucoup évolué, incluant des fonctionnalités telles que les grilles de mise en page, les animations, les transitions, les transformations, et l’utilisation de variables et de masques. Cette richesse permet de répondre à des besoins d’affichage complexes et variés tout en garantissant une prise en charge cohérente par les navigateurs modernes.
Préprocesseurs et PostCSS
En complément des CSS natifs, l’utilisation de préprocesseurs tels que Sass ou Less offre des avantages en matière de structuration et d’optimisation des feuilles de styles (voir la série Comprendre et utiliser Sass pour plus de détails). Ces outils permettent d’écrire des CSS de manière plus efficace et modulaire.
En outre, des outils comme PostCSS agissent en tant que post-processeurs, ajoutant des fonctionnalités supplémentaires et optimisant les feuilles de style après leur écriture. Tandis que cette rubrique se concentre sur l’usage du langage CSS proprement dit, la gestion des automatisations via des outils tels que Grunt ou Gulp, ainsi que l’intégration de PostCSS, est abordée dans la section 04-Interaction et flux.
- Les principales catégories de ce chapitre sont :
- CSS (25)
- Grilles & Maquettes (3)
- Outils graphiques (2)
- PWA (1)
- Responsive Web Design (11)