Использование условных комментариев в HTML

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

Я видел, как они в основном используются для реализации различных таблиц стилей, когда дело доходит до IE, и хотел бы знать, является ли это хорошей практикой?

В этом случае, если ответ - «Да». Тогда при разработке сайта можно ли использовать две отдельные таблицы стилей для исправления ошибок, например создать одну таблицу стилей для IE и одну для Firefox, Opera и т. Д.?

Заранее спасибо.


css xhtml
person Ronnie    schedule 05.01.2009    source источник

Ответы (5)


arrow_upward
5
arrow_downward

Насколько мне известно, условные комментарии поддерживаются только IE, и они постепенно переходят на более раннюю версию в браузерах, которые их не поддерживают (поскольку они выглядят как обычный комментарий). По общему мнению, можно использовать нестандартную функцию браузера, если вы используете ее для борьбы с другой нестандартной «функцией» браузера (т. Е. Дрянной поддержкой CSS в IE). Итак, вы обнаружите, что это очень распространенное решение для настройки CSS.

person rmeador    schedule 05.01.2009

arrow_upward
4
arrow_downward

Природа Internet Explorer (версия 6 особенно) делает так, что некоторые таблицы стилей хорошо работают с IE, а некоторые - нет. Для тех, кто этого не делает, вы можете использовать условные комментарии, чтобы иметь код CSS, который отображается только для IE. Я должен использовать его из-за того, как Internet Explorer (неправильно) обрабатывает выпадающие меню CSS.

Чтобы веб-сайт, над которым я работаю, правильно отображал функцию hover раскрывающегося меню, мне нужно реализовать файл crosshover.htc. Вот код, который мне нужно использовать:

     <!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(http://www.stannscatholicschool.com/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: 100% verdana, tahoma, helvetica, arial, sans-serif;
}

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

Если я этого не сделаю, раскрывающееся меню разделится на части, и в Internet Explorer 6 будет невозможно перемещаться.

person George Stocker    schedule 05.01.2009
comment
Спасибо Гортоку. Если я куда добавлю ‹! - [if IE]› (IE стиля ссылки), а затем последую за ним с вызовом моей стандартной таблицы стилей, не будет ли мой стиль IE перезаписан моими основными стилями? - person Ronnie; 06.01.2009
comment
Только если вы поместите свои обычные стили позади него, если вы поместите обычные стили перед условным, тогда стили в условном будут перезаписывать их. - person Pim Jager; 06.01.2009
comment
Что сказал Пим. Моя обычная таблица стилей указана в отдельном файле перед условными комментариями. - person George Stocker; 06.01.2009

arrow_upward
2
arrow_downward

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

person Morten Christiansen    schedule 05.01.2009

arrow_upward
0
arrow_downward

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

Однако, если вы используете div и CSS (что похоже на вас), вы сможете определить, что это за контент или в какой области HTML вы находитесь, с помощью идентификаторов DIV и стилей CSS. Не забывайте использовать понятные имена и старайтесь не сокращать их только для облегчения набора текста.

Если для вас это проблема, тогда Intellisense - замечательная вещь, которая может помочь нам обойти подобные вещи. Если нет, то CTRL + C и CTRL + V, вероятно, следующая лучшая вещь :)

person John_    schedule 05.01.2009
comment
Спасибо за вклад, Джон. Я уже использую комментарии в своем коде, чтобы различать определенные разделы. Однако в этом вопросе я больше обращаю внимание на использование условных комментариев для направления определенных вещей в IE. Извините, если я не разъяснил это в исходном вопросе. - person Ronnie; 06.01.2009
comment
Ах да, слово условное выдает это, не так ли :) - person John_; 06.01.2009

arrow_upward
0
arrow_downward

Это отличная практика! На официальной странице документации условных комментариев есть множество примеров и комбинаций условные комментарии, это стоит прочитать. На странице также указано, что:

Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.

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

Вы можете использовать условные комментарии, чтобы исправить неподдерживаемые стили CSS или скрыть код от Internet Explorer, например:

<!--[if !IE]>-->
<script src="IE_will_never_see_this.js" type="text/javascript" charset="utf-8" ></script>
<!--<![endif]-->
person Marco Luglio    schedule 09.02.2009
comment
Спасибо, это должно быть полезно. - person Ronnie; 10.02.2009