各ブラウザのconsole.log()実装状況

Firefox以外のモダンブラウザは、標準で装備していた。

ブラウザ	調査した バージョン	ログの表示方法	その他
IE	8	ツール ↓ 開発者ツール ↓ 「スクリプト」タブ	IE8以降で搭載。 String型にCASTされて出力される。 （Objectの中身は見られない。）
Firefox	6.0	アドオンのFirebugを使う
Chrome	11.0	ツール ↓ JavaScript コンソール ↓ 「Scripts」タブ
Safari	5.1	ページのメニューボタン ↓ 開発 ↓ JavaScriptのデバッグを開始 ↓ 「コンソール」タブ	Windows版で確認。
Opera	11.50	Operaボタン ↓ ページ ↓ 開発者用ツール ↓ Opera Dragonfly	バージョン11から搭載。 ObjectやArrayの中身は見られない。 CSS等のエラーとごっちゃに出るので見辛い...

所感

• SafariやOperaはコンソールの表示方法が分かり辛い。
• IEやOperaはObjectの中身を見られない（Operaは配列の中身も見られない）ので使い辛い。
• Operaは他のエラー（CSS等）と一緒に出力されるので見辛い。

参考

• JavaScriptでのデバッグ法 | Lifelog of nabsan_jp | nabsan_jp
• Loox Uと初音ミクで行こう！: Opera Dragonflyが始まっていた
• 第二回 関西アンカンファレンスに来ている(午後編 - tyoro.exe

Google Font APIはどうやってマルチブラウザ対応しているのか

WebFontsを読み込む場合のCSSの書き方はブラウザごとに異なるため、こんなsyntaxを使う必要がある。
しかし、Google Font APIで読み込むCSSをではそんな書き方はしていない。
そこで、試しにTangerineのCSSを各ブラウザで読み込んでみて、Google Font APIがどのようにマルチブラウザ対応をしているのか調べてみた。


IE 8

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE');
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはIE専用。
2行目のsrcはIE9用？


Firefox 4

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}

URLはChromeと同じ。


Chrome 10

@media screen {
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}

URLはFirefoxと同じ。
@mediaでscreenだけにしているのはAndroid対策か何かか？


Safari 5 (for Windows)

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafari用（Operaと共通）。アンダーバーで区切ってるのはiPhone用（iOS用？）が別にあったりするためか？


Opera 11

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}

URLはSafariと同じ。OperaもTrueType組。


まとめ
おそらくUser-Agentで判断して振り分けているだけのようだ。
フォントファイルは大きく分けると下記の3つに分かれるようだ。

• IE8-
  
• IE9+、Firefox、Chrome
• Safari、Opera
  

参考：Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax) - フォントブログ

CSSによる背景色グラデーションのブラウザごとの書き方

例えば、上から下に白から青のグラデーションを表示したい場合はこう書く。（省略可能なパラメータは省略した。）

/* IE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff)";

/* Firefox */
background: -moz-linear-gradient(white, blue);

/* Chrome, Safari */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(blue));

IE8は右辺をクォートで囲う必要があるので注意。

IE以外は、詳細な指定をすれば複数の濃淡を指定できたり球状の効果を表現できたりと色々できる。

Operaは未対応らしい。


参考
IE：Gradient - filter,フィルタ
Firefox：-moz-linear-gradient - MDC
Chrome, Safari：CSSでグラデーションを表現する - builder by ZDNet Japan

JavaScriptによって動的に CSSを追加する場合のブラウザごとの挙動の違い

（2011/3/29追記：Firefox4とChrome10の実験結果を追加。）


JavaScriptに続いて、動的にCSS（またはstyle要素）を追加する場合の、追加方法の違いによるブラウザごとの挙動も調べた。


調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）

