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

23 December, 2006

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 и ниже.

Ссылки

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

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

37 комментариев к “CSS, UTF и Интернет эксплорер”

dumkoeb | 1. 23 December, 2006

Спасибо. Я уже давно знаю этот глюк и научился его обходить. Но написать об этом как-то не додумался.

Давид Мзареулян | 2. 23 December, 2006

А если выдавать CSS с контент-тайпом “text/css; charset=utf-8”?

Давид Мзареулян | 3. 23 December, 2006

Т.е. windows-1251, конечно.

akella | 4. 23 December, 2006

Думаю тогда все будет ок, тут как раз в том и проблема что ИЕ читает CSS в той же кодировке что и HTML страницу. При насильном указании думаю все сработает.

А как вы предлагаете ее указывать? Просто ПХПшным header?

Макс Лапшин | 5. 23 December, 2006

Почему бы не писать все в UTF8?

akella | 6. 23 December, 2006

Тоже выход из положения, в обратную сторону проблем не возникает, но в ответ могу задать вопрос: А почему бы не windows-1251? :) Неочевидный выбор в данном случае.

Одним словом я не фанат UTF.

Давид Мзареулян | 7. 23 December, 2006

Настройкой веб-сервера, например.

Ещё вариант:
<link rel=”stylesheet” type=”text/css” charset=”windows-1251″ media=”screen,projection” href=”css/base1.css” />

akella | 8. 23 December, 2006

В ИЕ эта строчка не помогает… думаю разве что насильно посылать header с кодировкой. Но проще уже без русских комментариев… или сам файл перегнать…

Из HTML в комментах доступен только набор безопасных инлайн тагов. Жирнотсь курсив и в таком духе..

alex946 | 9. 23 December, 2006

Занятно. Уже лет пять пользуюсь только UTF и ни разу не напоролся на этот баг, хотя других засад хватало. Cпасибо, будем иметь в виду. Принудительная отправка header с нужной кодировкой вроде бы помогает (ие6).

Zigzag | 10. 23 December, 2006

вот блин, опередил ты меня? Akella =)
да, немало часов я потратил на поиск ответа… а помогли форумы в итоге, единственное, хорошо, что ты ответил причину бага – “съедание закрытия комментария”

Mkdir | 11. 24 December, 2006

Я уже забыл что такое комментарии на русском ;-)

A.I. | 12. 24 December, 2006

Кстати, наверное, из-за проблемы с кодировка не съедается */, ф просто текстовик оказывается битым (русские буквы в win1251 – это запрещенные последовательности в UTF-8).

akella | 13. 24 December, 2006

2 A.I.: да но сути это не меняет, все что будет перед русским комментарием сработает в ИЕ, все что после – нет.
И если где то после русского комментария в файле, у тебя будет еще один комментарий(уже без русских букв) – то не сработают только правила между двумя этими комментариями. Из этого я как раз и сделал выводы о том, что комментарий остается открытым для ИЕ. Все указывает на это.
Вот пример, после второго комментария я указал красный фон для body – http://cssing.org.ua/examples/iecssutf/indexUTF2com.html, и вот такой там CSS:
http://cssing.org.ua/examples/iecssutf/css/base2comments.css

2Mkdir: поверь, в том файле у меня было около 20 комментариев, и только в одном из них я употребил русскую букву…:) Я был в миллиметре от благополучного исхода..

Mkdir | 14. 25 December, 2006

2Akella: Прикольно =)
Кстати, можно ведь и опечататься, например набрав вместо английской ‘c’ русскую ‘c’, которые находятся на одной и той же клавише в обоих раскладках…
Ну что тут сказать. Internet Explorer, индусы…

yoppt | 15. 25 December, 2006

вы бы еще по-монгольски комментарии написали.

akella | 16. 25 December, 2006

То есть родной язык в кодировке используемой самой популярной ОС, вы сравнили с монгольским? Замечательное и логичное сравнение. Спасибо!

