要約: Modernizrを ダウンロードたいてい 後 ヘッダーに 挿入して, js 方で if(Modernizr.input.placeholder == false){ /*ブラウザーが HTML5 プレース ホルダー 機能を 支援するの ない 時 使う コードを 入れる*/} 形式で 使う.

どうする Modernizrを 使うように なったのか?

鳥で 製作する ウェブサイトに 野心を燃やすように プレース ホルダー 機能を 使って 見ようと した.

プレース ホルダーは インプット ボックス 中に 案内文が 浮かんで あってから 入力を のために クリックを すれば 案内文が 消える 機能を 言う. ラベルを 貼り付け ための 空間が 別途で 必要なの ないので 空間 活用に 效率的だ.

ところが HTML5からは placeholder 機能を 基本に 支援する. 今 私が これ 文を 使いながら 使って ある クロムは 5 betaから placeholder 機能を 支援したと する. ファイアフォックスも 3.7から 支援した.

こんなに ブラウザーが 基本的に 支援する 場合には 簡単に 下のように 入力すれば なる.

<input type="text" placeholder="電子メールを 入力してください" name="email"/>

ところが 当然 私たちの IE シリーズは placeholder 機能を 支援するの ない.(IE9度 言葉だ.)

定木, それでは 今 js プラグインを 使うと 割 時が 来た.

ところが 既往なら HTML5 機能が ある ブラウザーでは HTML5 機能を 利用して placeholder を 具現して, そうなの ない ブラウザーでばかり jsを 利用して 具現して たい. それが 使用者たち トラフィックに ダル 負担になったら 言葉だ. 具現する 方でも ブラウザー 基本 機能を 利用すれば もっと 效果的に プレースホルダーを 使う 数 ある.

(プレースホルダーが ナルコディングを しようと すれば 意外に 気難しい 部分が 多い. 一応 inputに フォーカスが 入って来た 時 プレースホルダーを 飛ばすと する. 何も 入力するの なくて 再び blur街 なれば プレースホルダーを いかすと する. しかし 入力する 中間に 出れば プレース ホルダーを いかせば 中 なる. プレースホルダーで valueを 使って, focus イベントに valueを 消すように 作って 頭面 中 なる. 何か 入力した 使用者が 修正を のために 再び inputに フォーカスを 与える 瞬間 使用者が もう 入力して 置いた 蟹 飛ぶこと だからだ. したがって label タグの 位置を 調整して プレース ホルダーを 作る 蟹 良いと する 人も あった.

プレース ホルダー 機能を 扱った また 一つの 詳細な 文は Adding Cross Browser Placeholders To Your Form Fields)

こういう 時 ところで Modernizr ライブラリを 使えば なる.(Modernizr ライブラリを 使うの なくて プレースホルダー 機能 支援 可否を 感知する 方法度 ある.) プレース ホルダー 機能を ためには, jQuery placeholder pluginを 使った.(これ ライブラリは placeholder オトリビュトの 値段を valueに つまんで 入れて 使うように する. ところが, こんなに 処理する 望むに もし 必須で 入力すると する 場合である inputに これ ライブラリを 使うように なれば IEでは 使用者が 値段を 入力するの ない 場合にも ベルリデイションを パスするように なる. したがって 別に 措置を すると するように なる.)

(上で 指摘した jQuery placeholder plugin義 限界を 乗り越えること ためには In-Field-Labels-jQuery-Plugin を 使って 見る のも 良い の ようだ. これ プラグインは label 要素を 利用して プレースホルダー 效果を 出す. ジャバスクリプトを 利用する ので, HTML5 ネイティブ 機能を 利用するの できないという 点が あるが, Modernizrわ 交ぜて 使えば 立派な のだ.)

Modernizr ライブラリ 使い方

Modernizr ライブラリは HTML5 機能を 具現して 与える ライブラリが ない. 使用者が 使用中の ブラウザーが HTML5義 特定 機能を 支援するのか 感知して 与える 役目を する.

一応 modernizr-x.x.min.js を ページに 呼んで来れば あらゆる 蟹 終りだ. 別に 呼び出してくれて 割 蟹 ない.

それでは ファイアバグを 通じて たいてい 番(回) 見よう. ジャバスクリプト コンソールを 活性化した 次, Modernizr して 入力すれば Modernizr 客体が 持って ある 多様な 変数を 会う 数 ある. 名前が 非常に 直観的なので 選んで 使えば なる.

私は Modernizr.input.placeholder と 使った. ファイアバグ コンソールで エンターを 打って 見れば true私 falseを 返還するという のを 目で 確認する 数 ある.

それでは 今 使い方を 気づいた ことだ.

ところで 下と ような コードを 使う.

if(Modernizr.input.placeholder == false){
  /*ブラウザーが HTML5 プレース ホルダー 機能を
  支援するの ない 時 使う コードを 入れる*/
}

私は jQuery placeholder pluginを 使ったので, 下と 一緒に コードを 作成した.

if(Modernizr.input.placeholder == false){
	document.write('<script src="jquery.placeholder.js" type="text/javascript"></script>');
	$("input[placeholder]").placeholder();
}

$("input[placeholder]")増えた placeholderという オトリビュトを 持った inputを 選択する jQuery 選択者だ.

こんなに すれば, ブラウザーに よって 選択的に HTML5 機能を 支援する ガール 立派に 割 数 ある!

勿論 ジャバスクリプトを 消して 入って来たら 挫折だ;; 以上.

CSS方 活用法

また Modernizr増えた HTML5 支援 可否に よって htmlに classを 付けて 与える. すぐ ファイアフォックス4で Modernizrを 駆動して 見れば, 下のように 出る.

html タグに ありったけ クラスが 付いた ガール 確認する 数 ある.

no-cssreflections という class街 見える ことだ. css reflection を 支援するの ないという 意味で 見れば なる.(私も それが 何やらは 分からない.)

それでは, CSS方に こういう 式で 少なくて 与えれば なる ことだ.

.no-cssreflections .target {
  /* cssreflectionsを 支援するの ない 場合 スタイル */
}
.cssreflections .target {
  /* cssreflectionsを 支援する 場合 スタイル */
}

以上!

やっぱり もっと 多い 情報は Modernizr Docsを 参考する 蟹 良いだろう.

- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。