[FAQ] Cacher du javascript dans du CSS (IE-Only)

Version imprimable

Voici un fichier CSS qui sera exécuté comme du javascript par IE, mais pas par FF, de quoi combler les problèmes CSS de IE :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 html { color : expression ((function() { // A ne lancer que la première fois : if (!window.isCssScriptLoaded) { window.isCssScriptLoaded=true; // Do something here } // Retourner la valeur de la propriété CSS ici : return ''; // Celle-ci est mis à jour régulièrement ! })()); }
Pour des codes plus courts :
Code:

1 2 3 html { color : expression(aJSFunction()); }
Ou encore :
Code:

1 2 3 html { color : expression('aValue'); }
Une utilisation courrante, en combinaison avec document.body.scrollTop/scrollLeft, est le positionnage fixed (pour IE6, IE7 le gérant nativement (en mode Standard-Compilance)

Apprendre la balise BLINK à IE via un CSS (IEBlink.css)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
        BLINK {
           visibility: expression((function(){
              if (!window.IEBlink) {
                window.IEBlink = "visible";
                setInterval(function() {
                  window.IEBlink = (window.IEBlink=="visible"?"hidden":"visible");
                  var blinks = document.getElementsByTagName("blink");
                  for (var i=0; i<blinks.length; i++) { blinks[i].style.visibility=window.IEBlink; }
                }, 700)
              }
              return "";
           })());
        }

14/05/2007, 19h06
Auteur

Fremy : le code CSS

Code:

position: fixed;

n'est reconnu qu'à partir d'IE 7 c'est bien ça ?

Comment ferais-tu pour les versions antérieures d'IE 7 ?

Citation:

Envoyé par Auteur

Fremy : le code CSS

Code:

position: fixed;

n'est reconnu qu'à partir d'IE 7 c'est bien ça ?

Comment ferais-tu pour les versions antérieures d'IE 7 ?

IE7, en mode Standard Compilance : fixed supporté.
IE 7 en mode Back Compat : fixed non-supporté.
IE 6-- : fixed non-supporté

Solution (compatible IE 5++; FF 1.0++; Opera 7.0++)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
    <head>
        <script>
        function IEFixedElementPos() { 
          // IE 7 en mode standard
          if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") {
             return ("fixed");
          }
          return ("absolute");
        }
 
        function IEFixedElementTop(defaultTop) { 
          // IE 7 en mode standard
          if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") {
             return (defaultTop.toString() + "px;")
          }
          return ((document.body.scrollTop+defaultTop) + "px");
        }
 
        function IEFixedElementLeft(defaultLeft) { 
          // IE 7 en mode standard
          if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") {
             return (defaultLeft.toString() + "px;")
          }
          return ((document.body.scrollLeft+defaultLeft) + "px");
        }
 
        function IE100Width() {
            return (document.body.offsetWidth-21) + "px";
        }
 
        </script>
        <style><!--
        /* FF */
        .fixed {
          position:fixed;
          top:0px;
          left:0px;
        }
 
        /* IE */
        .fixed {
         position: expression(IEFixedElementPos());
         top: expression(IEFixedElementTop(0));
         left: expression(IEFixedElementLeft(0));  
        }
 
        /* FF */
        .max { width: 100%; }
 
        /* IE */
        .max { width: expression(IE100Width()); }
 
    --></style></head>
    <body>
        <div class="fixed max" style="background: green;">Always at top !</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </body>
</html>

(Je n'ai volontairement pas mis de DoctType pour qu'IE considère la page comme une page mal-formée ==> Quirks Mode ==> Fixed non-géré

14/05/2007, 19h25
FremyCompany

M^me opération mais pour un objet particulier :
HTML :

Code:

<div id="ID" style="cssProperty: expression('value')"></div>

JavaScript :

Code:

document.getElementById("ID").style.setExpression("cssProperty", "'value'");
15/05/2007, 09h11
Bisûnûrs

Plus simple pour le position:fixed :

http://xhtml.developpez.com/faq/?pag...ans_javascript

je crois qu'il y a une erreur dans le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.fixe { 
  /* un bloc fixe situé en haut qui fait toute la largeur */ 
  position : fixed; 
  top: 0px; 
  left: 0px; 
  right: 0px; 
  width: 100%; 
  /* et le patch pour IE */ 
  position : expression("absolute"); 
  width : expression("100%"); 
  top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight); 
  left : expression("0px"); 
}

si vous avez une correction à proposer ;)

15/05/2007, 18h26
FremyCompany

Citation:

Envoyé par Bisûnûrs

Plus simple pour le position:fixed :

http://xhtml.developpez.com/faq/?pag...ans_javascript

Le code de la FAQ utilise... expression() ==> exactement ce dont je parle ;)

Deplus, ca ne tiens pas compte du fait qu'IE 7 peut gérer FIXED en mode Standard Compilance...

Citation:
Envoyé par Auteur
je crois qu'il y a une erreur dans le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .fixe { /* un bloc fixe situé en haut qui fait toute la largeur */ position : fixed; top: 0px; left: 0px; right: 0px; width: 100%; /* et le patch pour IE */ position : expression("absolute"); width : expression("100%"); top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight); left : expression("0px"); }
si vous avez une correction à proposer ;)
je viens de tester le code avec et sans le
Code:

1 2 this.offsetHeight - this.offsetHeight
et ô surprise il faut bien cette syntaxe :
Code:

1 2 top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight);
et je ne comprends absolument pas pourquoi....:bug:

17/05/2007, 16h18
FremyCompany

document.body.scrollTop + "px" ?

Citation:

Envoyé par FremyCompany

document.body.scrollTop + "px" ?

oui certes, il manque l'unité. Mais ce que je voulais dire c'est que je considerais comme une erreur (en rouge dans le code CSS) n'en est (visiblement) pas une...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.fixe { 
  /* un bloc fixe situé en haut qui fait toute la largeur */ 
  position : fixed; 
  top: 0px; 
  left: 0px; 
  right: 0px; 
  width: 100%; 
  /* et le patch pour IE */ 
  position : expression("absolute"); 
  width : expression("100%"); 
  top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight+"px"); 
  left : expression("0px"); 
}

Si j'enlève cette équation (qui logiquement vaut 0) l'élément n'est plus fixed :bug:

Un exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Titre</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.fond{
 /** Firefox **/
 position: fixed;
 top: 0px;
 left: 0px;
 
 height: 100%;
 width: 100%;
 z-index: 1000;
 display: none;
 border: none;
 
 /** IE **/
 position: expression("absolute");
 top: expression(document.body.scrollTop - this.offsetHeight + this.offsetHeight + "px");
 background-color: #AAAAAA;
}
 
 
//-->
</style>
 
<script type="text/javascript">
<!--
function ouvreBoite()
{
  document.getElementById("idFond").style.display = "block";
}
 
function fermeBoite()
{
  document.getElementById("idFond").style.display = "none";
}
 
//-->
</script>
 
 
</head>
 
<body>
 
<div id="idFond" class="fond">
<input type="button" value="Fermer" onclick="fermeBoite()" />
</div>
 
 
<div>
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type="button" value="Ouvrir boite de dialogue" onclick="ouvreBoite()" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
 
</body>
 
</html>

Si tu laisses -this.offsetHeight + this.offsetHeight et que tu fasses un scroll sur la fenêtre pas de problème, la boite idFond est fixe...
Par contre, si tu enlèves -this.offsetHeight + this.offsetHeight et que tu fasses un scroll la boite n'est plus fixe :marteau:

17/05/2007, 17h53
FremyCompany

Pour le moins étrange en effet...