21

クロスブラウザー ターゲティングに使用される条件付き HTML タグと同様のスタイルを出力するには、HAML をどのようにフォーマットしますか?

<!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>し、下部に手動で追加することを考えましたが、これは理想的とは言えません。

4

2 に答える 2

44

最初の 3 つは単純な 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開始タグを囲む 2 つのコメントが必要になるため、2 番目のコメントが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>

代わりのテクニックは、Haml のサラウンド ヘルパーを使用することです。

= surround "<!--[if gt IE 9]><!--><html class='no-js' lang='en'><!--<![endif]-->", "</html>" do
  content here
于 2012-10-15T17:01:57.807 に答える
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]
于 2012-10-13T02:10:20.747 に答える