IEに対する条件付きコメントを記述する。

2011.04.13 Wed

何かと問題となる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]-->


CSS3 backgroundプロパティに複数の背景画像を指定する。

2011.04.08 Fri

下記のコードはこのブログで使っている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” で開くリンクにアイコンを追加する。

2011.04.07 Thu

新規ウインドウ 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” で開くリンクにアイコンが追加されます。


page 4 of 41234