REDLINE MAGAZINE | 油断大敵 focusさん

油断大敵 focusさん

WindowsにSafariがインストールできるようになって、試してみた方もいらっしゃると思いますが、自分もSafari3を入れてみました。お友達に「Safari3では検索ボックスは酷くなかったね」と前回発覚した「検索フォーム続編：Safari だと酷すぎる」問題がバージョン3では解決している旨を聞いて安心しきっていたのですが、別のひどい事態が発生していることを教えてもらいました。（ありがとうございます！）

それがこれ。

そういえばSafariではブルーのアウトラインが出るんでしたね・・・。input周りをCSSでいじいじしてしまったが故の弊害です。以前Safariで見た検索ボックス部分のキャプチャをとって頂いた時の画像がこれなんですが、

今回バージョン3で背景画像は入るようになったものの、focus時の枠線も自動的にそのデカさになる、と。考えたら当たり前の事ですよね。全然そこまで頭回ってなかったです。

で、CSSを修正しました。

修正と言っても、今回の場合は不自然なアウトラインを消すしかないわけですが、本来ならばこういう部分のアウトラインはユーザー配慮の視点から行くと消さない方がいいんだろうな・・・というのも頭をよぎりつつ、背景に画像いれてhover時やfocus時に背景画像も変わるから分かるよ、きっと分かるよ！と自分に言い訳してサクっとアウトラインの枠線を消しました。

#searchbox input.text:focus{
	background:url(xxx.gif) no-repeat;
	outline: none;
	}

たった一行だけですけど、outline: none;を追加しました。これでSafari3でも酷くなくなりました。

今回の教訓

サイトを作ってて、hover時の確認は割と目につくというか、必ず確認する項目だったりするんですが、focus時って今までほとんど確認してこなかったかも。検証するブラウザがどんどん増えたり、対応してるCSSプロパティが充実してくるのに合わせて自分も確認する項目をちやんと考え直していかないとなぁ、と思いました。

ついでにアウトラインの特徴とか

手持ちの詳解HTML&XHTML&CSS辞典を読み直してみるとこんな事が書いてありました。

• ボックスのボーダーと違い、常に四角形で表示されるとは限らない
• 上下左右を個別に指定することはできない
• アウトラインはボーダーのすぐ外側の位置に表示されるがボックスとは無関係に常にその上に重ねて表示される。（ボックスなどの大きさが変わったり位置がズレても再描写は行われない。）

他人のCSSフレームワークを見てみると

最近各種SBMでCSSのフレームワークについてのブックマークをよく見かけたので海外のサイト数箇所からダウンロードして拝見したりしてました。私がダウンロードしたファイルはどこのフレームワークにもブラウザのデフォルト設定をリセットするreset.cssみたいなのが同梱されてたんですが、 『:focus { outline: 0; } 』 この指定が最初から入っているものもありました。

個人的な感想としては全てのアウトラインを最初からすべてnoneにしてしまうのは少し抵抗があったりするんですが、場合によってはそうやって意図せぬ謎のアウトラインが出てこないように予めリセットしておくのも使えるネタなのかなぁ、とか。

こんなアウトラインの話を書きつつ、aタグの中身テキストをtext-indentで画面外に飛ばしたりなんかした時の点線ガーーについてはあまり気にならなかったりする私ですが。

2007年08月06日 17:27 | Red | パーマリンク