Min-width и max-width для Internet Explorer <= 6
Некоторые персонажи в комментариях к записи на схожую тему в одном блоге сетовали на то, что не могут найти в гуглояндексе «универсальное решение для реализации динамической ширины блока с минимальным и максимальным значением». Что ж, попробуем его туда добавить :). Сие есть не что иное как: min-width и max-width для Internet Explorer версий <= 6 (поскольку тварь последней модификации уже понимает эти свойства).
С тем, что dynamic properties (фирменная фича MS, используется для динамических расчётов значений CSS свойств элемента) зло, не могу согласиться. С их помощью можно научить ослика ходить более прямо, путём пририсовывания ему костыликов, причём замаскированных таким образом, что их наличие никак не сказывается на качестве рендерения страницы в других браузерах, а так же на драгоценной, так всеми желаемой, валидности. Именно эту фичу MS мы и будем использовать вкупе с ещё одной фирменной фичей, что звучно сonditional сomments зовётся.
Итааааак, работающий пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
html
{
margin:0;
padding:0;
}
body
{
background:olive;
margin:0px;
padding:10px;
text-align:center;
}
#root
{
text-align:left;
background:yellow;
margin:0 auto;
padding:1px 0;
min-width:770px;
max-width:990px;
}
</style>
<!--[if IE]>
<style type="text/css">
* html #root
{
width:expression(
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 770
?
"770px"
:
(
document.documentElement.clientWidth > 990
?
"990px"
:
"auto"
)
)
:
(
document.body.clientWidth < 770
?
"770px"
:
(
document.body.clientWidth > 990
?
"990px"
:
"auto"
)
)
);
}
</style>
<![endif]-->
</head>
<body>
<div id="root">
<p>
Vivamus nonummy. Fusce risus. Duis luctus. Mauris tempor.
Nullam consequat dolor at urna. Donec porttitor lectus ac lacus.
Pellentesque turpis tortor, bibendum non, dictum id, mollis non,
nulla. Aenean vehicula dapibus erat. Proin felis lorem, faucibus
vitae, accumsan sit amet, posuere ut, leo. Nulla enim felis, mattis
id, laoreet sed, tempus non, neque. Vivamus eu nisl. Ut posuere
porttitor ante. Cras scelerisque ipsum eget metus. Proin ultricies
nonummy ipsum. Maecenas dignissim sem at sem. Pellentesque faucibus,
augue dignissim interdum vulputate, elit massa suscipit orci, vel
feugiat massa dolor vitae sapien. Aenean porttitor nunc ac
tellus.
</p>
</div>
</body>
</html>
А теперь я попытаюсь объяснить как эта магия работает :). У всех современных браузеров есть несколько режимов отображения страницы, так называемые «standarts compliant mode» (режим совместимости со стандартами) и «quirks mode» (режим обратной совместимости), и наш непарнокопытный друг не является исключением, начиная с версии 6. Подробнее и по-русски о режимах отображения я расскажу в следующих статьях, кому неймётся, тот может изучить довольно подробный материал, собранный, судя по всему, финскими коллегами по цеху, на английском языке. Вкратце: IE версий 5-5.5 всё время работает в режиме обратной совместимости, IE 6-7 только при условии отсутствия DTD, некорректного DTD, наличия XML декларации или простого комментария перед DTD. В разных режимах отображения роль основного элемента, который представляет собой канву для отрисовки всего контента, играют разные элементы. В случае режима обратной совместимости этим элементом является body, а в режиме совместимости со стандартами — элемент html. Для определения в каком именно режиме отображается текущая страница наши друзья индусы придумали интересное свойство document.compatMode, данное свойство появилось в IE6, и оно может принимать следующие значения: "CSS1Compat" и "BackCompat"; из этого следует, что мы можем легко разбить наш expression на две ветки: первая — для IE6-7 в режиме соместимости со стандартами, вторая — для IE всех версий в режиме обратной совместимости. В первой ветке мы используем свойство document.documentElement, которое, начиная с версии IE6 в режиме совместимости со стандартами содержит ссылку на корневой элемент документа, а во втором случае — давно известный нам объект document.body. Подобный тюнинг этого выражения позволяет избежать зависания IE разных версий в разных режимах отображения страницы.
В последующийх статьях я попробую рассказать о режимах отображения страницы в разных браузерах и conditional comments. Спасибо, что дочитали до конца ;).
Комментарии (11)
курсы 3ds max, обучение 3d max ; Где найти новых клиентов - способы увеличения продаж. Плохо идут продажи?
Зэр гут! Положу в свою копилку экспрэшнов.
интересно, а как ты нашёл эту запись?
Сам ты персонаж :) Но за решение еще раз спасибо! А подробное разъяснение так это вообще супер! Хорошая работа.
Хотел спросить. Собираюсь опубликовать этот метод в одном справочном wiki-проекте, для использования широкими массами. Не могу обещать, что там можно будет разместить ссылку на тебя прямо на странице с кодом. Скорее где-то на отдельной странице с благодарностями. Даешь добро?
[...] Q-Zma также подробно описал принцип действия у себя в блоге. [...]
ну я, когда писал «персонаж», не имел ввиду ничего плохо, уж не сердитесь, слог у меня такой… по-поводу «Даешь добро?» — ничего не имею против, за ссылками, кстати, не гоняюсь ;-)
ОК! Супер! Ссылки действительно не самоцель. Но вот указание авторства — вещь не последняя.
подписан на rss :)
здесь отсчёт идёт от ширины body, как я понимаю, document.body.clientWidth. Но ведь min-width и max-width должны считаться от родителя. Эти свойства используются не только для того чтоб задасть ширину сайта :). Можно ли в этих экспрешенных обращаться к элементу, к которому они прописаны… чтонить типа «this»?
пример довольно специфичен, можно, конечно:
parentNodeа для parentNode есть вариации связанные с compatMode, а то ИЕ виснет :(
спасибо.
пример в студийю