 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| Une interface CSS qui s'adapte à la résolution de l'écran |
| |
| "Quel positionnement des calques CSS permet-il de conserver l'affichage tel quel même si l'on modifie la résolution de l'écran ?"
(12/07/2005) |
 |
Commençons par dire que le
terme "calques" n'est pas approprié pour parler de mise en page
CSS. Un calque fait réellement référence à la balise "layer"
de Netscape, qui n'a jamais fait partie du standard HTML. Malheureusement,
Dreamweaver utilise ce terme pour parler du positionnement de
balises DIV, à tort car tout élément HTML peut être positionné
en CSS.
La manière
la plus facile d'aborder les interfaces en CSS est de les construire
avec des mesures précises, en pixels. Cela permet de reproduire
fidèlement un prototype créé sous Photoshop, par exemple. Le
problème est que ce genre d'interface ne fonctionne
correctement que dans la résolution pour laquelle elle a été
conçue : l'interface est susceptible "d'exploser" si l'utilisateur
change la taille des polices, ou modifier trop fortement la
résolution de son écran (voire la place prise par le navigateur).
Nombre de concepteurs CSS se sont penchés sur le problème, et
en conséquence de nombreuses autres manières d'aborder la création
d'interfaces CSS ont été mises au point :
> interface liquide
: à la manière des tableaux HTML qui sont définis avec des pourcentages
plutôt que des pixels, les tailles d'un design liquide se font
proportionnellement à l'espace disponible. Si le résultat s'adapte
à toutes les tailles d'écran, la lisibilité peut sérieusement
en pâtir au sein de très grandes résolutions.
> interface élastique
: celle-ci prend en compte la taille du texte afin de s'adapter
automatiquement en cas de changements de la taille de police.
En basant ses longueurs sur la mesure em plutôt que les pixels
ou les pourcentages, l'interface acquiert en souplesse. En revanche,
cette technique n'est pas simple à mettre en place, et les images
ne s'adapteront pas comme le texte.
> interface dépendante
de la résolution : cette technique se sert de JavaScript
pour introduire la taille de l'écran au sein du calcul des tailles
des éléments CSS. Cela complique cependant le travail de manière
substantielle.
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
Il en existe d'autres (interface progressive, contrainte, "gelée"),
mais ce sont là les principales. En apprenant à les maîtriser,
le développeur pourra plus facilement expérimenter face aux
impératifs de son projet. |
|
|
|
|
|
|
