HAML 中的条件 HTML 标记答案

【问题标题】：Conditional HTML tag in HAMLHAML 中的条件 HTML 标记
【发布时间】：2012-10-03 20:29:51
【问题描述】：

如何格式化 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>，但这对我来说似乎不太理想。

【问题讨论】：

标签： html haml

【解决方案1】：

前三个非常简单，因为它们只是普通的 HTML cmets，您可以使用 Haml support for conditional comments：

/[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">

last one is a bit different。分解它，你想要的是围绕html 开始标签的两个cmets，所以第二个注释是html 元素的第一个内容。此外，您不能将 Haml 语法用于条件 cmets，您必须使用文字注释。在 Haml 中，这看起来像：

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

这将产生如下 HTML：

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

如果您愿意，可以使用whitespace removal syntax 使生成的 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>

另一种技术是使用Haml’s surround helper：

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

【讨论】：

精彩的答案。环绕替代品的道具。
@matt 最后一点不应该是：?
@nozpheratu 你的意思是它应该有!(IE) 部分吗？不一定——非 IE 浏览器无论如何都会忽略该条件并呈现内容，而 IE 浏览器将被现有条款覆盖。我想你可以将它添加到文档中。

【解决方案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]

【讨论】：

非常接近！虽然最后一行有点不同。不过可能仍然有效？
已测试；结果与您想要的 HTML 完全相同（显然没有对齐；没什么大不了的），并且它具有语法一致性的优势。如果你使用 Sublime Text，你肯定会想要 HTML2Haml 插件——它完美地解析了我的整个布局页面，包括你想要的这个确切的例子（我也使用了 Boilerplate）。对于网页版，html2haml.heroku.com