web-dev-qa-db-ja.com

Hamlの「[！IE]」条件付きコメント

HAMLドキュメントには、次のものがあります。

/[if IE]
  This is IE
/[if !IE]
  This is not IE

最初の条件はIEで適切に評価されます（おそらくFirefoxとChromeでは、「これはIEです」はこれらのブラウザではレンダリングされないためです）。ただし、2番目の条件はで適切に評価されないようです。 FirefoxまたはChrome、「これはIEではありません」はレンダリングされません。

私は何か間違ったことをしたと思います。何か案は？

internet-explorerconditionalhaml
30
BronzeGate

IE条件付きコメントを使用する場合、注意する必要がある2つの異なるタイプがあります。まず、コンテンツ全体がHTMLコメント内（<!--と-->の間）にあるが、次の条件のためにIEがそれを読み取る場合。

<!--[if IE]>
  This is inside a HTML comment, so most browsers will ignore it, but IE will
  interpret it.
<![endif]-->

もう1つのタイプは、not単一のコメントですが、ブラウザに表示される一部のコンテンツは、IEを無視する2つのコメントで囲まれています。それ：

<!--[if !IE]> -->
  This is not a HTML comment, so browsers should see it, but IE will ignore it.
<!-- <![endif]-->

（SOのコードの強調表示は違いを示しています。一番上のものはすべてコメントであるためすべてが灰色ですが、これではコメントではないためテキストが暗くなります）。

IE条件付きコメント のHamlサポートは、ブロックコメントを作成するための構文の一部であるため、第1種の作成にのみ役立ちます。 （ここにあるように）第2の種類に使用しようとすると、次のようになります。

<!--[if !IE]>
  This is inside a HTML comment, so other browsers will ignore it.
  IE will also ignore it, as the conditional states !IE.
  So everything ignores it.
<![endif]-->

これは事実上無条件のコメントです。

Hamlで[if !IE]タイプを使用するには、おそらく手動で行う必要があります。

%p Some other content
<!--[if !IE]> -->
%p
  Here's some content that shouldn't appear in IE.
<!-- <![endif]-->

次のように、Haml surround helper を利用することもできます。

%p Some other content
=surround '<!--[if !IE]> -->', '<!-- <![endif]-->' do
  %p
    Here's some content that shouldn't appear in IE.

（Railsを使用している場合は、文字列にhtml_safeを使用する必要があります（例：surround '<!--[if !IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do））。

これを頻繁に使用する場合は、この呼び出しをsurroundにラップするヘルパーメソッドを作成する価値があるかもしれません。

92
matt

条件のリストについては：

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

  %head
    %title Yinlang
1
Anja Ishmukhametova

回答済みですが、TL; DRバージョンをお探しの方へ：

/[if IE]
  This will only be rendered in IE

/[if lte IE 8]
  This will only be rendered in IE 8 or less

= surround '<!--[if !IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do
  This will only be rendered in NON-IE browsers.
1
Seth Jeffery

私はRailsアプリを実行していますが、@ mattが彼の回答で提案した内容に従って、ビットの問題が見つかりました。以下の問題が見つかりました。

HAML

!!!
= surround '<!--[if !IE]> -->'.html_safe, '<!-- <![endif]-->'.html_safe do
  %html.no-js{:lang => 'en'}
  %head
  %body

ブラウザがHTMLをレンダリングする方法は次のとおりです（最後に終了タグを付けず、行自体を宣言するときに追加します）

<!DOCTYPE html>
<!--[if !IE]> --><html class='no-js' lang='en'></html>
<head>..</head>
<body>..</body>

だから、これが私にとってうまく機能しているコードです。

!!!
:plain
  <!--[if !IE]><!-->
%html.no-js{:lang => 'en'}
  / <![endif]
0
Syed