 |
|
|
| |
| 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.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
|
|
|
|
|
|
