Благодаря многочисленным особенностям браузера Internet Explorer, основной из которых является недостаточная поддержка стандартов, адаптация сайтов под него часто требует дополнительных усилий. Существует множество различных способов компенсировать недостатки IE и условные комментарии — всего один из них. Основные их преимущества перед «хаками» (использовании ошибок в браузере) заключаются в сохранении валидности кода и предсказуемость поведения в будущих версиях браузера.
Эта статья появилась как результат совмещения интересной идеи отвечать на поисковые запросы, по которым приходят на сайт, и важности публикации материалов для новичков. Оказалось, что один из популярнейших запросов — «скрыть селектор от ie7». А ответ на него вполне вписывается в материал для новичков.
Типы условных комментариев
<!--[if условие]> HTML <![endif]-->
Содержимое комментариев такого типа для браузеров, не поддерживающих условные комментарии, и валидатора ничем не отличается от обычного комментария.
<![if условие]> HTML <![endif]>
Для браузеров, не поддерживающих условные комментарии, такая конструкция комментарием не является, а для валидатора её наличие будет поводом обругать ваш код. Сам по себе такой условный комментарий почти бесполезен. Но используя его вместе с условным комментарием первого типа, можно получить хоть и не очень красивую, но действенную конструкцию и с помощью условных комментариев, работающих только в IE, сделать часть кода доступной только для других браузеров:
<!--[if IE]><![if !IE]><![endif]--> <p>Текст для любого браузера кроме IE</p> <!--[if IE]><![endif]><![endif]-->
Или для других браузеров и IE7+:
<!--[if IE]><![if gte IE7]><![endif]--> <p>Текст для любого браузера и IE 7+</p> <!--[if IE]><![endif]><![endif]-->
Условие
Условие — это простейшее логическое выражение. Если оно истинно, то содержимое условного комментария считается частью страницы, если ложно, то так и остаётся комментарием.
| Элемент | Пример | Значение |
|---|---|---|
| IE | [if IE] | Единственное поддерживаемое сейчас свойство IE, равное версии Internet Explorer. |
| value | [if IE 7] | Целое или дробное число, обозначающее версию браузера. Выражение истинно, если число совпадает с версией браузера. |
| ! | [if !IE] | Оператор отрицания (NOT). Возвращает значение, обратное логическому значению аргумента. |
| lt | [if lt IE 5.5] | Меньше (less-than). Возвращает «true», если первый аргумент меньше второго. |
| lte | [if lte IE 6] | Меньше либо равно (less-than or equal). Возвращает «true», если первый аргумент меньше либо равен второму. |
| gt | [if gt IE 5] | Больше (greater-than). Возвращает «true», если первый аргумент больше второго. |
| gte | [if gte IE 7] | Больше либо равно (greater-than or equal). Возвращает «true», если первый аргумент больше либо равен второму. |
| ( ) | [if !(IE 7)] | Скобки позволяют выделить подвыражения в сложном выражении. |
| & | [if (gt IE 5)&(lt IE 7)] | Оператор AND. Возвращает «true», если оба подвыражения истинны. |
| | | [if (IE 6)|(IE 7)] | Оператор OR. Возвращает «true», если одно из подвыражений истинно. |
| true | [if true] | Всегда true. |
| false | [if false] | Всегда false. |
Примеры
К посту прилагается страничка с примерами, код её содержимого:
<p>Тестовая фраза, без условных комментариев</p> <!--[if IE]><p>Текст для любой версии IE</p><![endif]--> <!--[if IE 6]><p>Текст для IE 6</p><![endif]--> <!--[if IE 7]><p>Текст для IE 7</p><![endif]--> <!--[if IE]><![if !IE]><![endif]--> <p>Текст для любого браузера кроме IE</p> <!--[if IE]><![endif]><![endif]--> <!--[if IE]><![if gte IE 7]><![endif]--> <p>Текст для любого браузера и IE 7+</p> <!--[if IE]><![endif]><![endif]-->
Условные комментарии и различные версии IE на одном компьютере
Если у вас установлено несколько версий IE, каждый их них будет считать, что его версия равна версии самого нового IE, установленного в системе. Т. е. если установлены IE6 и IE7, то в IE6 условные комментарии будут работать так же, как и в IE7. Исправить это можно удалив ключ IE в разделе реестра HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Version Vector (если удалять не хочется, можно просто переименовать его в xIE, так поступает Multiple IE package от TredoSoft).
Источники
- MSDN: About Conditional Comments;
- Position Is Everything: Taming Your Multiple IE Standalones.
Автор: Design For Masters.
Ещё материалы по этой теме:
- Вёрстка динамической кнопки на CSS
- Работа с визуальным редактором CKeditor
- ТОП популярных HTML-тегов
- Раскрутка сайта. Часть 2. Маркетинг
- Раскрутка сайта. Часть 1. Поисковая оптимизация
Комментарии:
Константин 7 марта 2008 22:14
Вставлю свои пять копеек в защиту IE.
Стандарты дело хорошее, только вот в реальном мире к идеальному коду который поддерживает стандарты разработчики приходят не за одну версию браузера. У каждого браузера есть ошибки кода, и они исправляются всеми, но только программисты IE поддерживают ОБРАТНУЮ совместимость.
Что случиться если в новой версии FF ваш сайт разьедется из-за вашего хака? Вам скажут: "Сам дурак! Делай по стандартам!", и никому не будет интересно, что в прошлый раз когда ты написал по стандартам, что-то не работало из-за ИХ ошибки. В IE придумали выход, не идеальный, но выход.
PS: И напоследок. Недавно читал статью про эксперимент с производительностью CSS... Обратите внимание на скорость работы IE и продвинутых браузеров. Скорость работы продвинутых браузеров от 3 до10(!) раз ниже. Не в этом ли секрет быстрой поддержки стандартов? Сделать: "быстро и грязно".
PPS: Да, мне тоже хочеться чтобы не надо было лишний раз возиться с IE или FF отдельно, но "се ля ви"....Главное не искать виновных там где их нет.
Тарас 7 марта 2008 23:38
Константин, помоему ваше "слово в защиту" несколько неуместно, потому что само по себе абсурдно то, что вы написали.
только программисты IE поддерживают ОБРАТНУЮ совместимость
Ну ещё бы, остальным просто не приходится этого делать, т.к. есть СТАНДАРТЫ отображения и написания веб-страниц и, если делать по стандарту, то у ВСЕХ будет показываться одинково. ФФ, Опера и прочие нормальные браузеры изначально основывали свою работу на правильном коде, поэтому при их работе не требуется "обратной совместимости с багами", а товарищи из майкрософт вместо того, чтобы залатать баги добавляют новые и возможность обойти их. Разве не бред?
Что случиться если в новой версии FF ваш сайт разьедется из-за вашего хака?
"Этого не может быть, потому что не может быть никогда" ©
Просто потому что хака для ИЕ (а ведь он в комментарий спрятан) ФФ не увидит. А хаков для ФФ просто напросто нет (ну я о таких не осведомлен)
Недавно читал статью про эксперимент с производительностью CSS...
Спасибо за ссылку, почитал и... не понял что там на самом деле замерялось? Написано всё интересно и красиво, но:
а) когда я запустил тест на своём ФФ 2.0.0.12 у меня все показатели были ровно в 2 раза ниже приведенных в таблице (а при локальном запуске и того быстрее)
б) данный тест не показывает ровным счётом ничего
Согласитесь, мы не можем оценить правильность расположения элементов, которыми орудует тест, а следовательно тестируется непонятно что. Конечному пользователю сайта плевать на 1 сотую секунды, с которой будет позиционироваться div, особенно если он оооочень быстро окажется на экране, но не там где нужно.
Поэтому просто советую найти какую-нибудь страничку побольше размером, с кучей элементов и проверить в каком браузере она загрузится быстрее. Думаю ИЕ будет не в фаворитах.
ПыЦ: Именно поэтому я очень рад выходу беты IE8, которая проходит acid2 тест, а следовательно мелкомягкие наконец-то решили сделать шаг в сторону реального улучшения, переписав движок (хотя по слухам скорость работы не увеличилась).
ПыПыЦ: Ничего личного, но коммент получился несколько резче чем хотелось бы, а всё потому, что, имхо, есть аксиомы (к которым я отношу "ИЕ убог, ибо не по стандарту и нет этому никакого прощения") и спор на эту тему просто как-то напрягает)
Peace.
Евгений 8 марта 2008 14:22
ИЕ убог, ибо не по стандарту и нет этому никакого прощения
на это уже дан ответ:
Главное не искать виновных там где их нет.
У всего есть свои причины, если посмотреть сколько лет IE6 и сравнить с FF или Opera то становиться понятно почему у него так плохо со стандартами, 6 лет для ПО очень большой срок, столько не живут. Были ли браузеры с лучшей поддержкой стандартов во времена релиза IE6? Сомневаюсь.
При этом остается открытым вопрос, почему он не развивался, похоже в MS забыли, что у них еще и браузер есть, и над ним нужно работать.
Когда вспомнили сделали IE7, который, куда ближе к стандартам, а поскольку они в этом направлении не работали очень долго то сразу все не получилось, поэтому относительно быстро появился IE8, в котором поддержка стандартов, вероятно, будет на уровне современных браузеров.
Если 9-й выйдет так же быстро, то у MS есть шанс выиграть очередную войну браузеров, конечно, все зависит от того что предпримут сторонники FF, все-таки поддержка Google серьезный аргумент.
хотя по слухам скорость работы не увеличилась
Если MS стараются быстро сделать максимально стандартный браузер, то чем то нужно жертвовать или стандартностью, что приведет к новой волне костылей, или скоростью, что можно легко исправить в следующей версии.
PS: Ни в кой мере не поддерживаю какой либо из браузеров, просто это мое видение истоков проблем с IE и пути по которому пойдет MS.
Тарас 8 марта 2008 17:32
посмотреть сколько лет IE6 и сравнить с FF или Opera
Обратите внимание сюда и думаю вопрос о "древности" ИЕ6 отпадёт сам собой. Так как ИЕ тащит свой текущий (7 версия) движок кажется с IE4 (помните везде на сайтах висело "требуется IE4 или выше), то получается что мы имеем стартовое время в 1998. ФФ использует Гекко, который вышел в свет в 1999. Так что во все времена были альтернативные браузеры, но увы и ах - встроенный в Вин98 IE никто не менял, ибо даже не знали как и зачем.
Опять-таки, если посмотреть то разница между IE6 и FF1.0 всего 1 год. Только гекко поддерживает стандарты, а ИЕ всё так же продолжает "залатывать дыры и делать обратную совместимость".
Про поддержку стандартов оперой точно сказать ничего не могу, т.к. кажется в 8 или 9 версии они с 0 переписали движок, но и до этого не неё никто не жаловался.
Если 9-й выйдет так же быстро, то у MS есть шанс выиграть очередную войну браузеров, конечно, все зависит от того что предпримут сторонники FF, все-таки поддержка Google серьезный аргумент.
Боюсь что тут вопрос не в том, что примут сторонники ФФ, а в том - удастся или нет заставить MS убрать из поставки своей ОС ИЕ как браузер по умолчанию, либо добавить и остальных участников баталий.
Если MS стараются быстро сделать максимально стандартный браузер, то чем то нужно жертвовать или стандартностью, что приведет к новой волне костылей, или скоростью, что можно легко исправить в следующей версии.
Вообще довольно странно звучит "быстро сделать". учитывая указанный вами разрыв во времени между 6 и 7 версией ИЕ. Получается, что всё это время программисты не понятно чем занимались. Да и при том количестве программистов, что трудится на MS, думаю не такая уж и проблема сделать и быстро и "стандартно".
Константин 8 марта 2008 17:39
2Тарас:
И на FF есть пятна...[Баг отображения в FF] (больше на https://bugzilla.mozilla.org/). FF в это месте не соответствует стандарту, что будем делать?
Ждать патч или верстать с хаками? (Хаки на то чтобы скрывать, что-то от "геко"-браузеров, можно найти в том же "Пуленепробиваемом веб-дизайне")
2Евгений:
Да IE6 без божно стар, но если вспомнить, что IE6 был по уши интегрирован в систему, а IE7 уже вполне отдельное приложение, то можно лишь удивляться, что Микорософт так быстро разрулила ситуацию. Думаю, основное время ушло не на написание браузера, а на заделывание дыры которая осталась после того как его "вырвали" из системы. Думаю дальше будет проще.
Тарас 8 марта 2008 18:15
Я и не утверждаю, что ФФ безгрешен. Хотя этот же тест, при открытии в ИЕ сместил весь список влево, причём текст в первом li всё равно ограничивался сайдбаром, хотя прорисовка бордера шла под ним.
Но, увы и ах, от части это не столь часто встречающаяся проблема, а вот как объяснить, что вся суть padding и margin в ИЕ реализована с точностью до наоборот?
Вот именно в моменты вёрстки "под ИЕ" и хочется проклинать мелкомякгих.
А так - мне тоже в общем то всё равно кто чем пользуется, главное, чтобы результат на экране у всех был один и тот же, ну и хотелось бы не слишком долго его ждать.
По поводу "вырвали из системы", я могу в этом ошибаться, но в Висте кажется ИЕ7 всё на том же месте, во всяком случае все элементы меню реализованы в той же стилистике, что и браузер. Но тут я не уверен, т.к. с вистой мало работал.
pepelsbey 8 марта 2008 18:29
Конструкцию < ![if условие]> можно записать валидно.
Плюс есть ещё такой вариант: < !--[if gt IE 7]>< !-->IE8+ и другие нормальные браузеры< !--< ![endif]-->
pepelsbey 8 марта 2008 18:30
Движок зачем-то съел два дефиса, так что в примере выше их нужно удвоить.
Евгений 8 марта 2008 19:00
Движок WP думает, что два дефиса это тире, эта самодеятельность пресекается с помощью тега < code>, хотя кто знает, что он еще вырежет используйте "Просмотр".
Я добавил < code>, но валидатор на такую конструкцию ругается, может закралась ошибка?
pepelsbey 9 марта 2008 6:45
валидатор на такую конструкцию ругается
Может дело в том, что CODE — это строчный элемент, а WP заворачивает внутрь параграфы?
Евгений 9 марта 2008 12:12
Разобрался, < code> тут не причем, валидатору я подсовывал пример, в котором его не было, причина оказалась в моей невнимательности.
Cмотрю красненьким ругается значит ошибка :) а какая не посмотрел. Проблема была в том, что текст находится прямо внутри < body>, если добавить < p> то все отлично работает и проходит проверку валидатором:
< !--[if gte IE 7]>< !-->< p>IE7+ и нормальные браузеры< /p>< !--< ![endif]-->
Условие немного изменил, чтобы те у кого IE8 нет тоже могли видеть текст.
sunnybear 12 марта 2008 0:40
Ну раз Вадим подвязался -- мне сам бог велел :)
Тарас, по поводу тестов на селекторы -- в выводах все было написано: использование чистых #id способно ускорить их работу на 10-15%, если большая страница будет у вас на клиенте парсится 100мс, то 15 из них вы сможете выиграть. А если не 100, а больше? На 1 селектор получался выигрыш где-то в 0,2...0,5мс -- можно подсчитать, сколько селекторов нужно будет поправить для ощутимого результата.
Да, можно сказать, что оптимизация -- бред, ибо дает копеечный выигрыш. Но... копейка рубль бережет. Есть реальные примеры ускорения сайтов с 14с до 4 или даже меньше.
P.S. сейчас почти готова вторая часть, через пару дней появится там же. В ней рассматривается транзитивность селекторов, есть некоторые интересные тренды.
Евгений 12 марта 2008 1:58
Никак не ожидал столь обстоятельного обсуждения после статьи для самых маленьких :) от неожиданности потерял нить дискуссии.
Продолжим.
Опять-таки, если посмотреть то разница между IE6 и FF1.0 всего 1 год. Только гекко поддерживает стандарты, а ИЕ всё так же продолжает “залатывать дыры и делать обратную совместимость”.
FF все время развивался, IE нет (длинная полоса бездействия на схеме), он был надолго заброшен отсюда и пошли проблемы, почему он не развивался, как я уже говорил вопрос открытый. За схемку отдельное спасибо, любопытная.
Боюсь что тут вопрос не в том, что примут сторонники ФФ, а в том - удастся или нет заставить MS убрать из поставки своей ОС ИЕ как браузер по умолчанию
Убирать IE из поставки винды худшее решении из возможных, потому что это значит переступить через пользователя ради браузера, просто вредительское решение, что-то из серии: враг народа был уничтожен точечным ядерным ударом, осталось опознать труп среди трех миллионов случайных жертв.
Почему так:
— как скачать ФФ если не будет установленных браузеров :)
— все-таки браузер для людей, а не наоборот, если большинство удовлетворено ИЕ, это их право, нужно убеждать их в том, что им нужен другой браузер, а не принуждать к его смене.
— нет никаких причин по которым MS не должен включать браузер в поставку своей ОС, что хотят то и включают, при условии, что это не увеличивает цену ОС. Если мы будем утверждать обратное, то нужно задуматься и над тем почему в дистрибутиве линукса есть ФФ и убрать его.
либо добавить и остальных участников баталий.
Идеальный вариант, но если MS согласиться то... да ничего, все равно никогда не согласиться.
Получается, что всё это время программисты не понятно чем занимались.
так и получается, но разрыв между 7 и 8 говорит о том, что уже взялись.
Да и при том количестве программистов, что трудится на MS, думаю не такая уж и проблема сделать и быстро и “стандартно”.
Не думаю, что скорость разработки браузера очень уж хорошо масштабируется в зависимости от количества программистов. Где-то читал про проект ОС над которым работало около тысячи программеров, его так и не закончили.
Думаю, основное время ушло не на написание браузера, а на заделывание дыры которая осталась после того как его “вырвали” из системы. Думаю дальше будет проще.
Похоже уже пошло быстрее судя по тому, что IE8 не пришлось ждать 6 лет.
По поводу “вырвали из системы”, я могу в этом ошибаться, но в Висте кажется ИЕ7 всё на том же месте, во всяком случае все элементы меню реализованы в той же стилистике, что и браузер. Но тут я не уверен, т.к. с вистой мало работал.
В винде у всех программ все одинаковое потому, что отрисовкой интерфейса занимаются системные библиотеки, поэтому из схожетси меню не следует встроенность ИЕ в винду, из этого следует только то, что он использует стандартные элементы управления винды, как и большинство программ написанных исключительно под нее. У других браузеров стиль элементов управления отличается потому, что они используют элементы управления из кроссплатформенных библиотек.
Тарас 12 марта 2008 15:42
sunnybear, оптимизация - это наше всё. я ни в коем случае не умаляю ваш труд, но просто акцентировал внимание на неравнозначности результатов у вас и у меня. Так же, имхо, большинство проектов тормозятся громоздкими ява-скрипт фреймворками, так что заметить тормоза от ЦСС-рендеринга практически не реально) Но с тем, что миллисекунда - миллисекунде рознь я согласен целиком и полностью.
Евгений, согласен со всем)
И буду в первых рядах пожимать руку ИЕ-девелоперам, если 8 версия будет работать без подобных хаков и можно будет не тратить время на оптимизацию.
Вообще я начал этот спор/дискуссию из-за вот этого текста
Не в этом ли секрет быстрой поддержки стандартов? Сделать: “быстро и грязно”.
PPS: Да, мне тоже хочеться чтобы не надо было лишний раз возиться с IE или FF отдельно, но “се ля ви”….Главное не искать виновных там где их нет.
Потому что просто не согласен с тем, что разработчики ИЕ5-6 не виноваты в том, что мы сейчас имеем.
И картинка в тему (с хабра)
PVasili 17 апреля 2008 0:14
Уважаемый автор и спорщики: - приведите пожалуйста ссылку на стандарт CSS. Я его пока не видел, а был бы искренне рад прочесть его по вашей ссылке...
Приятно рассуждать об вкусе устриц - ни разу их не пробовав, а уж тем более жать кому-то руки.
MS, один из активных участников в разработке спецификации CSS(и остальных спецификаций). Прочтите список в конце (Acknowledgements) https://www.w3.org/TR/2008/WD-html5-20080122/ в котором полно сотрудников MS. Просто так они о себе написали? И последние фразы о себе любимой (MS) не BG составил ;).
Многим было бы полезно послушать выступление Алексея Могилевского ("о броузерах стандартах...") лень ссылку искать. Думаю все грамотные - найдут.
Если бы кто-то из вас(вашей команды) создал продукт, который работает на хотя-бы на нескольких сотнях тысяч машин, я бы взглянул на вас, как бы вы быстро "поправили ошибки", и во что вам это встало бы.
Не все так просто в корпоративном мире. Это вам не домашние хомяки подправить. Когда речь идет о миллиардах вкладываемых в переделку всего, что заинтегрировано уже на IE кто будет платить? Толпы прыщавых подростков в драных джинсах?
Евгений 18 апреля 2008 12:02
Многим было бы полезно послушать выступление Алексея Могилевского ("о броузерах стандартах...") лень ссылку искать. Думаю все грамотные - найдут.
А вот ссылку бы лучше дали, я думаю речь идет об этом интервью. Действительно интересно было послушать, но слова "потом мы мало внимания уделяли Интернету", и "теперь у нас снова есть IE" полностью подтверждают мою версию, о том, почему возникли проблемы с поддержкой стандартов в основном браузере, над ним никто не работал лет 5, затыкали критические дыры и все.
Программеры, конечно, не причем они просто над другими продуктами работали, да и политика компании понятна, тогда могло показаться, что на IE не заработаешь, а теперь разгорелась нешуточная борьба за Интернет (источники денег там нашлись), а популярный бразер интегрированный с фирменными сервисами в этой борьбе хорошее подспорье, вот и пошли версии IE одна за другой, и разработчики из MS начали участвовать в работе над стандартами.
MS, один из активных участников в разработке спецификации CSS(и остальных спецификаций). Прочтите список в конце (Acknowledgements) ... в котором полно сотрудников MS. Просто так они о себе написали? И последние фразы о себе любимой (MS) не BG составил ;).
Знаем, знаем, об это, кстати, в статье о HTML5, упоминается.
А ну да ссылку на стандарт :) ... по крайней мере, сейчас это релиз кандидат. Похоже на том митинге, о котором говорил в интервью Алексей, удалось достичь консенсус :)
PVasili 18 апреля 2008 20:52
В том и беда что стандарта нет (у вас получается, как будто кто-то не соблюдает установленные правила). Как такового. Есть набор каких-то рекомендаций, в которых местами прописано не совсем внятно и отдано на откуп разработчиком. Оно и понятно. Сложно договариваться и делать согласования в "суровом" корпоративном мире. Тем более, когда на кону такие деньги.
Мне только хотелось обратить внимание, на то, что не все так просто. И толпы подростков кричащие мастдай довольно недалёкие люди. К огромной радости их голос слабо слышен а конструктива в таких воплях 0.
А вообще, спасибо за статью. Для меня лично нового нет. Молодым будет полезно.
Deutschmann 11 июля 2008 15:39
Универсализм - вот что должно быть во всех спецификациях и стандартах. А использование всякого рода уловок только этому мешает. Ладно если дизайнер пытается что-то интересное придумать и ему не хватает возможностей спецификации. Но когда на это толкают проблемы с некоторыми браузерами это просто выводит из себя. И чаще всего причина этого именно IE. Лично я всегда пытаюсь избавиться от условных комментариев, если даже жизнь с ними кажется очень простой. Кроме того такая вещь как условный комментарий не проходит валидацию W3C, не считая отдельных случаев.
Михаил 21 августа 2008 14:42
На самом деле все просто. IE действительно замечательный браузер. Его легко расширять, интегрировать с собственными приложениями. Возможность использовать в нем "опасные элементы" наподобие ActiveX дает разработчику возможность реализовать такой функционал, который даже не снился пользователям мозилки или оперы. Ну, скажем, перетащить мышью документ MS Word в какой-то онтейнер и через 10 секунд увидеть вполне валидный xhtml со всеми содержащимися в документе изображениями впридачу, опубликованным на сервере. И практически все это на стороне клиента. Поэтому не стоит оценивать его с позиций верстальщика. Лучше изучить все то, что выделяет его среди прочих. Впрочем, однако, как говориться "Edem das sein"....