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

Question

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

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

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

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

Answer 1

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

Answer 2

Природа 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.

Answer 3

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

Answer 4

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

Условные комментарии позволяют разработчикам с легкостью воспользоваться расширенными функциями, предлагаемыми Microsoft Internet Explorer 5 и более поздними версиями, при написании страниц, которые грациозно переходят в более слабые браузеры или корректно отображаются в браузерах, отличных от Windows Internet Explorer. Условные комментарии являются предпочтительным средством дифференциации правил каскадных таблиц стилей (CSS), предназначенных для конкретных версий 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]-->

Answer 5

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

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

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