Блог

Главная - Вопросы по программированию - Шаблон HTML5 условные комментарии

Шаблон HTML5 условные комментарии

#html #boilerplate #conditional-comments #selectivizr

#HTML #шаблон #условные комментарии #выборочный

Вопрос:

Я использую шаблон HTML5, и у меня никогда не было проблем с этим до сих пор, когда я начал использовать Selectivizr. По какой-то причине, которую я не понимаю, IE8 выдал ошибку Javascript.

После некоторого тестирования я заметил, что ошибка исчезла, когда я прекратил использовать условные комментарии браузера (в шаблоне), которые добавляют класс к html в зависимости от используемого вами браузера:

 <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Как я уже сказал, когда я удаляю приведенный выше код и заменяю его на <html> , все работает нормально.

Поскольку я не хочу полностью удалять условные комментарии (они помогают мне писать CSS для конкретного браузера), я подумал о том, чтобы сделать то же самое, но вместо того, чтобы применять это к html , я сделаю это для <body> :

 <!--[if lt IE 7]> <body class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <body class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <body class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <body class="no-js" lang="en"> <!--<![endif]-->

Кажется, все работает нормально, но поскольку я новичок, я просто хотел бы убедиться, что это обходное решение подходит? Или есть обратная сторона?

И еще один оффтопический вопрос: когда пользователь заходит на сайт с помощью Firefox или Chrome, что body будет «использоваться»? Я предполагаю, что он будет «использовать» body без класса?

Моя логика подсказала бы мне написать еще один условный комментарий, чтобы убедиться, что он «используется» body для всех других браузеров, однако в официальном шаблоне Boilerplate такого комментария не существует, и поэтому я думаю, что он не нужен… Почему бы и нет?

Ответ №1:

На самом деле они изначально были у нас в <body > теге. 🙂

Мы перенесли их по двум небольшим причинам:

  • Ошибка с несколькими именами классов в IE6
  • CMS, которые используют элемент body для своих собственных классов.

Вы можете переместить классы в <body> без особых проблем. Вы также можете оставить lang=en на элементе HTML, очистив все.

Больше подробностей здесь: https://github.com/h5bp/html5-boilerplate/issues/44

Комментарии:

1. Также, если бы вы могли отправить запрос в selectivizr по поводу вашей проблемы с IE8, вы должны. 🙂

2. Спасибо, что нашли время разобраться в этом! Пока я буду использовать body тег Я отправлю запрос в selectivizr, и в случае, если они смогут решить проблему, я отменю изменения.