Выражения CSS

Я где-то читал, что CSS-выражения были устаревшими и даже не должны использоваться. Я никогда не слышал о них и решил посмотреть. Я нашел пример кода, который содержал плавающий элемент в том же месте на экране, даже если вы прокручивали.

<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>

Это напомнило мне сайты, на которых были "общие бары" и прочее в нижней части их страниц.

Итак...

  • Это так, как они это делают?
  • Можно ли использовать выражения в этой ситуации?
  • Если нет, что я должен использовать?
  • Есть ли другие интересные/полезные вещи, с которыми могут помочь выражения?

Ответы

Ответ 1

CSS-выражения, используемые для работы в более старых IE, но они были полностью оставлены в IE8:

Динамические свойства (также называемые выражениями CSS) больше не поддерживаются в Internet Explorer 8 и более поздних версиях, в стандарте IE8 и выше. Это решение было принято для соблюдения стандартов, производительности браузера и соображений безопасности, как описано в блоге IE в блоге Ending Expressions. Динамические свойства по-прежнему доступны в Internet Explorer 8 в режиме IE7 или в режиме IE5.

Так что, возможно, не стоит больше их изучать.

Если нет, что я должен использовать?

В зависимости от варианта использования JavaScript или медиа-запросы.

Как отмечает @Yet Another Geek, приведенный выше пример можно реализовать с помощью position: fixed. IE6 не поддерживает это - вероятно, было создано выражение CSS, чтобы обойти это.

Ответ 2

Чтобы сохранить элемент в том же месте во время прокрутки, вы должны использовать свойство position: fixed, а затем использовать верхний, нижний, левый и правый свойства, чтобы определить, где он должен быть расположен.

EDIT: вот как это должно быть для вашего примера:

<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>

Ответ 3

  • Наверное, нет. Легче использовать position:fixed или Javascript
  • Нет, если вы только поддерживаете IE < 8. IE8 + и другие браузеры не поддерживают его *; это не соответствует стандартам и не будет проходить проверку.
  • Используйте position:fixed; bottom:x; top:y; left: a; right:b;, где x, y, a и b являются смещениями. Или используйте Javascript
  • Опять же, если вы не используете только старые версии IE. Действительно, просто свалите его. те же эффекты могут быть достигнуты с помощью JS и обычного CSS.

* Официально, в любом случае. По-видимому, он работал на Chrome для @DalexL