cssing Архив » CSS, UTF и Интернет эксплорер

CSS, UTF и Интернет эксплорер

XHTML/CSS, Полезности

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

Ответа в инете не нашел

Наверняка многие на него напарывались – но внятного ответа от гугла мне получить не удалось – потому я решил для экономии времени читателей озвучить этот гадкий и противный глюк. По незнанию такого глюка отладка может быть длительной. Глюк проявляется только в версиях интернет эксплорера 5.0-6.0

Типичная ситуация для бага

Вы верстаете сайт. Кодировка ваших CSS файлов по умолчанию выставлена windows-1251. После чего верстка попадает в реализацию, где она прикручивается к движку(в движке HTML отдается как UTF-8). Однако оказывается, что в ИЕ6 и ниже, сайт сильно расползается и часть CSS не работает. Причина – русские комментарии в CSS.

Пример

Для примера я создал CSS файл с русскими комментариями в кодировке windows-1251:

1. /*Русский комментарий*/
2. #content{
3. color:#fff;
4. background:#000;
5. }

И две HTML странички(страничка в windows-1251 и страничка в UTF-8), отличающиеся лишь метатагами

1. <meta http-equiv="content-type" content="text/html; charset=utf-8">

И

1. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

Обе странички ссылаются на один и тот же CSS файл. В результате в ИЕ6 и ниже, CSS на страничке с кодировкой UTF не срабатывает. Все из-за русских комментариев.

Решение

Есть несколько путей:

• Удалить русские комментарии из CSS
• Поменять кодировку CSS файла на UTF-8

Но лучше никогда не использовать кириллицу для комментирования CSS файлов. Мало ли к чему там будут прикручивать потом вашу верстку… а кодировку CSS файлов догадаются поменять в последнюю очередь.

Суть бага в том, что при наличии русского комментария(UTF кодировка страницы переносится и на CSS), IE сьедает символ закрытия комментария, в результате весь CSS после русских букв оказывается так же закомментированным. В IE7 этот “баг” не проявляется. Примеры смотреть в IE 6 и ниже.

Ссылки

• Страничка и CSS файл в кодировке windows-1251
• Страничка в кодировке UTF-8, CSS файл в кодировке windows-1251
• Страничка в кодировке UTF-8, CSS файл в кодировке windows-1251 без русских комментариев

Надеюсь, по крайней мере те кто это прочитают, не потратят теперь пару часов своей жизни на поиск такого бага. Будьте внимательны! Буду рад, если Вы поделитесь своим опытом по этому поводу.

XHTML/CSS, Полезности