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

23 Dec, 2006

Недавно я и некоторые из моих знакомых напоролись на интересный неочевидный глюк связанный с употреблением русских комментариев в 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 и ниже.

Ссылки

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

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

1.dumkoeb | 23 Dec, 2006
Спасибо. Я уже давно знаю этот глюк и научился его обходить. Но написать об этом как-то не додумался.
2.Давид Мзареулян | 23 Dec, 2006
А если выдавать CSS с контент-тайпом "text/css; charset=utf-8"?
3.Давид Мзареулян | 23 Dec, 2006
Т.е. windows-1251, конечно.
4.akella | 23 Dec, 2006
Думаю тогда все будет ок, тут как раз в том и проблема что ИЕ читает CSS в той же кодировке что и HTML страницу. При насильном указании думаю все сработает. А как вы предлагаете ее указывать? Просто ПХПшным header?
5.Макс Лапшин | 23 Dec, 2006
Почему бы не писать все в UTF8?
6.akella | 23 Dec, 2006
Тоже выход из положения, в обратную сторону проблем не возникает, но в ответ могу задать вопрос: А почему бы не windows-1251? :) Неочевидный выбор в данном случае. Одним словом я не фанат UTF.
7.Давид Мзареулян | 23 Dec, 2006
Настройкой веб-сервера, например. Ещё вариант: <link rel=”stylesheet” type=”text/css” charset=”windows-1251″ media=”screen,projection” href=”css/base1.css” />
8.alex946 | 23 Dec, 2006
Занятно. Уже лет пять пользуюсь только UTF и ни разу не напоролся на этот баг, хотя других засад хватало. Cпасибо, будем иметь в виду. Принудительная отправка header с нужной кодировкой вроде бы помогает (ие6).
9.akella | 23 Dec, 2006
В ИЕ эта строчка не помогает... думаю разве что насильно посылать header с кодировкой. Но проще уже без русских комментариев... или сам файл перегнать... Из HTML в комментах доступен только набор безопасных инлайн тагов. Жирнотсь курсив и в таком духе..
10.Zigzag | 23 Dec, 2006
вот блин, опередил ты меня? Akella =) да, немало часов я потратил на поиск ответа... а помогли форумы в итоге, единственное, хорошо, что ты ответил причину бага - "съедание закрытия комментария"
11.Mkdir | 24 Dec, 2006
Я уже забыл что такое комментарии на русском ;-)
12.A.I. | 24 Dec, 2006
Кстати, наверное, из-за проблемы с кодировка не съедается */, ф просто текстовик оказывается битым (русские буквы в win1251 - это запрещенные последовательности в UTF-8).
13.akella | 24 Dec, 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 комментариев, и только в одном из них я употребил русскую букву...:) Я был в миллиметре от благополучного исхода..
14.Mkdir | 25 Dec, 2006
2Akella: Прикольно =) Кстати, можно ведь и опечататься, например набрав вместо английской 'c' русскую 'c', которые находятся на одной и той же клавише в обоих раскладках... Ну что тут сказать. Internet Explorer, индусы...
15.yoppt | 25 Dec, 2006
вы бы еще по-монгольски комментарии написали.
16.akella | 25 Dec, 2006
То есть родной язык в кодировке используемой самой популярной ОС, вы сравнили с монгольским? Замечательное и логичное сравнение. Спасибо!
17.YoYurec | 26 Dec, 2006
спасибо, возьму на заметку!
18.EL | 27 Dec, 2006
напоролся на этот глюк пару лет назад еще
19.Dimox | 02 Jan, 2007
Премного благодарен! Действительно, не зная об этом баге можно потратить уйму времени, пытаясь найти причину. Хотя комменты и пишу латиницей, про такой глюк не знал. Теперь буду иметь в виду.
20.системы видеонаблюдения | 09 Jan, 2007
можно в .htaccess прописать кодировку...
21.SvT | 07 Feb, 2007
спасибо, интересно)
22.Yuriy | 12 Feb, 2007
Логично при указании кодировки страницы utf-8 и .css файл сохранить в этой же кодировке.
23.akella | 12 Feb, 2007
Это точно, только вот делаются эти вещи(кодировка страниц и CSS файлы) как правило разными людьми. И подобная практика не так очевидна, хотя и логична.
24.alex | 27 Feb, 2007
Подскажите где лажа при отображении в IE на сайте http://www.magshar.ru/ в опере всё окей естественно
25.Заметки юного фрилансера! &raquo; Div верстка и InternetExplorer 6&nbsp;&mdash; гримучая смесь! | 26 Jul, 2009
[...] А узнал я это с http://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/ [...]
26.Daemon | 13 Apr, 2007
Или оставлять пробел перед закрытием комментария.
27.html верстка | 16 Apr, 2007
есть другое решение проблемы, добавить в начало css файла правило: @charset "windows-1251"; Пример: http://www.fasthtml.ru/examples/ie/indexUTF.html Спецификация: http://www.w3.org/TR/REC-CSS2/syndata.html#q23
28.John | 26 Jul, 2007
А что будет в такой же ситуации но с файлом скриптов? Т.е. сайт в кодировке UTF и к нему цепляется js файл, у которого внутри сообщения и/или комментарии по-русски в Win-1251.
29.Vladimir | 08 Oct, 2007
Пытаюсь собрать сайт. Под FireFox все смотрится гуд, а вот под ИЕ над верхней шапкой появляется пустое место и внизу пропадает выравнивание, хотя при переходе на любой внутренний раздел все встает на места. http://www.cmagister.info/ Может быть вы сталкивались с таким ? Заранее спасибо.
30.akella | 09 Oct, 2007
Сделайте код валидным прежде чем думать об ошибках ИЕ. Я этот глюк наблюдаю и в Сафари, скорее всего лишний раз закрыт или не закрыт ДИВ или другой элемент.
31.akella | 10 Nov, 2007
Посмотрите в какой кодировке отсылает вам сервер страничку
32.Вадим Макишвили | 09 Jan, 2008
Юра, привет. Есть еще одно решение в добавок к твоим двум. В файле с cp1251 после русского комментария добавить пустой коммент: /* русский коммент */ /**/ Проверено на Я.Ру :) Это решение мне пришло в голову, когда я прочитал твое предположние, что съедается символ закрытия. После еще одного пустого коммента в той же строке - проблема исчезает.
33.Чингис | 08 May, 2008
даааа все утро искал проблему - теперь нашел внятным языком и где ) спасибо друг
34.Сергей | 09 Jun, 2009
Спасибо просто огромное!!! А то стили упорно не хотели работать в 6 ослике именно по этой причине.
35.Илья | 27 Jul, 2008
Спасибо!!!!!
36.Олег | 30 Aug, 2008
Можно сделать проще, не комментировать css :)), а вообще чем проще тем лучше, назвать класс в тему и не надо комментировать, пример htmlverstka.ru
37.Vitaly Harisov | 30 Sep, 2008
Можно сделать проще, не комментировать css :)), а вообще чем проще тем лучше, назвать класс в тему и не надо комментировать, пример htmlverstka.ru
Не смешно.