Подтвердить что ты не робот

Условный тег HTML в HAML

Как мне отформатировать HAML для вывода стиля, аналогичного условным тэгам HTML, используемым для таргетинга через браузер?

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

Если я добавлю условное выражение, оно также завершает всю страницу в условном выражении. Я подумал об использовании фильтра HAML :plain вверху и вручную добавив </html> внизу, но для меня это кажется менее идеальным.

Ответ 1

Первые три из них довольно просты, так как они представляют собой просто HTML-комментарии, и вы можете использовать поддержку Haml для условных комментариев:

/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">

Последний немного отличается. Разбирая его, вы хотите, чтобы два комментария окружали тег html, поэтому второй комментарий является первым содержимым элемента html. Кроме того, вы не можете использовать синтаксис Haml для условных комментариев, вам придется использовать буквальный комментарий. В Haml это выглядело бы так:

<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}
  <!--<![endif]-->

Это создаст HTML следующим образом:

<!--[if gt IE 9]><!-->
<html class='no-js' lang='en'>
  <!--<![endif]-->

Если вы хотите, вы можете использовать синтаксис удаления пробелов, чтобы сделать сгенерированный HTML больше похожим на ваш пример:

<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}<>
  <!--<![endif]-->

Объединяя все это:

!!!
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}<>
  <!--<![endif]-->
  content here

который производит:

<!DOCTYPE html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->
content here</html>

Альтернативным методом было бы использовать помощник Хэмлса:

= surround "<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->", "</html>" do
  content here

Ответ 2

<!doctype html>
/[if lt IE 8] <html class="no-js ie7 oldie" lang="en">
/[if IE 8] <html class="no-js ie8 oldie" lang="en">
/[if IE 9] <html class="no-js ie9 oldie" lang="en">
/ [if gt IE 9]><!
%html.no-js{:lang => "en"}
  / <![endif]