なつみかん。

アニメを見て気が向いたときに聖地巡礼しています。

Safari限定、input type=”search”



主にDashboardで使われるSafariの独自拡張 <input type="search"/> ですが、そろそろWeb上でも普及してほしいのでエントリしてみます。
コレを使うメリットとしては
  1. 何と言っても見た目がカッコイイ
  2. 虫眼鏡付きなので検索窓と分かりやすい
  3. 検索履歴およびクリア(×)ボタンが付く事によるユーザビリティの向上
  4. とにかくカッコイイ

などが挙げられます。Safari限定だしValidな文書じゃなくなると言われたらそれまでですが、CaminoやIEなど他のブラウザでは普通に長方形のフォームになりますし、特にMacネタの多いブログ(サイト)ではMacユーザーの比率も多めだと思いますので、検索窓にコレを採用してみる価値はあると思います。

以下、属性など。

属性一覧


autosave
自分のサイト名(他のサイトと区別するための任意の文字列)

results
検索履歴に残す数

placeholder
初期値。検索欄にグレーで表示される文字列

記述例


<input type="search" results="5" autosave="tangerine" placeholder="サイト内検索" />


※虫眼鏡を出すには autosave および results が必須です。

| WebDesign | このエントリーをはてなブックマークに追加

SEARCH

RECENT ENTRIES

RECOMMEND

B071KZC6CY
「君の名は。」Blu-rayコレクターズ・エディション 4K Ultra HD Blu-ray同梱5枚組 (初回生産限定)

RECOMMEND

4041047803
新海誠監督作品 君の名は。 公式ビジュアルガイド

RECOMMEND

457531188X
この世界の片隅に 劇場アニメ公式ガイドブック

PROFILE

LINKS

RSS & CC