window.onload = function() {
    // divのinnerHTMLに外部CSSの読み込みを突っ込む
    try {
        var div1 = document.createElement("div");
        div1.innerHTML = '<link rel="stylesheet" href="test1.css" />';
        document.body.appendChild(div1);
    } catch(e) {
    }
    
    // createElementでlink要素を生成して外部CSSを読み込む
    try {
        var link2 = document.createElement("link");
        link2.rel = "stylesheet";
        link2.href = "test2.css";
        document.getElementsByTagName("head")[0].appendChild(link2);
    } catch(e) {
    }
    
    // divのinnerHTMLに生のstyleを突っ込む
    try {
        var div3 = document.createElement("div");
        div3.innerHTML = '<style>#test3{ color: red }</style>';
        document.body.appendChild(div3);
    } catch(e) {
    }
    
    // createElementで生のstyleを追加する
    try {
        var style4 = document.createElement("style");
        style4.innerHTML = "#test4{ color: red }";
        document.getElementsByTagName("head")[0].appendChild(style4);
    } catch(e) {
    }
};

test1.css

#test1{ color: red }

test2.css

#test2{ color: red }

結果は下記の通り。

ブラウザ	1	2	3	4
IE 8	Ｘ	Ｏ	Ｘ	Ｘ
Firefox 3.6	Ｏ	Ｏ	Ｏ	Ｏ
Firefox 4.0	Ｏ	Ｏ	Ｏ	Ｏ
Chrome 4	Ｏ	Ｏ	Ｏ	Ｘ
Chrome 10	Ｏ	Ｏ	Ｏ	Ｏ
Safari 4	Ｏ	Ｏ	Ｏ	Ｘ
Opera 10.53	Ｏ	Ｏ	Ｏ	Ｏ

やはりIEではcreateElementで外部ファイルを読み込む方法しか動かない。
（ちなみに外部ファイルはhead要素でなくbody要素にappendChild()してもOKだった。）

でもChrome、SafariやOperaでほぼ動いたのが意外だった。


（2011/3/29 追記）
style 要素を動的に生成する - m2の方法を使えば、innerHTMLに生のstyleを突っ込むことができる。IE8、Firefox4、Chrome10、Opera11で動作することを確認した。

JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い

（2011/3/29追記：Firefox4の実行結果を追加）


JavaScriptによって動的にscript要素を追加する場合の、追加方法の違いによるブラウザごとの挙動を調べた。


調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）

<script>
function test(value) {
    document.getElementById("test").value += value + ",";
}

window.onload = function() {
    // innerHTMLに外部JSの読み込みを突っ込む
    try {
        var div1 = document.createElement("div");
        div1.innerHTML = '<script src="test1.js"><' + '/script>';
        document.body.appendChild(div1);
    } catch(e) {
    }
    
    // createElementでscript要素を生成して外部JSを読み込む
    try {
        var script2 = document.createElement("script");
        script2.src = "test2.js";
        document.body.appendChild(script2);
    } catch(e) {
    }
    
    // innerHTMLに生のJSを突っ込む
    try {
        var div3 = document.createElement("div");
        div3.innerHTML = '<script>test(3);<' + '/script>';
        document.body.appendChild(div3);
    } catch(e) {
    }
    
    // createElementで生のJSを追加する
    try {
        var script4 = document.createElement("script");
        script4.innerHTML = "test(4);";
        document.body.appendChild(script4);
    } catch(e) {
    }
};
</script>

test1.js

test(1);

test2.js

test(2);

処理が実行されたら、表示用のテキストボックス（id="test"）に番号が表示される。

結果は下記の通り。

ブラウザ	1	2	3	4	表示順
IE 6/8	Ｘ	Ｏ	Ｘ	Ｘ	2
Firefox 3.6	Ｏ	Ｏ	Ｏ	Ｏ	1→2→3→4
Firefox 4.0	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Chrome 4	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Safari 4	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Opera 10.53	Ｘ	Ｏ	Ｘ	Ｏ	2→4

innerHTMLにscript要素を入れるのはFirefox3.6以外では動かない。（セキュリティ的な施策？）
Firefoxでしか動作確認していないと嵌りそうだ。（というか嵌った。）

IEのことを考えると、生のcreateElementで生成したscript要素に生のJavaScriptを書くやり方も使えない。
（そんなことが必要になるケースは無いかもしれないが。）

素直にcreateElementで外部JSを読み込むのが良いようだ。


（2011/3/29 追記）
innerHTMLに生のJavaScriptを入れる方法としてinnerHTMLでscriptする - Thousand Yearsの方法があったようだ。
しかし現在のブラウザでは、IE8では動作したが、Firefox4、Chrome10、Safari5、Opera11では動作しなかった。

