html - div - Expresiones de CSS
title html css (3)
Leí en alguna parte que las Expresiones CSS estaban en desuso y ni siquiera deberían usarse. Nunca había oído hablar de ellos y decidí echar un vistazo. Encontré un ejemplo de código que mantuvo un elemento flotante en el mismo lugar en la pantalla, incluso si se desplazó.
<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>
Esto me recordó los sitios que tenían las "barras de compartir" y cosas al pie de sus páginas.
Asi que...
- ¿Es así como lo están haciendo?
- ¿Está bien usar expresiones en esta situación?
- Si no, ¿qué debería usar?
- ¿Hay otras cosas interesantes / útiles con las que las expresiones puedan ayudar?
- Probablemente no. Es una
position:fixedmás fácil de usarposition:fixedo Javascript - No, a menos que solo sea compatible con IE <8. IE8 + y otros navegadores no lo admiten *; no cumple con los estándares y no aprobará la validación
-
position:fixed; bottom:x; top:y; left: a; right:b;usoposition:fixed; bottom:x; top:y; left: a; right:b;position:fixed; bottom:x; top:y; left: a; right:b;donde x, y, a y b son desplazamientos. O bien, use Javascript - Nuevamente, no a menos que esté usando versiones anteriores de IE solamente. De verdad, solo bótalo. los mismos efectos se pueden lograr con JS y CSS normal.
* Oficialmente, de todos modos. Aparentemente funcionó en Chrome para @DalexL
Las expresiones CSS solían funcionar en IE más antiguos, pero se han abandonado por completo en IE8:
Las propiedades dinámicas (también llamadas "expresiones CSS") ya no son compatibles con Internet Explorer 8 y versiones posteriores, en el modo estándar IE8 o superior. Esta decisión se tomó para cumplir con los estándares, el rendimiento del navegador y las razones de seguridad, tal como se detalla en la entrada del blog de IE titulada Ending Expressions. Las propiedades dinámicas todavía están disponibles en Internet Explorer 8 en modo IE7 o modo IE5.
Por lo tanto, posiblemente no valga la pena aprenderlos nunca más.
Si no, ¿qué debería usar?
Dependiendo del caso de uso, JavaScript o consultas de medios .
Como señala @Yet Another Geek, su ejemplo anterior puede implementarse usando position: fixed . IE6 no es compatible con eso: la expresión CSS probablemente fue creada para evitar eso.
Para mantener un elemento en el mismo lugar mientras se desplaza debe usar la position:fixed propiedad position:fixed y luego usar las propiedades superior, inferior, izquierda y derecha para indicar dónde debe colocarse.
EDITAR: Aquí, cómo debería ser tu ejemplo:
<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>