web-dev-qa-db-fra.com

Expressions CSS

J'ai lu quelque part que les expressions CSS étaient obsolètes et ne devraient même pas être utilisées. Je n'en avais jamais entendu parler et j'ai décidé d'y jeter un œil. J'ai trouvé un exemple de code qui a gardé un élément flottant au même endroit sur l'écran, même si vous avez fait défiler.

<html>
<style>
#fixed {
position:absolute;
left:10px;
top:expression(body.scrollTop + 50 + "px");
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>

Cela m'a rappelé les sites qui avaient les "barres de partage" et des trucs au bas de leurs pages.

Alors...

  1. Est-ce ainsi qu'ils procèdent?
  2. Est-il correct d'utiliser des expressions dans cette situation?
  3. Sinon, que dois-je utiliser?
  4. Y a-t-il d'autres choses intéressantes/utiles que les expressions peuvent aider?
htmlcsscss-expressions
48
Freesnöw

Les expressions CSS fonctionnaient dans les IE plus anciens, mais elles ont été complètement abandonnées dans IE8:

Les propriétés dynamiques (également appelées "expressions CSS") ne sont plus prises en charge dans Internet Explorer 8 et versions ultérieures, en mode Normes IE8 et versions ultérieures. Cette décision a été prise pour des raisons de conformité aux normes, de performances du navigateur et de sécurité, comme détaillé dans l'entrée de blog IE intitulée Ending Expressions. Les propriétés dynamiques sont toujours disponibles dans Internet Explorer 8 en mode IE7 ou IE5 mode.

Donc, cela ne vaut sans doute plus vraiment la peine de les apprendre.

Sinon, que dois-je utiliser?

Selon le cas d'utilisation, JavaScript ou requêtes multimédias .

Comme le note @Yet Another Geek, votre exemple ci-dessus peut être implémenté à l'aide de position: fixed. IE6 ne prend pas en charge cela - l'expression CSS a probablement été créée pour contourner cela.

60
Pekka 웃

Pour conserver un élément au même endroit pendant le défilement, vous devez utiliser la propriété position: fixed , puis utiliser les propriétés haut, bas, gauche et droite pour indiquer où il doit être positionné.

EDIT: Voici comment cela devrait être pour votre exemple:

<html>
<style>
#fixed {
position:fixed;
left:10px;
top: 50px;
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>
15
Yet Another Geek
  1. Probablement pas. C'est plus facile à utiliser position:fixed ou Javascript
  2. Sauf si vous ne prenez en charge que IE <8. IE8 + et les autres navigateurs ne le prennent pas en charge *; ce n'est pas conforme aux normes et ne passera pas la validation
  3. Utilisation position:fixed; bottom:x; top:y; left: a; right:b; où x, y, a et b sont des décalages. Ou utilisez Javascript
  4. Encore une fois, à moins que vous n'utilisiez les anciennes versions de IE uniquement. Vraiment, jetez-le simplement. Les mêmes effets peuvent être obtenus avec JS et CSS normal.

* Officiellement, en tout cas. Apparemment, cela a fonctionné sur Chrome pour @DalexL

11
Thomas Shields