Googleサイト内検索結果でページの下端が切れる問題

検索向けAdSenseによるサイト内検索で、IE以外だと検索結果の下端が切れてしまう問題について。


【発生条件】
検索結果を自分のサイト内に表示する場合に起きる。
広告を右のみにした場合に起きた。広告を他の位置にしたら起きないかも。
Firefox（3.5）、Google Chrome（4）、Safari（4 Windows版）で発生を確認した。


【現象】
検索結果の内容に関わらず、検索結果を表示するiframe（JavaScript http://www.google.com/afsonline/show_afs_search.js により生成される）の高さが常に1200pxになる。
その結果、検索結果が少ない場合は検索結果とフッターの間に大きな空白ができる。反対に検索結果が多い場合、検索結果の下端に表示されるページ番号の表示が途中で切れてしまったり表示されなくなってしまう。（実際にはframeの外側にあり、かつframeのスクロールバーが非表示になっているので隠れているだけだが。）


IEの場合、iframe内の検索結果のHTMLのbody要素に、onloadで下記のようなJavaScriptを実行している。

onload="window.top.location='http://（親windowの検索結果のURL）#'+document.body.scrollHeight;"

これにより、親windowのURLの末尾にiframe内のコンテンツの高さを表すhashが付く。

そして検索結果のshow_afs_search.jsの方でlocation.hashを取得し、それをiframeの高さとして設定している。（0.01秒ごとに実行するという監視をしている。高さが取得できた後も。）
その結果、検索結果のコンテンツの内容に応じて検索結果をリサイズするというユーザーフレンドリーなユーザーインターフェイスを実現している。

試しに検索結果を表示した後、URLの最後に「#500」などと付けると検索結果の高さが変わる。これはFirefoxでも有効。


なぜIE以外ではiframe内のbodyのonloadのJavaScriptを付けないのだろう？Firefoxのセキュリティ等により無意味なんだろうか？


【回避策】
検索結果を表示するページのgoogleSearchXxxを設定しているJavaScriptに、下記のように高さを明示的に指定してあげる。

var var googleSearchFrameWidth = 800; //これは既存のコード
var googleSearchFrameHeight = 1210; //これを追加する

これにより、デフォルトの高さが1210pxになり、検索結果の下端が切れなくなる。

IEの場合、これでもリサイズが有効なので、この値は無視してリサイズしてくれると思う。

Safariだけ img要素の onloadの動きが違う

動的にsrc属性の値を変えた時、かつ変更前と変更後のsrc属性の値が同じ場合にonloadが実行されるかどうかが違う。
IE（7）、Firefox（3.5）ではonloadが実行されたが、Safari（4）では実行されなかった。


テスト用コード

<img src="test.jpg" alt="test"
 onload="alert('Loaded!')"
 onclick="this.src = 'test.jpg'" />

load時に"Loaded!"が表示されるのは同じだが、クリックした時にsrc属性に同じ値をセットしたタイミングで、Safariだけはonloadが走らない。
src属性にセットする値が元の値と別ならば、Safariでもonloadが走る。

こんな感じならSafariでもonloadが走る。

<img src="test.jpg" alt="test"

 onload="alert('Loaded!')"

 onclick="this.src = 'test2.jpg'" />

Safari曰く、「変わってないからloadしてない、だからonloadではない」そうだ。（推測）

Safariで bodyの onloadが効かないバグ？

Windows版Safariでのみ確認。
iframeを使っていて、かつiframeのsrcが有効なURLの場合に、body.onloadが実行されない。

<html>
<head><title>test</title></head>

<body onload="alert('loaded');"> <!-- これが実行されない！ -->

<iframe src="http://www.google.co.jp" />

</body>
</html>

srcを空にすればonloadは実行される。

バグなのか仕様なのか？

Windows版 Safari 3 beta （3.0.4） の日本語設定

デフォルトでは日本語が文字化けしていた。
日本語を読み書きするには下記の設定をする。

1. メニューから、「Edit」→「Preferences」→「Apperance」を選択
2. 「Default Encoding」を「Unicode (UTF-8)」等の日本語対応の文字コードにする
   
3. 「Standard font」は日本語対応のフォントにする

※3は不要かも。