HiGash.Net ホームページへ戻る

Home [Blog] » Google Chromeでは input type=”search” が効かない?

Google Chromeでは input type=”search” が効かない?

Google Chromeでは input type=

先日ベータ版がリリースされたGoogleのWebブラウザ Google Chrome 。残念ながらまだWindows版しか公開されていないため、Macユーザーの僕はBoot Campで試しに触ってみた程度なのですが、第一印象としてはなかなか速そうですね。キビキビ動く感じがします。

Apple Safariと同じWebKitをレンダリングエンジンにしているものの、描画にSafariのような強い個性はありません。外観もとてもシンプルでいかにもGoogleらしい。ぼちぼちシェアを獲得するのではないかと思うので、Webデザイナーにとっては頭の痛い話ですがまたひとつ表示の確認を迫られるブラウザが増えそうです・・・。

今回のエントリーはそんなGoogle ChromeのユーザーエージェントやCSSに関して、まだベータ版ではありますが少しばかり調べた情報をまとめてみることにします。

Google Chromeのユーザーエージェント

まず、ユーザーエージェントに関する情報から。
Google Chromeの公式ページ には 「ウェブ開発者向けのよくある質問」 というページが設けられていて、そこに ユーザーエージェント についても書かれています。

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.X.Y.Z Safari/525.13.

ちなみに、同じWebKitブラウザであるSafari 3.1のユーザーエージェントは以下の通り。

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_2; en) AppleWebKit/525.9 (KHTML, like Gecko) Version/3.1 Safari/525.9

どうやらGoogle ChromeのWebKitはSafari 3.1の最新バージョンよりも少し古いバージョンのようです。
ブラウザの分岐をする場合は ユーザーエージェントに “Chrome” という文字列があるかないか を調べればよさそうですね。

CSSハックはSafari 3.1と同じ

レンダリングエンジンが同じなので、CSSハックも CSSハックまとめ[2008年7月版] にあるSafari 3.1と同じものが同じように適用されます。

http://higash.net/csshack/ をGoogle Chromeで表示してみると、Safari 3.1と同じCSSハックが適用されることを確認できます。

問題はSafariとGoogle Chromeでそれぞれ別のCSSを適用させたい場合にどうすればよいのかですが、残念ながらまだ適当なCSSハックを見つけられずにいます。現状、その必要が生じた場合はJavaScriptかPHPでユーザーエージェントによるブラウザ分岐を用いて読み込むCSSを切り替える方法しか思いつきません。

Google Chromeでは<input type=”search” />が効かない?

Web標準ではないWebKit独自の拡張タグに検索窓を実装する <input type=”search” /> があります。例えば、当サイトをSafariで閲覧した場合の検索ボックスのソースコードは下記の通りです。


<input type="search"  value="Keywords" name="s" id="s" »
onblur="this.value == '' ? this.value = 'Keywords' : true;" »
onfocus="this.value == 'Keywords' ? this.value = '' : true;" »
autosave="higash.net" results="5" />

Safari 3.1.2 キャプチャ

このソースコードを表示すると右のキャプチャ(Safari 3.1.2 / Windows XP)のようになります。inputの属性にautosaveとresultsを記述することで虫眼鏡アイコンと検索履歴(虫眼鏡アイコンをクリック)も表示できます。

属性値autosaveが検索履歴を保存する際の識別名(サイト名など)で、属性値resultsが検索履歴の保存件数です。また、当サイトではvalue=”Keywords”としていますが、placeholderという検索ボックス内の初期値を入力する属性値もあるようです。

Google Chrome キャプチャ

ところが、レンダリングエンジンが同じWebKitであるにも関わらず<input type=”search” />はGoogle Chromeには効かないようです。当サイトの場合、ユーザーエージェントに “AppleWebkit” の文字列が含まれている場合に<input type=”search” />を表示しているのですが、右のキャプチャの通りGoogle Chromeには検索窓が表示されません・・・。

Google Chromeのオープンソース・プロジェクトである Chromium でも<input type=”search” />に関する書き込み( Issue 17: input type=”search” does not act as expeted in other WebKit implementations )があり、それを読む限り開発サイドとしては<input type=”search” />を実装したいという意志があるようです。既存ブラウザと異なるレンダリング性能を持つブラウザとなってWeb開発者の悩みの種とならないようにとのことですが、果たして正式リリースで実装されるでしょうか。

とりあえずGoogle Chromeはまだベータ版ということで、検索ボックス表示のズレは今は見なかったことにします。
時間ができたら直してみようか、と。あと、フォームのパーツもSafariと違うからズレるんだよなぁ・・・。

(9/15追記:Google Chromeでの検索ボックスの表示崩れは修正しました)

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

このページへのコメント/トラックバックはありません・・・。

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20080911/google_chrome.html/trackback/

Preview

トラックバック
http://higash.net/20080911/google_chrome.html/trackback/

Page Top