Contribution de David Tremblay, octobre 2005

Le constat

Êtes-vous frustrés du fait que nos amis de Redmond n’aient pas inclus la possibilité d’utiliser la propriété CSS position: fixed pour émuler des cadres (frames)?

« WinIE5 and WinIE6 don’t implement ‘fixed’ yet. That is unfortunate, but the bigger problem is that they also don’t parse the ‘position’ property correctly. A browser that doesn’t know ‘fixed’ should throw away the rule ‘position: fixed’ and fall back to whatever the previous value of ‘position’ in the style sheet was. We could then add ‘position: absolute’ just before the ‘fixed’ and the browser would use that. But in WinIE 5 and 6 that is not what happens. Apparently the keyword ‘fixed’ is somehow interpreted as ‘static’. A pinned-down menu. »

Faites ce test en suivant le lien précédent avec MSIE, le petit menu à gauche ne reste pas à l’endroit déterminé, il reste désespérément accroché en haut de la page.

Comment émuler des cadres avec CSS?

Essayez la feuille de style suivante. Elle fonctionne avec Opéra et Mozilla, mais pas avec IE, parce que ce dernier interprète la propriété CSS fixed comme il le ferait pour static, alors qu’un fureteur normal qui ne connaîtrait pas la règle fixed irait vers la règle précédente (dans ce cas-ci, absolute).

Attention : le bloc div#container est le parent de #content!

Pour vos test, il faut utiliser le fichier squelette suivant :

div id="fixe"

      test 1

      test 2

      test 3

        id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe 
        id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe 
        id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe 
        id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe 
        id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe 
        id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe 
        id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe id=fixe
  
  
    
      

Émulation de « frame » avec les CSS

        id=content id=content id=content id=content id=content 
        id=content id=content id=content id=content id=content id=content 
        id=content id=content id=content id=content id=content id=content 
        id=content id=content id=content id=content id=content id=content 
        id=content id=content id=content id=content id=content id=content 
        id=content id=content id=content id=content id=content
    
  

Puis lui ajouter cette feuille :

body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #FFF0F5;
        font: 11px/1.5em verdana, sans-serif;
}

#fixe {
        border: 3px solid #000000;
        background: #eee;
        position:absolute; 
        position: fixed;
        top: 60px;
        left: 30px;
        width: 180px;
        padding: 12px;
}

#container {
        z-index: 10;
        height: 100%;
        width: 100%;
}

#content {
        margin: 40px 40px 40px 250px;
        border: 3px solid #000000;
        background: #eee;
        padding: 20px;
}

Pour réussir à forcer IE à interpréter correctement la règle précédente, afin qu’il utilise postion: absolute tel que défini dans la feuille de style, plutôt que la valeur par défaut qui est static, essayez la feuille de style suivante qui corrige partiellement le problème précédent sous MSIE.

position: fixed ne fonctionnera pas plus, mais au moins il interprétera correctement le position: absolute défini précédemment.

#fixe {
        border: 3px solid #000000;
        background: #eee;
        position:absolute; 
        top: 60px;
        left: 30px;
        width: 180px;
        padding: 12px;
}
body>div#fixe {
        position: fixed;
}
body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: #FFF0F5;
        font: 11px/1.5em verdana, sans-serif;
}
#container {
        z-index: 10;
        height: 100%;
        width: 100%;
        overflow: hidden;
}
#content {
        margin: 40px 40px 40px 250px;
        border: 3px solid #000000;
        background: #eee;
        padding: 20px;
}

Cette feuille de style ne fonctionne qu’avec Opéra et Mozilla, et partiellement avec IE, parce qu’on force ce dernier à reconnaître la règle qui veut que si un parseur ne reconnaît pas position: fixed, il faut qu’il revienne à la règle position: absolute. Néanmoins, cela ne permet pas d’émuler correctement les cadres tel que promis dans l’exercice.

Que faire avec IE?

Pour réussir à émuler les cadres avec IE, il faut procéder autrement et porter le mécanisme de défilement vers l’élément ancêtre, soit html et body, en spécifiant leur attribut overflow-y à hidden, alors que pour le bloc #container, ce même attribut prend la valeur auto. On conserve fixed comme valeur à l’attribut position pour les navigateurs conformes aux standards.

Toujours à partir du même code HTML, essayez cette feuille de style :

#fixe {
        border: 3px solid #000000;
        background: #eee;
        position:absolute; 
        top: 60px;
        left: 30px;
        width: 180px;
        padding: 12px;
}
body>div#fixe {
        position: fixed;
}

html,body {
        margin: 0;
        padding: 0;
        overflow-y: hidden;
        height: 100%;
        background: #FFF0F5;
        font: 11px/1.5em verdana, sans-serif;
}

#container {
        z-index: 10;
        height: 100%;
        width: 100%;
        overflow-y: auto;
}

#content {
        margin: 40px 40px 40px 250px;
        border: 3px solid #000000;
        background: #eee;
        padding: 20px;
}

Voilà, plus aucun cadre et une raison de plus d’utiliser les CSS.

Pour l’instant, cet exemple fonctionne avec les fureteurs suivants : Opéra 7.11, MSIE 6.0, Mozilla 1.3.1 et Firebird 0.6.