Опубликовано автор в категориях Верстальщику.

Применение expression в CSSВ своем посте «Выравнивание высоты контейнеров при верстке DIVами» я писал о том, какими способами можно выровнять высоту <div> относительно друг друга и получить равные по высоте колонки в независимости от контента. Эта статья была опубликована на Хабре, и в комментариях один не очень дружелюбный человек пытался сказать, что применения в данной ситуации js, высчитывающего высоту колонок не применимо, и что, для Internet Explorer лучше воспользоваться для этого ‘expression’. Не буду говорить, что не осликом единым живет этот мир. Так как проблема высоты колонок при верстке слоями актуальна для всех браузеров, но, в этой статье хочу более детально рассмотреть варианты обоснованности и способов применения expression в CSS.

Что такое expression?

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

О полезности expression.

Как мы уже выяснили, основная идея expression заключалась в том, чтобы дат возможность в CSS «вписывать» динамические данные. И самым типичным вариантом применения expression является правило создания минимальной и максимальной ширины страницы в IE6 -5

#container{

width: expression(document.body.clientWidth > 1100)? "1100px" : "auto";

/* For web browsers supporting it */

max-width: 1100px;

}

Данный код оценивает доступную ширину элемента <body>, и если ширина достаточная, то приспосабливает элемент, названный container, к максимальной ширине в 1100 пикселей. Если необходимая область не доступна, то ширина container будет сокращаться в пределах контента.

Казалось бы, что это весьма полезное решение, но не спишите все хаки заменять expressions.

Любое js выражение выполняется только тогда, когда в браузере включена поддержка скриптов. И если вы напичкаете свой css код решениями с expression, то ваша разметка просто разваливаться без js. И вообще, может тогда весь код стилей написать js? Конечно — нет?

Используйте «настоящий» Java script вместо expression там, где это возможно.

Создавая разметку с использованием чистого CSS (максимум допустимые хаки), вы точно знаете, как будет выглядеть ваша страница в «чистом» виде. Это позволит вам предложить пользователю понятную и приемлемую структуру как в случае с включенным исполнением js в браузере, так и без него.

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

Причем, если вам нужно применить какой либо js-файл только к IE (вплоть до желаемой версии), то в таком случае, вполне оправдано использование условный комментариев.

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

Вот код самого скрипта:

window.onload = checkAvailableWidth;

window.onresize = checkAvailableWidth;

function checkAvailableWidth(){

var container = document.getElementById("container");

container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";

}

А вот так мы его вызовем, если наш браузер не IE7

<!--[if lt IE 7]>

<script type="text/javascript" src="/js/maxWidthFixForIE6.js"></script>

<![endif]-->

Вы считаете, что таким образом мы получаем слишком много кода? Но тогда выбирайте, что более важно для вас — исковерканный css, или правильный валидный и понятный код для любого, кто впоследствии столкнется с вашими решениями?

Резюме

В заключении хотелось бы сказать, что идеальная разметка вообще не должна содержать в себе решений с использованием сторонних скриптов. Но, если ваш дизайн не дает возможности вам обойтись без решений на основе скриптов, то вы должны стараться применить наиболее универсальное решение, которое бы имело одинаковы последствия, как в активном, так и пассивном (отключенном, не выполненном) состоянии во всех браузерах. И вряд ли использование архаичных выражений типа expression поможет вам в этом.

Полезные ссылки по этой теме

http://www.robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/

http://higher.com.ua/article/99/izbavlyaemsya-ot-ustarevshikh-tegov-i-atributov-s-pomoshchyu-css

http://lusever.livejournal.com/15868.htmlНе знаешь как построить дачу: строительство бани.

5 комментариев к записи “Поговорим о expression в CSS”

  1. Гость

    А вот так мы его вызовем, если наш браузер не IE7

    вот< это, чтобы видно было код !--[if lt IE 7]>--и вот > это

    это вызовется если ИЕ7 :)

    Ответить

Оставить комментарий

  • (не будет показан)