何かと問題となるIE(Internet Explorer)に対して、<head>内に条件付きコメントを記述して、対策をします。
例えば、下記のようなものです。
<!--[if IE]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
これは全てのバージョンのIEに対してscript要素を読み込むという記述で、読み込んでいるのはHTML5の新要素を使えるようにする「html5.js」です。
IEだけに対する記述なので、FirefoxやSafari、Google Chromeといった他のブラウザには適用されません。
他にも下記のような記述の方法があります。
<IE以外のブラウザ>
<!--[if !IE]> ~ <![endif]-->
<IE 8>
<!--[if IE 8]> ~ <![endif]-->
<IE 8 未満のバージョン → IE 7 , IE 6 など>
<!--[if lt IE 8]> ~ <![endif]-->
<IE 8 以下のバージョン → IE 8, IE 7 , IE 6 など>
<!--[if lte IE 8]> ~ <![endif]-->
<IE 8 より上のバージョン → IE 9>
<!--[if gt IE 8]> ~ <![endif]-->
<IE 8 以上のバージョン → IE 8, IE 9>
<!--[if gte IE 8]> ~ <![endif]-->
IE 8でなくてもIE 7、IE 6を指定することも可能です。
IE 6だと下記のようなものを見かけます。
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('img');</script>
<![endif]-->
これはIE 6で透明pngを表示させるための「DD_belatedPNG.js」を読み込むという記述です。
このように何かと問題となるIEに対して、<head>内に条件付きコメントを記述して、対策をすることができます。
javascriptではなくcssを読み込むことも可能です。
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all" />
<![endif]-->
下記のコードはこのブログで使っているCSSで、前回の新規ウインドウ target=”_blank” で開くリンクにアイコンを追加するのとリンクのマウスオーバー時に青い斜線を表示させるのを指定したものです。
a:hover.new_window {
padding: 0 0 0 16px;
background: url(img/new_window.png) no-repeat 2px center, url(img/a_hover.png) repeat;
}
このようにCSS3では、「,(コンマ)」で区切ることによってbackgroundプロパティに複数の背景画像を指定することができます。
新規ウインドウ target=”_blank” で開くリンクにアイコンを追加する方法です。他にも方法があるみたいなので、僕がこのブログで使ってるものを紹介します。
1.jQueryのaddClassメソッドを使って、target=”_blank”のついているaタグに「new_window」というクラスを追加する。クラス名は任意です。
javascript
jQuery(function() {
jQuery('a[target=_blank]').addClass('new_window');
});
これをcommon.jsという名前で作成する。ファイル名は任意です。
2.cssでa.new_windowにスタイルを追加する。今回はリンクの前にアイコンを追加するので、下記のようにしています。
css
a.new_window {
padding: 0 0 0 16px;
background: url(img/new_window.png) no-repeat left center;
}
※paddingの値は各自で調整してください。
3.<head>内に下記を追加する。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
※jquery.jsというファイルはjQueryからダウンロードしたファイルのことです。
以上で新規ウインドウ target=”_blank” で開くリンクにアイコンが追加されます。