YoYurec | 17. 26 December, 2006

спасибо, возьму на заметку!

EL | 18. 27 December, 2006

напоролся на этот глюк пару лет назад еще

Dimox | 19. 2 January, 2007

Премного благодарен! Действительно, не зная об этом баге можно потратить уйму времени, пытаясь найти причину.

Хотя комменты и пишу латиницей, про такой глюк не знал. Теперь буду иметь в виду.

системы видеонаблюдения | 20. 9 January, 2007

можно в .htaccess прописать кодировку…

SvT | 21. 7 February, 2007

спасибо, интересно)

Yuriy | 22. 12 February, 2007

Логично при указании кодировки страницы utf-8 и .css файл сохранить в этой же кодировке.

akella | 23. 12 February, 2007

Это точно, только вот делаются эти вещи(кодировка страниц и CSS файлы) как правило разными людьми. И подобная практика не так очевидна, хотя и логична.

alex | 24. 27 February, 2007

Подскажите где лажа при отображении в IE на сайте http://www.magshar.ru/ в опере всё окей естественно

Daemon | 25. 13 April, 2007

Или оставлять пробел перед закрытием комментария.

html верстка | 26. 16 April, 2007

есть другое решение проблемы,
добавить в начало css файла правило:

@charset “windows-1251”;

Пример:
http://www.fasthtml.ru/examples/ie/indexUTF.html

Спецификация:
http://www.w3.org/TR/REC-CSS2/syndata.html#q23

John | 27. 26 July, 2007

А что будет в такой же ситуации но с файлом скриптов? Т.е. сайт в кодировке UTF и к нему цепляется js файл, у которого внутри сообщения и/или комментарии по-русски в Win-1251.

Vladimir | 28. 8 October, 2007

Пытаюсь собрать сайт.
Под FireFox все смотрится гуд, а вот под ИЕ над верхней шапкой
появляется пустое место и внизу пропадает выравнивание, хотя при
переходе на любой внутренний раздел все встает на места.

http://www.cmagister.info/

Может быть вы сталкивались с таким ?
Заранее спасибо.

akella | 29. 9 October, 2007

Сделайте код валидным прежде чем думать об ошибках ИЕ.

Я этот глюк наблюдаю и в Сафари, скорее всего лишний раз закрыт или не закрыт ДИВ или другой элемент.

akella | 30. 10 November, 2007

Посмотрите в какой кодировке отсылает вам сервер страничку

Вадим Макишвили | 31. 9 January, 2008

Юра, привет.
Есть еще одно решение в добавок к твоим двум.
В файле с cp1251 после русского комментария добавить пустой коммент:
/* русский коммент */ /**/

Проверено на Я.Ру :)

Это решение мне пришло в голову, когда я прочитал твое предположние, что съедается символ закрытия. После еще одного пустого коммента в той же строке – проблема исчезает.

Чингис | 32. 8 May, 2008

даааа
все утро искал проблему – теперь нашел внятным языком и где )

спасибо друг

Илья | 33. 27 July, 2008

Спасибо!!!!!

Олег | 34. 30 August, 2008

Можно сделать проще, не комментировать css :)), а вообще чем проще тем лучше, назвать класс в тему и не надо комментировать, пример htmlverstka.ru

Vitaly Harisov | 35. 30 September, 2008

Можно сделать проще, не комментировать css :)), а вообще чем проще тем лучше, назвать класс в тему и не надо комментировать, пример htmlverstka.ru

Не смешно.

Сергей | 36. 9 June, 2009

Спасибо просто огромное!!!
А то стили упорно не хотели работать в 6 ослике именно по этой причине.

Заметки юного фрилансера! » Div верстка и InternetExplorer 6 — гримучая смесь! | 37. 26 July, 2009

[…] А узнал я это с http://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/ […]

Оставить комментарий