« CSS Sandbox — наглядное пособие для начинающих
Web Standards Group в СПб. »

Мin-width и max-width для IE версий 5-6 при помощи expression

27 Oct. 2007

Браузер IE пятой и шестой версий не поддерживает CSS-свойства “min-width” и “max-width”. Для замены, Neutrino посоветовал использовать expression. (Удачная оказалась мысль: латать дыры IE средствами самого IE.)

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

<!--[if IE]>
<style type="text/css">
* html #root
{
    width:expression((document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 770 ? "770px" : (document.documentElement.clientWidth > 996 ? "996px" : "auto")) : (document.body.clientWidth < 770 ? "770px" : (document.body.clientWidth > 996 ? "996px" : "auto")));

}
</style>
<![endif]-->

Страница с примером.

Q-Zma также подробно описал принцип действия у себя в блоге.

Дата написания: Saturday, 27.10.2007. Время: 03:10. Рубрика: CSS-Шаблоны, CSS-верстка, Браузеры.

16 Responses to “Мin-width и max-width для IE версий 5-6 при помощи expression”

  1. Zigzag Says:
    27 Oct. 2007 at 13:10

    а экспрешены уже не подвешивают осла?

  2. uggallery Says:
    27 Oct. 2007 at 16:10

    Специалисты говорят что дело не в экспрешенах. Цитирую:

    Подвисает IE из-за некорректных значений в expression, чаще всего это связано с режимом отображения.

    Кузьма – автор скрипта – говорит что использует его давно на разных проектах. У меня его экспрешн IE не подвешивал. Я пытался разобраться, там действительно все зависит от одного фактора:

    всю конструкцию можно разделить на две части, для режима совместимости со стандартами и для quirksmode, в первой используется document.documentElement, а во второй document.body (именно эти объекты в разных режимах представляют собой основую канву документа).

    Вот при сочетании document.body с правильным doctype-ом, IE подвисает. Если изменить один из параметров, виснуть перестает.

  3. Dimox Says:
    27 Oct. 2007 at 20:10

    Много, однако, уже способов набралось. Как-то бы выбрать самый-самый…

  4. Q-Zma Says:
    28 Oct. 2007 at 07:10

    каравай-каравай, какой хочешь выбирай :-)

  5. uggallery Says:
    28 Oct. 2007 at 12:10

    Dimox: А какие варианты? 1. Метод с немножко JS (чем по сути и является expression); 2. Метод с большим отрицательным margin; 3. Метод с border. Других не знаю.

    Я выбираю первый. Остальные странноватые, и, те что я видел, используют непрозрачные div-ы и border-ы. Что сильно ограничивает возможности оформления.

    Методы с JS/expression различаются, пожалуй, только в деталях. Тут чтобы выбрать нужно хорошо знать технологию. Ну, и тестировать их надо конечно.

  6. Dimox Says:
    28 Oct. 2007 at 16:10

    Под “много” я все эти варианты и подразумевал (в том числе способы, использующие JS, я считал за отдельные).

    Я тоже всегда использовал первый варинт, только несколько другой код был. Теперь, раз мы имеем проверенный способ из вышеприведенного примера, буду, пожалуй, использовать его.

  7. Максим Покровский Says:
    28 Oct. 2007 at 16:10

    Использую expression, правда без проверки compatMode. Из принципа IE 5 не поддерживаю. Нефиг, уже семерка есть, а мы все еще о рудиментах каменноого века думаем.

    Остальные способы… так на заметку храню в памяти.

  8. Q-Zma Says:
    28 Oct. 2007 at 20:10

    Рудименты, не рудименты, не нам решать. Юзают люди ещё иногда IE5, хоть и немного… пусть результаты труда там и не отображаются так, как задумывалось, но проверять, чтобы оно было хотя бы читабельно в IE5 думаю всё таки стоит, а когда твоя страница вешает наглухо браузер это не есть гуд — однозначно. У меня по роду профессиональной деятельности стоят IE5, 5.5 , 6, 7; Firefox 1, 1.5, 2, Flock последней версии, Opera 7.5, 8.5, 9.2, Safari 3 beta, последний SeaMonkey ну и линуксовые браузеры (Konquier, Firefox).

  9. Dimox Says:
    28 Oct. 2007 at 21:10

    Q-Zma, жестокий у вас, однако, разброс по тестируемым браузерам :). Я использую только IE 6, 7, FF 2 и Opera 9.2, изредка Safari 3/Win.

  10. uggallery Says:
    29 Oct. 2007 at 13:10

    Я поддерживаю IE5 если это не трудно. А после подстройки под IE6 это, как правило, не трудно.

  11. Yuriy Says:
    08 Nov. 2007 at 20:11

    я бы условный комментарий чуть бы подкорректировал и поставил условие if lte IE 6

  12. Q-Zma Says:
    08 Nov. 2007 at 20:11

    и пришлось бы тогда для 7 версии IE cоздавать отдельный стайлшит, а так все хаки для всех версий IE в одном стайлшите, всё очень просто, если надо сделать правило только для IE>6 пишем в начале правила “html>body”, если только для IE<=6 юзаем star hack: “* html”, если для IE<=5.5 юзаем box model hack, всё просто и всё в одном месте.

  13. MT Says:
    25 Nov. 2007 at 03:11

    2 Q-Zma: всё гораздо проще: IE7 поддерживает min-width и max-width напрямую, и необходимость в их эмуляции отпадает и, по большому счёту, вредна.

    Я лично обычно придерживаюсь тактики обратной совместимости с частичной деградацией в старых версиях IE, эмулируя в IE5-6 только min-width, что, в отличие от max-width, реализуемо без JS.

  14. Q-Zma Says:
    25 Nov. 2007 at 04:11

    2 MT: обратите внимание на «* html #root» в селекторе, это вам ни о чём не говорит? для IE7 юзаются как раз нативные его возможности, вообще странно подобное слышать от человека занимающегося (вроде бы) вебдевом, вы не знакомы со star hack? вы вообще в теме, куку? :)

  15. MT Says:
    26 Nov. 2007 at 16:11

    Q-Zma: возможно, не вполне вас понял. Мне, например, странно видеть от человека, который «в теме», рекомендации использовать хаки для не старых версий браузеров (т. е. версий, новее которых ещё нет).

  16. Q-Zma Says:
    26 Nov. 2007 at 17:11

    извините, я не понимаю, что вы говорите :)