HAML中的条件HTML标记

typ*_*ror 21 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]-->
Run Code Online (Sandbox Code Playgroud)

如果我添加一个条件,它也会将整个页面包装在条件中.我想过:plain在顶部使用HAML的过滤器并</html>在底部手动添加,但这对我来说似乎不太理想.

mat*_*att 44

前三个非常简单,因为它们只是简单的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">
Run Code Online (Sandbox Code Playgroud)

最后一个是有点不同.打破它,你想要的是围绕html开始标记的两条评论,所以第二条评论是html元素的第一个内容.此外,您不能将Haml语法用于条件注释,您必须使用文字注释.在Haml,这看起来像:

<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}
  <!--<![endif]-->
Run Code Online (Sandbox Code Playgroud)

这将产生这样的HTML:

<!--[if gt IE 9]><!-->
<html class='no-js' lang='en'>
  <!--<![endif]-->
Run Code Online (Sandbox Code Playgroud)

如果您希望可以使用空白删除语法来使生成的HTML更像您的示例:

<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}<>
  <!--<![endif]-->
Run Code Online (Sandbox Code Playgroud)

把它们放在一起:

!!!
/[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
Run Code Online (Sandbox Code Playgroud)

产生:

<!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>
Run Code Online (Sandbox Code Playgroud)

另一种技术是使用Haml的环绕助手:

= surround "<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->", "</html>" do
  content here
Run Code Online (Sandbox Code Playgroud)

  • @nozpheratu你的意思是它应该有`!(IE)`部分?不一定 - 非IE浏览器无论如何都会忽略条件并呈现内容,IE浏览器将被现有条款所涵盖.你可以添加它作为我想的文档. (2认同)