HAML中的条件HTML标签 [英] Conditional HTML tag in HAML
问题描述
如何将HAML格式化为输出类似于用于跨浏览器定位的条件HTML标记的样式？
How would I format HAML to output a style similar to the conditional HTML tags used for cross-browser targeting?
<!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> ，但这对我来说似乎并不理想。
If I add a conditional, it wraps entire page in the conditional as well. I thought about using HAML's :plain filter at the top and manually adding </html> at the bottom, but this seems less than ideal to me.
推荐答案
其中前三个非常简单，因为它们只是简单的HTML注释和您可以使用 Haml支持条件评论：
The first three of these are pretty simple, as they are just plain HTML comments and you can use the 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">
最后一个有点不同。打破它，你想要的是围绕 html 开始标签的两条评论，所以第二条评论是 html 元素。你也不能使用Haml语法来进行条件注释，你必须使用文字注释。在Haml中，这看起来像：
The last one is a bit different. Breaking it down, what you want is two comments surrounding the html opening tag, so the second comment is the first content of the html element. Also you can’t use the Haml syntax for conditional comments, you’ll have to use a literal comment. In Haml this would look like:
<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}
<!--<![endif]-->
这将生成如下HTML：
This will produce HTML like this:
<!--[if gt IE 9]><!-->
<html class='no-js' lang='en'>
<!--<![endif]-->
如果您想要，您可以使用空格删除语法，使生成的HTML更像您的示例：
If you wanted you could use the whitespace removal syntax to make the generated HTML more like your example:
<!--[if gt IE 9]><!-->
%html{:class => 'no-js', :lang => 'en'}<>
<!--<![endif]-->
把它放在一起：
Putting it all together:
!!!
/[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
产生：
which produces:
<!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的包围帮手：
An alternative technique would be to use Haml’s surround helper:
= surround "<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->", "</html>" do
content here
这篇关于HAML中的条件HTML标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
