― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 6 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2005年12月22日(木) 22:01 
オフライン
Moderator

登録日時: 2005年12月13日(火) 22:41
記事: 304
お住まい: Japan
こんばんわ。

画像を 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


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2005年12月22日(木) 22:30 
オフライン
Administrator

登録日時: 2005年6月23日(木) 23:29
記事: 2723
お住まい: 東京
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をうまく利用した」ものではありません。
現在のメジャーなブラウザの実装では問題ありませんが、将来修正されるととんでもないことになります。

_________________
[Desktop] Windows 10 Pro 22H2 (64bit) / Intel Core i7-2600 / Nvidia GeForce GTX 1650 GDDR6 / 32 GB Memory
[Laptop] Windows 10 Pro 22H2 (64bit) / Intel Core i5-520M vPro / Intel HD Graphics / 8 GB Memory
[Android] Android 13.0 (arm64) / Xperia 5 III (XQ-BQ42)
常用環境: Firefox ベータ版、リリース版 (Win64 x86-64, Android), Thunderbird ベータ版、リリース版 (Win64 x86-64)
テスト環境: Firefox (ESR, Nightly, Win64 x86-64, Android)

Cai/1.0 (Homo sapiens; N; Homo sapiens chemist; male; rv:0.0.4.1+)
-- いつまでたっても nightly


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2005年12月25日(日) 13:23 
オフライン
Moderator

登録日時: 2005年12月13日(火) 22:41
記事: 304
お住まい: Japan
こんにちは。

引用:
HTML,CSS的には当然の動作です。


もちろんそのような回答が来るであろうと予想していました。
正しい動作になるのは良いことだと思いますが、やりきれない気持ちでもあります。

引用:
ここにもあるようにtext-inentで負の値を指定してテキストを見えないようにするテクニックはいわゆる裏技のようなもので、決して「CSSをうまく利用した」ものではありません。
現在のメジャーなブラウザの実装では問題ありませんが、将来修正されるととんでもないことになります。


「うまく利用した」という表現は御幣があったかもしれませんね。
この裏技(ハックというんでしょうか?)があったおかげで、文書構造と視覚表現を分けたWebサイトを作成することができるようになったのも事実だと思います。
将来の仕様なんて誰も分かりませんから、今ある仕様に沿った形で作るしかないと思っています。

こういったCSSハックによる弊害はまだまだでてくるでしょうし、来年公開される IE7 の動向も分からないのでとりあえずこのままにしておく方向です。

ご回答ありがとうございました。


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2006年3月06日(月) 04:39 
オフライン

登録日時: 2005年9月03日(土) 00:01
記事: 54
フォーカスの点線を表示させたくなければ outline: 0 を追加してください。


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2006年3月18日(土) 12:44 
オフライン
Moderator

登録日時: 2005年12月13日(火) 22:41
記事: 304
お住まい: Japan
pswf さんが書きました:
フォーカスの点線を表示させたくなければ outline: 0 を追加してください。


ありがとうございます。

outline:0; を設定すると点線は消えますが、マウスを使わないで利用しているユーザーが現在どの部分にフォーカスがあるか分からなくなるようです。

text-indent: -xxxxemの弊害
http://www.fsiki.com/jet/archives/2006/ ... ndent.html


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2006年3月18日(土) 21:38 
オフライン

登録日時: 2005年9月03日(土) 00:01
記事: 54
Kuro さんが書きました:
outline:0; を設定すると点線は消えますが、マウスを使わないで利用しているユーザーが現在どの部分にフォーカスがあるか分からなくなるようです。


もちろんそうです。

私もマウスの代わりに Tab キーを多用する人で、そのことに気付いていますが、
ステータスバーにリンク先が表示されるから気にしてません。

点線が気になる、かつ上記の点も考慮するなら、別の image replacement を
お使いになるのが良いでしょう。


通報する
ページトップ
 プロフィール  
引用付きで返信する  
期間内表示:  ソート  
新しいトピックを投稿する トピックへ返信する  [ 6 件の記事 ] 

All times are UTC + 9 hours


オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[50人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

検索:
ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean