| MozillaZine.jp フォーラム https://forums.mozillazine.jp/ | |
| ImageReplacementを利用したサイトでフォーカスさせると点線が表 https://forums.mozillazine.jp/viewtopic.php?f=2&t=440 | ページ 1 / 1 | 
| 作成者: | Kuro [ 2005年12月22日(木) 22:01 ] | 
| 記事の件名: | ImageReplacementを利用したサイトでフォーカスさせると点線が表 | 
| こんばんわ。 画像を css の background プロパティを使用して表示させ、テキストは text-indent プロパティの負の値(-2000px)を使用してブラウザで見えない領域までおいやる方法、 いわゆるImage Replacement を利用しているサイトで、フォーカスを合わせたりマウスでクリックすると、点線が表示されてしまいます。 再現するサイトは以下の通り。 ■Jeffrey Zeldman Presents The Daily Report http://www.zeldman.com/ ※「The daily report」「designing with web standards」のナビゲーションをクリック。 ■Stopdesign http://www.stopdesign.com/articles/replace_text/ ※「stopdesign」のロゴをクリック。トップページ以外であれば再現します。 ■Mozilla Japan http://www.mozilla-japan.org/ ※「Mozilla」のロゴをクリック。 Firefox 1.5 で outline-color, outline-style, outline-width, outline-offset, outlineに対応したおかげのせいだということは調べていくうちに分かりました。 でも、そのテクニックを使っている(特に CSS をうまく利用した海外の多くのサイト)を Fx1.5 で見ると、点線が表示されてしまう有様です。 私も仕事で同様のテクニックを利用しておりまして、Fx1.5 で今まで構築したサイトを見ると点線が表示されてしまいます。 この点線を消していく作業にまた時間を費やすのを考えると、頭が痛くなります。 この新しい仕様を、表示されなかった 1.0.7 の時の仕様に戻せないのでしょうか。 よろしくお願いいたします。 ----以下、参考にしたサイト ■CSSメモ: Firefox 1.5での新機能\r http://f57.aaa.livedoor.jp/~motohiko/CS ... Fx1.5.html ■Firefox 1.5と「outline」 http://www.cybergarden.net/blog/2005/12 ... tline.html ■outline doesn't include larger descendants of inline elements https://bugzilla.mozilla.org/show_bug.cgi?id=133165 ■Accessible Image Replacement http://phark.typepad.com/phark/2003/08/ ... _imag.html | |
| 作成者: | Cai [ 2005年12月22日(木) 22:30 ] | 
| 記事の件名: | Re: ImageReplacementを利用したサイトでフォーカスさせると点線 | 
| Kuro さんが書きました: こんばんわ。 画像を css の background プロパティを使用して表示させ、テキストは text-indent プロパティの負の値(-2000px)を使用してブラウザで見えない領域までおいやる方法、 いわゆるImage Replacement を利用しているサイトで、フォーカスを合わせたりマウスでクリックすると、点線が表示されてしまいます。 テキストは見えないだけでウィンドウのはるか左のほうに存在しているので、クリックしたときに点線の矩形で囲まれるのは仕様です。 HTML,CSS的には当然の動作です。 Kuro さんが書きました: でも、そのテクニックを使っている(特に CSS をうまく利用した海外の多くのサイト)を Fx1.5 で見ると、点線が表示されてしまう有様です。 私も仕事で同様のテクニックを利用しておりまして、Fx1.5 で今まで構築したサイトを見ると点線が表示されてしまいます。 この点線を消していく作業にまた時間を費やすのを考えると、頭が痛くなります。 この新しい仕様を、表示されなかった 1.0.7 の時の仕様に戻せないのでしょうか。 よろしくお願いいたします。 http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2005092101 ここにもあるようにtext-inentで負の値を指定してテキストを見えないようにするテクニックはいわゆる裏技のようなもので、決して「CSSをうまく利用した」ものではありません。 現在のメジャーなブラウザの実装では問題ありませんが、将来修正されるととんでもないことになります。 | |
| 作成者: | Kuro [ 2005年12月25日(日) 13:23 ] | 
| 記事の件名: | ありがとうございます | 
| こんにちは。 引用: HTML,CSS的には当然の動作です。  もちろんそのような回答が来るであろうと予想していました。 正しい動作になるのは良いことだと思いますが、やりきれない気持ちでもあります。 引用: ここにもあるようにtext-inentで負の値を指定してテキストを見えないようにするテクニックはいわゆる裏技のようなもので、決して「CSSをうまく利用した」ものではありません。 現在のメジャーなブラウザの実装では問題ありませんが、将来修正されるととんでもないことになります。 「うまく利用した」という表現は御幣があったかもしれませんね。 この裏技(ハックというんでしょうか?)があったおかげで、文書構造と視覚表現を分けたWebサイトを作成することができるようになったのも事実だと思います。 将来の仕様なんて誰も分かりませんから、今ある仕様に沿った形で作るしかないと思っています。 こういったCSSハックによる弊害はまだまだでてくるでしょうし、来年公開される IE7 の動向も分からないのでとりあえずこのままにしておく方向です。 ご回答ありがとうございました。 | |
| 作成者: | pswf [ 2006年3月06日(月) 04:39 ] | 
| 記事の件名: | Re: ImageReplacementを利用したサイトでフォーカスさせると点線 | 
| フォーカスの点線を表示させたくなければ outline: 0 を追加してください。 | |
| 作成者: | Kuro [ 2006年3月18日(土) 12:44 ] | 
| 記事の件名: | Re: ImageReplacementを利用したサイトでフォーカスさせると点線 | 
| pswf さんが書きました: フォーカスの点線を表示させたくなければ outline: 0 を追加してください。 ありがとうございます。 outline:0; を設定すると点線は消えますが、マウスを使わないで利用しているユーザーが現在どの部分にフォーカスがあるか分からなくなるようです。 text-indent: -xxxxemの弊害 http://www.fsiki.com/jet/archives/2006/ ... ndent.html | |
| 作成者: | pswf [ 2006年3月18日(土) 21:38 ] | 
| 記事の件名: | Re: ImageReplacementを利用したサイトでフォーカスさせると点線 | 
| Kuro さんが書きました: outline:0; を設定すると点線は消えますが、マウスを使わないで利用しているユーザーが現在どの部分にフォーカスがあるか分からなくなるようです。 もちろんそうです。 私もマウスの代わりに Tab キーを多用する人で、そのことに気付いていますが、 ステータスバーにリンク先が表示されるから気にしてません。 点線が気になる、かつ上記の点も考慮するなら、別の image replacement を お使いになるのが良いでしょう。 | |
| ページ 1 / 1 | All times are UTC + 9 hours | 
| Powered by phpBB® Forum Software © phpBB Group http://www.phpbb.com/ | |