Войти
RSS-подписка
Читать в ЖЖ
Яndex-Лента
В Google Reader
Используя выражения в CSS-файле для Internet Explorer 6, можно добиться поведения, которое все нормальные браузеры уже давно умеют, а именно min-width и max-width свойства для блока:
#someblock{
width:expression(((document.documentElement.clientWidth ||↵
document.body.clientWidth) < 990) ? '990px' : ↵
((document.body.clientWidth > 1280) ? ‘1280px’ : ‘100%’));
} Данная заметка является скорее чем-то вроде self-note, но вдруг будет полезна и вам.
P.S. Не забывайте выносить стили для IE в отдельные файлы с помощью Conditional Comments и будет вам счастье 
Upd.:
После общения с uggallery в коментариях, было решено оптимизировать скрипт так, чтобы не использовать expressions, из-за которых частенько подвисает браузер. Вот что из этого получилось:
Так как скрипт нужен нам только для IE6, выделяем его с помощью Conditional Comments. Скрипт срабатывает на двух событиях - onload и onresize, что не обязательно:
<!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent(‘onload’, mmwidth);
window.attachEvent(‘onresize’, mmwidth);
function mmwidth(){
document.getElementById(‘wrap’).style.width = ↵
((document.documentElement.clientWidth || ↵
document.body.clientWidth) < 990) ? ‘190px’ :↵
((document.body.clientWidth > 1280) ? ‘1000px’ : ‘1000px’);
};
</script>
<![endif]--> Все что нужно сделать - это подставить id нужного вам элемента, ну и конечно значения максимальной и минимальной ширины. document.body.clientWidth соответственно тоже меняйте по вкусу.
Скрипт на оригинальность не претендует, да по большому счету от expression и не отличается, просто вынесен из CSS. Знаете как сделать лучше? Нашли ошибку? Коментируйте.
За идею спасибо uggallery, за консультацию copyhold‘у.
(проголосовали: 8, рейтинг: 4 из 5)
Загрузка ...
Только доделал макет и там тоже были проблемы с растягиванием блока по высоте. сделал так
в файле стилей указал min-height в пикселях а в самом документе поставил через условие для ие6 height тоже в пикселях… пока работает…
Комментарий by Attlant — Октябрь 15, 2007 @ 12:47 pm | Цитировать
Тоже вариант, но в определенной ситуации inline-стили будут приоритетнее и за’override’ят те, которые в файле…
Комментарий by neutrino — Октябрь 15, 2007 @ 12:54 pm | Цитировать
Все было бы хорошо, если бы не expression. Сделать бы это в виде отдельного Javascript. Лучше всего два варианта: один с getelementbyid (или как оно там); другой - для элемента body. Тогда это будет супер-решение!
Комментарий by uggallery — Октябрь 15, 2007 @ 1:26 pm | Цитировать
В принципе так оно и должно быть, как ты говоришь, но я на пример вобще не сторонник использования js как средства верстки, поэтому для меня expression является неким компромисом с совестью
)
Комментарий by neutrino — Октябрь 15, 2007 @ 1:34 pm | Цитировать
JS тут - не средство верстки, а средство расширения функциональности IE. То есть используется, по прямому назначению, в соответствии с веб-стандартами. Экспрешн - тот же JS, только прикрученный через одно место - не в соответствии с веб-стандартами. Это ты называешь компромисом?
Не важно что лучше, важно чтобы был выбор! Потому что для меня, например, экспрешн неприемлем. Не по идеологическим причинам, а потому что он нередко роняет IE.
Комментарий by uggallery — Октябрь 15, 2007 @ 2:04 pm | Цитировать
Поразмыслил и согласился с твоими доводами. Надо озадачиться написанием полноценного скрипта.
Комментарий by neutrino — Октябрь 15, 2007 @ 2:08 pm | Цитировать
>озадачиться написанием полноценного скрипта.
Было бы классно! С меня - ссылка в блоге и всяческий пиар
Комментарий by uggallery — Октябрь 15, 2007 @ 2:25 pm | Цитировать
uggallery, готово, смотри апдейт
Скрипт конечно не полноценный, но требованиям соответствует.
Комментарий by neutrino — Октябрь 15, 2007 @ 4:35 pm | Цитировать
Ребята, спасибо за оба решения. Первый вариант уже использовал (только немного по-другому), в следующий раз попробую второй.
Комментарий by Dimox — Октябрь 15, 2007 @ 5:22 pm | Цитировать
Хм. Чего-то у меня не получается заставить это работать
Очень хочу посмотреть страницу с примером.
Комментарий by uggallery — Октябрь 15, 2007 @ 7:28 pm | Цитировать
Залил.
Комментарий by neutrino — Октябрь 15, 2007 @ 10:49 pm | Цитировать
Спасибо за решение. Положу в копилочку. Вот способ чисто на CSS:
Контент.
CSS:
.outer {
padding: 0px;
margin: 0px auto;
width: 100%;
height: 100%;
text-align: left;
min-width: 680px
}
HTML .minwidth {
padding-left: 680px
}
HTML .minwidth {
height: 1px
}
HTML .layout {
height: 1px
}
HTML .container {
margin-left: -680px;
position: relative;
height: 1px;
}
Кроссбраузерно. Применяю сейчас этот метод.
Комментарий by ifman — Октябрь 16, 2007 @ 10:32 am | Цитировать
Извините, html порезался. Вот такой:
<div id="outer">
<div class="minwidth">
<div class="layout">
<div class="container">
Контент
</div></div></div></div>
Комментарий by ifman — Октябрь 16, 2007 @ 10:33 am | Цитировать
ifman, а живой пример есть?
Комментарий by neutrino — Октябрь 16, 2007 @ 11:18 am | Цитировать
http://anime.insyss.ru/Сейчас выставил в 1000px для примера.
Только не думайте, что это я придумал:) Нашел.
Комментарий by ifman — Октябрь 16, 2007 @ 11:28 am | Цитировать
ifman,
такой способ тоже имеет право на существование )
Комментарий by neutrino — Октябрь 16, 2007 @ 11:38 am | Цитировать
neutrino: Посмотрел пример. Блок #wrap меняет размеры не плавно, а скачкообразно. Либо 700px либо 190px. Так и было задумано?
Заодно разобрался почему у меня вчера код не работал. Я копировал его со страницы, а там прямые программистские кавычки CMS-кой поменяны на одиночные типографские. Вокруг параметров onload, onresize…
Комментарий by uggallery — Октябрь 16, 2007 @ 3:23 pm | Цитировать
uggallery, я скрипт собственно и не писал. это просто вынос expression из CSS, соответственно функционал не изменился и плавности нет. Я был бы рад ее дописать, но JS не сильная моя сторона…
Ковычки меня самого уже запарили. Чего-то я намудрил с плагинами к WP. Надо будет на выходных пофиксить.
Комментарий by neutrino — Октябрь 16, 2007 @ 3:35 pm | Цитировать
Дык, экспрешн ведет себя точно так же. Скачет
Мне кажется, это нельзя использовать на практике.
А то я уже стал сомневаться: может это у одного меня оно так себя ведет. Проверял и проверял на разных машинах…
Комментарий by uggallery — Октябрь 16, 2007 @ 3:41 pm | Цитировать
Ну почему нельзя? Можно. Хотя бы для того, чтобы изменять ширину блока при загрузке страницы. Кроме того, мне кажется что ресайзят окна не так часто. Жаль нет подобной статистики.
Ну конечно так же, но теперь хоть браузер не будет рушить.
Комментарий by neutrino — Октябрь 16, 2007 @ 3:49 pm | Цитировать
Подвисает IE из-за некорректных значений в expression, чаще всего это связано с режимом отображения. Для режима QuirksMode, который работает в IE5.5, 5 а так же в IE6 (при условии неправильно указанного или вообще не указанного DTD, либо если перед DTD идёт XML декларация). Определить режим отображения можно следующим образом: document.compatMode && document.compatMode == ‘CSS1Compat’, всю конструкцию можно разделить на две части, для режима совместимости со стандартами и для quirksmode, в первой используется document.documentElement, а во второй document.body (именно эти объекты в разных режимах представляют собой основую канву документа).
Комментарий by Q-Zma — Октябрь 16, 2007 @ 3:51 pm | Цитировать
Q-Zma, вот мы как раз и говорим о том, чтобы expressions не использовать.
Комментарий by neutrino — Октябрь 16, 2007 @ 3:57 pm | Цитировать
Если их использовать правильно, с пониманием почему оно зависает, то они зависать не будут. Использую их регулярно и повсеместно, проблем не наблюдаю.
Комментарий by Q-Zma — Октябрь 16, 2007 @ 4:15 pm | Цитировать
По поводу точки зрения
не могу согласиться… Львиная доля рынка браузеров за IE, тут уже хочешь или не хочешь, но использовать технологии MS придётся по любому, тем более они всё сделали для того, чтобы кривые решения для IE можно было безболезненно замаскировать таким образом, чтобы их воспринимал только IE. По поводу падания IE благодаря expression смотри выше.
Комментарий by Q-Zma — Октябрь 16, 2007 @ 4:27 pm | Цитировать
Q-Zma, как бы ты исправил expression, описаный в посте?
Комментарий by neutrino — Октябрь 16, 2007 @ 4:46 pm | Цитировать
зависит от ситуации, покажите мне пример страницы, где этот код вызывает зависание.
Комментарий by Q-Zma — Октябрь 16, 2007 @ 5:35 pm | Цитировать
Ради IE и стараемся. Выбор только с спобособах реализации.
Благодаря conditional comments только IE этот скрипт и получит.
Ага. Только я там ничего не понял. Зачем определять режим отображения? Он уже известен и это XHTML-strict.
Если бы все все понимали, то и вопросов бы не было.
Пример реализации min-width и max-width для IE6 одновременно можно посмотреть? Спрашиваю не ради праздного любопытства.
Комментарий by uggallery — Октябрь 16, 2007 @ 5:44 pm | Цитировать
к сожалению не всё так просто, предлагаю ознакомится: http://hsivonen.iki.fi/doctype/
пожалуйста, смотрите
Комментарий by Q-Zma — Октябрь 16, 2007 @ 6:38 pm | Цитировать
У меня все сайты с резиной, через этот expression работают. Если правильно указывать параметры, то IE не роняется.
Комментарий by Максим Покровский — Октябрь 16, 2007 @ 6:52 pm | Цитировать
Это что, шутка? Uggallery подразумевает то что в документе выставлен DOCTYPE, а именно XHTML-strict. Любой уважающий себя front-end developer начинает с DOCTYPE…
За пример спасибо - потестирую.
Комментарий by neutrino — Октябрь 16, 2007 @ 7:12 pm | Цитировать
Максим Покровский,
На твой взгляд в еxpression описаном здесь есть неверно указанные параметры?
Комментарий by neutrino — Октябрь 16, 2007 @ 7:13 pm | Цитировать
Самый первый? Нет, там все верно. IE падает если параметры указаны приблизительно так:
document.body.clientWidth
Но это уже извини не эмуляция min-width, а банальний resize, через expression, в зависимости от выбранного разрешения, что тоже лечится
document.documentElement.clientWidth
Комментарий by Максим Покровский — Октябрь 16, 2007 @ 7:34 pm | Цитировать
Максим, так вот первый expression мне обрушивает браузер через раз. Собственно поэтому я согласился с Uggallery и перенес его в JS.
Комментарий by neutrino — Октябрь 16, 2007 @ 7:37 pm | Цитировать
Обрезалось
Попробую еще…
Самый первый? Нет, там все верно. IE падает если параметры указаны приблизительно так:
document.body.clientWidth) < 990) ? '2000px'Но это уже извини не эмуляция min-width, а банальний resize, через expression, в зависимости от выбранного разрешения, что тоже лечится
document.documentElement.clientWidth) < 990) ? '2000px'Комментарий by Максим Покровский — Октябрь 16, 2007 @ 7:39 pm | Цитировать
Скорее всего ты не обнулил padding и margin у body. Если нет, то я с любопытсвом бы посмотрел на конкретный пример.
Комментарий by Максим Покровский — Октябрь 16, 2007 @ 7:51 pm | Цитировать
Q-Zma: Похоже, это сомое оно. То что нужно. Спасибо!
Учитывая, что все так хорошо отзываются о надежности экспрешн, без отдельного скрипта можно пожить еще немного
Потестирую конечно, но надеюсь все будет хорошо.
Жаль что подобное решение не выдяется в гуглояндексе по первому же приблизительному запросу. Нужная вещь.
Комментарий by uggallery — Октябрь 16, 2007 @ 7:56 pm | Цитировать
А почему бы просто не использовать
document.documentElementвместоdocument.bodyКомментарий by Максим Покровский — Октябрь 16, 2007 @ 8:17 pm | Цитировать
ifman, спасибо за пример!
Более оригинально способа я еще не видел )
Комментарий by larin — Октябрь 16, 2007 @ 8:45 pm | Цитировать
потому что в IE5.5 и IE5 такого объекта нету, учите матчасть
Комментарий by Q-Zma — Октябрь 17, 2007 @ 1:12 am | Цитировать
Это что, шутка? Uggallery подразумевает то что в документе выставлен DOCTYPE, а именно XHTML-strict. Любой уважающий себя front-end developer начинает с DOCTYPE…
За пример спасибо - потестирую.
уважаемый, можно не так пафосно? совершенно очевидно, что я имел ввиду, что некоторым браузерам, не буду называть производителя, совершенно чихать какой доктайп там у вас прописан… это решение работает везде, даже в браузерах неуказанного выше производителя версий 5 и 5.5, и, заметьте, не вешает его вне зависимости от версии.
Комментарий by Q-Zma — Октябрь 17, 2007 @ 1:17 am | Цитировать
Q-Zma, никакого пафоса, просто я на пример предпочитаю сначала выяснить что знает оппонент о вопросе, а потом уж предлагаю ознакомиться. По сему, мне показалось что пафос проскользнул в вашем комментарии.
В любом случае, если мои слова вас задели - прошу прощения, и в мыслях не было. Спасибо за работающий пример, добавлю его в текст поста.
Комментарий by neutrino — Октябрь 17, 2007 @ 9:55 am | Цитировать
Пожалуйста. Сам был поражен, когда увидел.
Комментарий by ifman — Октябрь 17, 2007 @ 11:24 am | Цитировать
К комментарию № 12
Без JS и expression, одновременно и max-width и min-width
max-width и min-width в IE6. Решить за 60 секунд
Комментарий by gordi — Октябрь 20, 2007 @ 8:31 pm | Цитировать
Ммм.. Можно поподробнее, чем не устраивает способ:
.myclass {
min-width: 200px;
}
* html .myclass {
width: 200px;
}
Зачем эти ужасные expressions? Может я чего-то не понимаю?
Комментарий by ISpy — Февраль 16, 2008 @ 2:58 am | Цитировать
Догнал, я немного о другом говорил, можно не отвечать
Комментарий by ISpy — Февраль 20, 2008 @ 1:54 am | Цитировать
ISpy, я так и подумал
Комментарий by neutrino — Февраль 20, 2008 @ 2:04 am | Цитировать
2 gordi: ваше решение не универсальное, если на фоне не однородный цвет, а картинка, к примеру, ваша методика не катит
Комментарий by Q-Zma — Февраль 20, 2008 @ 4:09 am | Цитировать
не знал про такой вариант. Вообще IE6 и некоторые релизы 8-ой оперы просто бесили - делаешь разметку, верстку, все CSS Compliant верно, правильно, в последних версиях браузеров отображается прекрасно, включая IE7 и Оперу 9.х, Мозиллу, а у пользователей старые браузеры, где в итоге всё скачет.
Вариант со скриптами интереснее, не знал, что в стиле можно использовать скрипты, буду думать куда можно еще прикрепить.
А вот вариант без скриптов всё-таки наверно правильней, например у пользователя может быть отключен js в настройках
Комментарий by инис — Май 7, 2008 @ 7:46 pm | Цитировать