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

StackOverflow https://stackoverflow.com/questions/414738

  •  03-07-2019
  •  | 
  •  

Вопрос

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

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

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

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

Это было полезно?

Решение

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

Другие советы

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

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

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

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

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

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

Условные комментарии позволяют разработчикам с легкостью воспользоваться расширенными функциями, предлагаемыми 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]-->
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top