Создание, сопровождение и продвижение сайтов на CMS Drupal

Не загружается CSS? 31 причина ненавидеть Internet Explorer.

Я уже давно не люблю Internet Explorer и давно им не пользуюсь, но ненавидеть я его стал только когда начал заниматься веб разработкой. Такого зоопарка непредсказуемого поведения каждой версии браузера сложно представить. Если с IE6 все достаточно просто – им пользуются всего несколько процентов маргиналов, и про него можно забыть, то различия даже в версиях IE7 и IE8 порядком утомили. А тут еще ждем IE9… И вот еще один камень в огород Internet Explorer , о котором пойдет речь дальше.

В один «прекрасный» день, я узнал, что на моем не коммерческом проекте – сайте о жизни в Японии слетела верстка. Причем когда это произошло точно я определить не мог, т.к. подобный феномен наблюдался только в Internet Explorer, а я как уже ранее говорил - им пользуюсь очень редко. Что я там такого натворил, было для меня загадкой. Грешил на модули и кэширование в Друпале. Времени плотно заниматься проблемой не было, но случайно нашел подсказку на www.drupal.ru и объяснение причин такого странного поведения Internet Explorer.

Далее привожу перевод статьи Stylesheets Not Loading? 31 Reasons to Hate Internet Explorer от John Albin, которая помогла мне понять и решить проблему.


Ранее все стили CSS сайтов, что я делал, были в одном файле: style.css. Все было просто. Я создавал сайт, я структурировал собственные стили, я знал что где.

Конечно, потом я обнаружил мощь open-source сообщества. И теперь есть бесчисленное количество разработчиков для написания CSS моих сайтов. Для простоты управления, каждый функциональный модуль имеет свой собственный стиль.

К сожалению, как только вы привыкните к нескольким файлам стилей на вашем вебсайте, вы получите и странные проблемы с Internet Explorer – некоторые из ваших стилей не будут применяться.

А если у вас есть достаточный уровень Google-фу, вы в конечном итоге обнаружите эту малоизвестную ошибку: Internet Explorer загружает только первые 31 стили и игнорирует остальные. И это даже не ограничивается нашим обычным подозреваемым - IE6. Все версии IE имеют такие ограничения.

Проблема целиком и почему я был достаточно безумен, чтобы загрузить 993 стилей на одной странице.

У Microsoft есть статья в Базе Знаний, в которой говорится: «Все тэги стилей после первых 30 тэгов стилей на HTML странице не применяются в Internet Explorer.» Ошибка не только в этой статье Базы Знаний (грузятся первых 31, а не первых 30 стилей), реальная картина более сложная.

Как мы все знаем, Есть два пути для загрузки стилей на веб-странице. Вы можете использовать тег <link /> или @import внутри <style> метки.

<link rel="stylesheet" href="style1.css" type="text/css" media="all" />
<style type="text/css" title="text/css" media="all">
     @import url(style2.css);
</style>

Кстати, если вы еще не знаете, то запомните, что вам следует избегать @import, как чумы, поскольку могут быть проблемы с производительность и может это привести к поломке JavaScripts. Смотрите замечательную статью Steve Souder Don’t use @import.

Для того, чтобы изучить ограничения комбинаций @import и <link />, я создал набор тестов, которые вы можете скачать ниже.

Предельные тесты таблиц стилей CSS в Internet Explorer

  1. using <link> tags test
  2. using stylesheet <link> tags after other <link> tags test
  3. using <style> tags test
  4. using single <style> tag test
  5. using two <style> tags test
  6. using mixed <link> and <style> tags test
  7. using 993 stylesheets in 32 <style> tags test

Таким образом я обнаружил, что IE будет загружать таблицы стилей только первых 31 <link rel="stylesheet" /> или <style> </ style > тегов. И внутри каждых из этих <style> </style > тэгов будет загружать только первые 31 таблиц стилей @import.

Так теоретически можно использовать 31 тэг стилей с 31 @import в каждом тэге и загрузить 961 стилей в Internet Explorer. Но, ради бога, не делайте этого! Тег ссылки является гораздо лучшим вариантом, но это ограничивает вас в 31 стилей.

Решение на базе Drupal.

К счастью, моим выбором CMS / framework является Drupal, который имеет встроенное решение. Если вы включите "Оптимизация CSS файлов" в admin/settings/performance, Drupal сгруппирует все стили вашего сайта в один файл. Это позволит вам не выходить за рамки лимитов IE. И, как бонус, это уменьшит нагрузку на сервер и улучшит производительность вашего сайта, т.к. браузер будет иметь гораздо меньше подключений с сервером при загрузке стилей. Ура! Но эта возможность не включена по умолчанию, поэтому убедитесь, что эта опция выбрана сейчас на ваших серверах!

Но теперь разработчики могут заметить, что вы все еще в затруднительное положение при разработке сайта и проверки CSS в Internet Explorer. Включить группировку CSS. Проверить сайт в IE. Изменить CSS. Выключить группировку CSS, а затем снова перегруппировать новый CSS. И повторять это каждый раз. А это тот еще геморрой.

К счастью, пока мы ждем доработок ядра Drupal 7, мы можем использовать модуль IE CSS Optimizer, который я (John Albin) написал специально для тестирования IE при разработке Drupal темы. После включения этого модуля, просто выберите "Частичная оптимизации CSS" в admin/settings/performance. Теперь все CSS файлы модулей будут объединяются в один файл, обеспечивая до 30 работающих стилей в вашей теме, проблем с лимитами IE.

Оптимизация файлов CSS: Частичная оптимизации CSS.

И не забудьте отключить этот модуль или выбрать "Полная оптимизация", когда вы закончите разработку вашей темы.


В свое время я так намучился с поисками причины глюков Internet Explorer, что неудержался и перевел статью John Albin на русский язык для других разработчиков Drupal.