Использование условных комментариев IE для включения файлов CSS или JavaScript приводит к увеличению числа запросов http

Question

Веб-дизайнер создал для нас страницы с комментариями для IE. Следовательно, некоторые таблицы стилей включены, только если пользователь использует конкретную версию IE:

<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="/styles/ie6-fixes.css" media="screen"  />
<![endif]-->

Та же самая техника была использована для файлов JavaScript. К сожалению, это приводит к увеличению количества HTTP-запросов для пользователей IE, поэтому воспринимаемое время загрузки страницы медленнее. Как правило, моя практика состоит в том, чтобы объединить все CSS в одном файле и все JS в одном файле.

Есть ли способ, чтобы эти специфичные для IE комментарии в самих файлах CSS и / или JS? Или есть способ, которым я могу симулировать эту функциональность?

Answer 1

Для CSS вы можете использовать специфичные для IE комментарии, чтобы окружить содержимое документа элементом элемента

<div id="IE6">

Это может позволить вам реализовать исправления IE6 CSS, добавив селекторы с "# IE6".

Подробнее см. http://www.positioniseverything.net/articles/cc-plus.html

JScript также имеет условную компиляцию, которая может помочь вам объединить ваши файлы JS в один. Смотри http://msdn.microsoft.com/en-us/library/ahx1z4fs(VS.80).aspx

Answer 2

Ну, что вы можете сделать, это использовать динамический компоновщик. Например, в ваших условных выражениях вы можете использовать встроенные сценарии для добавления параметров для вашей сборки в массив js. тогда вы можете использовать этот массив для создания URL-адреса вашего скрипта / CSS, например /assets/css/build.php?use=base,ie7 и аналогичного для js.

Тогда в этом php (или любом другом языке lang) вы можете использовать minify или какую-то другую библиотеку, чтобы скомпилировать все скрипты / css в отдельные файлы, разложить все ненужные файлы и доставить их. Затем вы также можете кэшировать сборки для более быстрой доставки позже.

Я использовал эту стратегию в ряде проектов с PHP Minify и / или различными плагинами Symfony, которые делают то же самое.

Answer 3

Для CSS вы можете попробовать использовать различные приемы селектора, которые другие браузеры игнорируют и IE6 будут уважать, но это влечет за собой небольшую стоимость перфоманса для всех остальных.

Для JS вы можете обновить свои функции, чтобы проверить строку User-Agent, но это в основном те же проблемы, что и в предложении CSS.