03 марта 2009, 15:21

width:expression и эмуляция position:fixed;

Редко использую expression, только в случае указания максимальной/минимальной ширины при разметке страницы для IE6.

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

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

Поводом для написания заметки послужило и то обстоятельство, что в макете (имея в виду, что там, нет ограничения по min/max-width), предложенном на всеобщее обозрение в Эмуляция position:fixed;…, в приведенном там примере, при использовании вот такого:

  *html #XXX {
  width:expression(
  (document.compatMode && document.compatMode == 'CSS1Compat') ?
  (document.documentElement.clientWidth < 930 ? "930px" :
  (document.documentElement.clientWidth > 100 ? "100%" : "auto")) :
  (document.body.clientWidth < 930 ? "930px" :
  (document.body.clientWidth > 100 ? "100%" : "auto")));
}

После первоначального открытия страницы с дальнейшим уменьшением размеров окна браузера фиксированная колонка срывалась со своего места:

Но стоит только взять мышкой за любую границу окна с целью продолжить уменьшение или расширить окно, то все приходит в норму:

Следующая попытка уменьшения размеров окна, с раскрытой на полную катушку страницей, повторяет описанное выше.

На мой взгляд, физика процесса ломается из-за того, что браузеру просто не хватает времени правильно обработать событие, отсюда и сбой.

Были, опробованы и другие варианты, но они или не работали вообще или имели тот же негативный эффект.

В данном конкретном случае был применен JavaScript:

<script type="text/javascript">
window.attachEvent('onload', width);
window.attachEvent('onresize', width);
function width(){
document.getElementById('XXX').style.width = (
(document.documentElement.clientWidth || 
document.body.clientWidth) < 930) ? '930px' : (
(document.body.clientWidth > 100) ? '100%' : '100%');
};
</script>

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

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

Порывшись в своих архивах, нашел подходящий вариант, где проблемы, изложенные выше, отсутствуют:

*html .XXX {
 width:expression(documentElement.clientWidth < 930 ? 
 (documentElement.clientWidth == 0 ? 
 (body.clientWidth < 930 ? "930" : "auto") : "930px") : "auto" );
}

Не привожу примера, информации на страницах блога посвященной эмуляции position:fixed;, достаточно и поискать решение вы можете самостоятельно.

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

Пара примеров:

А вот, как может все быть по моей методе, опробовано на скриптах Мастера Lasto:

Обратите внимание на положение горизонтальной прокрутки на некоторых скриншотах.

С использованием приема эмуляции position:fixed; предложенного мной, фиксированная колонка, отделяющая область контента и колонку навигации, всегда находится на строго отведенном ей месте, а сама область контента имеет ”резиновые” свойства с ограничением по min/max-width.