<C²: webløg />

Courriel - email address

Avatar Denis

dimanche 15 février 2004
par Denis Boudreau

Contourner les limites de MSIE

Ce n'est plus qu'un secret de polichinelle si vous êtes un habitué de C² et des sites auxquels nous faisons régulièrement lumière. Le navigateur Web le plus populaire de l'heure est également le navigateur le moins apte à interpréter correctement les documents Web usant des dernières innovations en matières de technologies Web. Parmi les nombreuses faiblesses en terme de support de feuilles de style dont souffre MSIE et par extension, ses millions d'utilisateurs, notons les règles de présentation comme min-width et max-width.

Jusqu'à tout récemment, les développeurs qui souhaitaient optimiser la lisibilité de leurs pages en utilisant ces règles afin de contrôler les dimensions minimales et maximales des zones de texte ne disposaient d'aucun réel outil fiable capable d'être appliqué convenablement par tous les navigateurs Web dignes de ce nom.

Bien que des navigateurs plus performants comme Mozilla et ses nombreux dérivés aient toujours été particulièrement aptes à interpréter les propriétés comme min-width et max-width, il en a toujours été tout autrement pour Internet Explorer sur lequel ces propriétés sèchaient platement. Résultat, ce type de propriétés n'a jamais connu le grand succès auquel il aurait normalement eu droit d'aspirer auprès des développeurs. Bien dommage car, comme le rapportent les experts en utilisabilité, un texte filant sur des kilomètres devient rapidement beaucoup moins facile à lire qu'un autre dont on limite la largeur. Considérant la popularité du navigateur vedette de Microsoft et le peu de popularité du min-width et max-width, pas surprenant que tout le monde s'entende pour dire que la lecture sur le Web n'est jamais très aisée.

Enfin, si l'on peut survivre aux trucs de passe-passe nécessaires pour contourner les faiblesses de l'indétrônable Internet Explorer, il est dorénavant possible de simuler ces propriétés CSS et par le fait même, redonner un peu de qualité d'affichage aux utilisateurs. Si le javaScript ne vous rebute pas trop (et dans ce cas précis, je n'y vois aucun problème d'accessibilité, compte tenu que son utilisation ne limiterait en rien un utilisateur ne supportant pas la technologie), vous pouvez aller lire l'article de Svend Tofte, qui explique justement comment simuler la propriété max-width chez MSIE.

Denis Boudreau | 2004.02.15 @ 20:50

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2004.02.16 @ 04:17 par MaximuS

Efectivement, je ne connaissais même pas cette propriété, c'est encore une fois IE qui façonne le payasage web; malheureusement

Haut retour au début de la page

2004.02.16 @ 12:39 par Olivier

D'un autre côté, y'a certains trucs de IE qui manquent peut-être aux standards. Y-a-t-il un équivalent standard de writing-mode, pour écrire du texte à la verticale (comme 'PANNEAU DE CONFIGURATION' ci-contre) ?

Haut retour au début de la page

2004.02.16 @ 17:00 par phdm

Evidemment, utiliser ce palliatif conduit à inscrire dans sa feuille de style des instructions non conformes aux standards et spécifiques IE. Mais les bénéfices sont appréciables. Il y a eu des débats récemment sur la Toile entre une mise en page 'fixe' (des largeurs fixées en pixels) ou 'liquide' (des largeurs fixées en pourcentage).

Or les mentions min-width, max-width et le palliatif pour MSIE permettent de sortir de ce dilemme et de faire, par exemple, du 'liquide' encadré entre 2 bornes exprimées en pixels (par exemple, min-width: 700px max-width: 1000px).

Cela permet de maintenir des largeurs de colonne raisonnable pour la lecture, quelque soit la taille de l'écran de l'internaute. Cela permet également des choses au niveau graphique. Par exemple, sur ta page, pour les photos apparaissant à droite de ton carnet en ligne, je me permets de suggérer quelque chose du type:
<img ... class='image'>
où, dans la feuille de style, .image {with: 20%;} (ta colonne de droite en faisant 24%). Cela ferait varier la taille de tes images et éviterait des effets de débordements que je constate sur des écrans 800x600. Mais donner de la sorte une taille variable à une image ne me semble possible que si tu fixes un minimum et un maximum en largeur en pixels (ou en cadratins), sinon le résultat pourrait être... surprenant sur des écrans particulièrement larges.

En permettant de compenser l'absence de support de max-width par IE, le dispositif indiqué ici par Svend Tofte s'avère non conforme mais très utile. Utiliser ce palliatif est l'un des rares compromis que j'accepte de faire avec les normes, les bénéfices sont réellement appréciables.

@mitiés - Philippe

Haut retour au début de la page

2004.02.17 @ 01:23 par s t e f

<cite who='denis'>Résultat, ce type de propriétés n'a jamais connu le grand succès auquel il aurait normalement eu droit d'aspirer auprès des développeurs</cite>

Je ne crois pas qu'on puisse aussi aisément affirmer que c'est une propriété 'vouée au succès', Denis...

Comme pour pas mal d'autres exemples que nous avons connus par le passé, cette propriété, si elle était largement répandue dans les navigateurs, provoquerait des tollés (parce qu'on en abuserait, comme on a abusé, en leur temps, des frames ou des tableaux, ou des font-size:60% dans les CSS) : 'ah mais moi je ne veux pas qu'on force l'affichage de mon navigateur', 'ah mais moi je préfère une largeur fixe', 'ah mais moi je n'aime pas les colonnes si serrées sur mon 21 pouces en 1600px de large'. Enfin, que du classique quel que soit le choix technique retenu pour un site.

Cette propriété, au mieux, viendrait s'ajouter à notre boîte à outils. Quant à dire qu'elle *devrait* avoir du succès, c'est une autre paire de manches. De la modération en tout, pour vivre plus vieux.... ;-)

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)