CSS, UTF и Интернет эксплорер
23 December, 2006Недавно я и некоторые из моих знакомых напоролись на интересный неочевидный глюк связанный с употреблением русских комментариев в CSS. Суть глюка и пример ниже. Сразу резюме: лучше не используйте комментарии с кириллицей в CSS.
Ответа в инете не нашел
Наверняка многие на него напарывались – но внятного ответа от гугла мне получить не удалось – потому я решил для экономии времени читателей озвучить этот гадкий и противный глюк. По незнанию такого глюка отладка может быть длительной. Глюк проявляется только в версиях интернет эксплорера 5.0-6.0
Типичная ситуация для бага
Вы верстаете сайт. Кодировка ваших CSS файлов по умолчанию выставлена windows-1251. После чего верстка попадает в реализацию, где она прикручивается к движку(в движке HTML отдается как UTF-8). Однако оказывается, что в ИЕ6 и ниже, сайт сильно расползается и часть CSS не работает. Причина – русские комментарии в CSS.
Пример
Для примера я создал CSS файл с русскими комментариями в кодировке windows-1251:
- /*Русский комментарий*/
- #content{
- color:#fff;
- background:#000;
- }
И две HTML странички(страничка в windows-1251 и страничка в UTF-8), отличающиеся лишь метатагами
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
И
- <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 без русских комментариев
Надеюсь, по крайней мере те кто это прочитают, не потратят теперь пару часов своей жизни на поиск такого бага. Будьте внимательны! Буду рад, если Вы поделитесь своим опытом по этому поводу.
Спасибо. Я уже давно знаю этот глюк и научился его обходить. Но написать об этом как-то не додумался.
А если выдавать CSS с контент-тайпом “text/css; charset=utf-8”?
Т.е. windows-1251, конечно.
Думаю тогда все будет ок, тут как раз в том и проблема что ИЕ читает CSS в той же кодировке что и HTML страницу. При насильном указании думаю все сработает.
А как вы предлагаете ее указывать? Просто ПХПшным header?
Почему бы не писать все в UTF8?
Тоже выход из положения, в обратную сторону проблем не возникает, но в ответ могу задать вопрос: А почему бы не windows-1251? :) Неочевидный выбор в данном случае.
Одним словом я не фанат UTF.
Настройкой веб-сервера, например.
Ещё вариант:
<link rel=”stylesheet” type=”text/css” charset=”windows-1251″ media=”screen,projection” href=”css/base1.css” />
В ИЕ эта строчка не помогает… думаю разве что насильно посылать header с кодировкой. Но проще уже без русских комментариев… или сам файл перегнать…
Из HTML в комментах доступен только набор безопасных инлайн тагов. Жирнотсь курсив и в таком духе..
Занятно. Уже лет пять пользуюсь только UTF и ни разу не напоролся на этот баг, хотя других засад хватало. Cпасибо, будем иметь в виду. Принудительная отправка header с нужной кодировкой вроде бы помогает (ие6).
вот блин, опередил ты меня? Akella =)
да, немало часов я потратил на поиск ответа… а помогли форумы в итоге, единственное, хорошо, что ты ответил причину бага – “съедание закрытия комментария”
Я уже забыл что такое комментарии на русском ;-)
Кстати, наверное, из-за проблемы с кодировка не съедается */, ф просто текстовик оказывается битым (русские буквы в win1251 – это запрещенные последовательности в UTF-8).
2 A.I.: да но сути это не меняет, все что будет перед русским комментарием сработает в ИЕ, все что после – нет.
И если где то после русского комментария в файле, у тебя будет еще один комментарий(уже без русских букв) – то не сработают только правила между двумя этими комментариями. Из этого я как раз и сделал выводы о том, что комментарий остается открытым для ИЕ. Все указывает на это.
Вот пример, после второго комментария я указал красный фон для body – http://cssing.org.ua/examples/iecssutf/indexUTF2com.html, и вот такой там CSS:
http://cssing.org.ua/examples/iecssutf/css/base2comments.css
2Mkdir: поверь, в том файле у меня было около 20 комментариев, и только в одном из них я употребил русскую букву…:) Я был в миллиметре от благополучного исхода..
2Akella: Прикольно =)
Кстати, можно ведь и опечататься, например набрав вместо английской ‘c’ русскую ‘c’, которые находятся на одной и той же клавише в обоих раскладках…
Ну что тут сказать. Internet Explorer, индусы…
вы бы еще по-монгольски комментарии написали.
То есть родной язык в кодировке используемой самой популярной ОС, вы сравнили с монгольским? Замечательное и логичное сравнение. Спасибо!
спасибо, возьму на заметку!
напоролся на этот глюк пару лет назад еще
Премного благодарен! Действительно, не зная об этом баге можно потратить уйму времени, пытаясь найти причину.
Хотя комменты и пишу латиницей, про такой глюк не знал. Теперь буду иметь в виду.
можно в .htaccess прописать кодировку…
спасибо, интересно)
Логично при указании кодировки страницы utf-8 и .css файл сохранить в этой же кодировке.
Это точно, только вот делаются эти вещи(кодировка страниц и CSS файлы) как правило разными людьми. И подобная практика не так очевидна, хотя и логична.
Подскажите где лажа при отображении в IE на сайте http://www.magshar.ru/ в опере всё окей естественно
Или оставлять пробел перед закрытием комментария.
есть другое решение проблемы,
добавить в начало css файла правило:
@charset “windows-1251”;
Пример:
http://www.fasthtml.ru/examples/ie/indexUTF.html
Спецификация:
http://www.w3.org/TR/REC-CSS2/syndata.html#q23
А что будет в такой же ситуации но с файлом скриптов? Т.е. сайт в кодировке UTF и к нему цепляется js файл, у которого внутри сообщения и/или комментарии по-русски в Win-1251.
Пытаюсь собрать сайт.
Под FireFox все смотрится гуд, а вот под ИЕ над верхней шапкой
появляется пустое место и внизу пропадает выравнивание, хотя при
переходе на любой внутренний раздел все встает на места.
http://www.cmagister.info/
Может быть вы сталкивались с таким ?
Заранее спасибо.
Сделайте код валидным прежде чем думать об ошибках ИЕ.
Я этот глюк наблюдаю и в Сафари, скорее всего лишний раз закрыт или не закрыт ДИВ или другой элемент.
Посмотрите в какой кодировке отсылает вам сервер страничку
Юра, привет.
Есть еще одно решение в добавок к твоим двум.
В файле с cp1251 после русского комментария добавить пустой коммент:
/* русский коммент */ /**/
Проверено на Я.Ру :)
Это решение мне пришло в голову, когда я прочитал твое предположние, что съедается символ закрытия. После еще одного пустого коммента в той же строке – проблема исчезает.
даааа
все утро искал проблему – теперь нашел внятным языком и где )
спасибо друг
Спасибо!!!!!
Можно сделать проще, не комментировать css :)), а вообще чем проще тем лучше, назвать класс в тему и не надо комментировать, пример htmlverstka.ru
Не смешно.
Спасибо просто огромное!!!
А то стили упорно не хотели работать в 6 ослике именно по этой причине.
[…] А узнал я это с http://cssing.org.ua/2006/12/23/ie-css-russian-comments-bug/ […]
Оставить комментарий