2011/2/21時点、Firefox のみバグのある word-wrap: break-word

何故か Firefox のみ table 要素の中で word-wrap: break-word を使うと、
全く動作しなくなります。対象の幅が固定の場合は問題無く動くと思います
が、ブラウザの表示部分によってそれぞれのセル表示位置の変わるような
複雑な処理に対応できていないような気がします。

おそらく、空白を含む場合は問題無いかもしれませんが、だからこそ致命的
で、デザイナが意図せぬ画面の崩れを予想できない可能性があります。

2011/2/22

今日、ブログの本文で PRE 内に適用しようとしたが、Firefox のみダメでした。
日本語で幅しているにも関わらずです。


Microsoft : wordWrap Property (A, ABBR, ACRONYM, ...)

word-wrap - MDC Doc Center

<style type="text/css">
.WordWrap3 {
	word-wrap: break-word;
	float: right;
	width: 33%;
}
</style>
<table><tr><td>
<div class="WordWrap3" style='background-color:#777'>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
</div>
<div class="WordWrap3" style='background-color:#999'>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  
</div> 
<div class="WordWrap3" style='background-color:#bbb'>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  
</div> 
</td></tr></table>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Favicon の動的変更の裏側

Favicon の動的変更( IE8、Firefox、Chrome、Opera、Safari )

ここに至る前は、単純に href を書き換えていたのですが、それで変更されるのは、
Firefox と、Opera でした。IE8 と Google Chrome ではどうもダメなようので、一度
link 要素を削除してみると、IE8 でうまく変更されました。Firefox と Opera でも
試したのですが、うまく行っていました。

しかし、Google Chrome と Safari は変更されないので、英文の Google で検索すると、
以下のサイトがヒットし、試してみるとうまく変更されます。

Dynamic Favicons

いったい何が違うのだろうとコードを見てみると、type="image/x-icon" のセットでした。
ここのコードは大げさなので、自分のコードでやってみるとうまく変更されました。


ここのページも変更しておきます

ブラウザ別、localStorage の削除に関わる所作

Microsoft では、DOM ストレージの概要 の最後で以下のように書かれています。

記憶域のクリア

データを参照する最後のウィンドウが閉じられた時点で、セッション状態が解除されます。
 ただし、Internet Explorer で [ツール] メニューの [閲覧履歴の削除] をクリックし、
[Cookie] チェック ボックスをオンにして [削除] をクリックすることで、いつでも記憶
域をクリアできます。 これにより、[お気に入り] フォルダー以外のすべてのドメインに
ついて、セッション記憶域およびローカル記憶域がクリアされ、レジストリ内のストレー
ジ クォータがリセットされます。 ソースにかかわらず、すべての記憶域を削除するには、
[お気に入り Web サイト データの保持] チェック ボックスをオフにします。


IE を普段使っているので、実際に試したわけではありませんが、明記されている以上削除
されると思います。実際、仕様なのだろうと、Firefox や Google Chrome で試してみたら
削除されました。しかし、Safari では一括でストレージを削除する方法は無く、開発者ツ
ールで個別に削除するしか無かったので、この場合はアドレスバーまたは開発者ツールで
ドメイン単位に以下のコマンドを入力します。

アドレスバーの場合
javascript:void(localStorage.clear())

開発者ツールの場合
localStorage.clear()

これは、全てのブラウザで使えるはずなので、ドメイン単位で削除したい場合に利用でき
ます。

Opera も、クッキーとストレージは連動しておらず、そもそもクッキーの一括削除の機能
が一般設定では無く、開発者ツールの Dragonfly から削除するようになっています。

localStorage を使用したパーソナルリンクサービス


IE8



設定または、CTRL+SHIFT+DEL で表示されるダイアログでクッキーを削除するチェックボッ
クスにチェックして( さらに先頭のお気に入りを残すチェックを外す )削除すると、
localStorage は全て削除されると思われます。保存場所は Cookie フォルダには無く、実
際の保存場所は発見できませんでした。

IEのクッキーフォルダを開くスクリプト

開発者ツールにも、localStorage に対する処理メニューは無く、ドメインでクッキーを削
除(キャッシュメニュー)してみましたが、影響しませんでした。


Firefox

設定ダイアログから、Cookie を個別に参照して個別に削除可能ですが、そのダイアログで
クッキーを全て削除する機能があるので実行すると、localStorage も削除されます。これ
は Firefox の仕様で、ドメインのくくりで クッキーとlocalStorage がツリー内で管理さ
れている為で、このダイアログからドメイン単位の localStorage を削除する事も可能で
す。


Google Chrome

Firefox と同様、クッキーとlocalStorage をドメイン単位で管理している為、クッキーを
全て削除すると localStorage も削除されます。ここで、ドメイン単位の localStorage 
を削除できますが、開発者ツールを使うと、データ単位で表示して削除する事ができます。

Google Chrome の Local Storage フォルダを開くスクリプト




Opera

Opera では、クッキー管理で localStorage は扱われておらず、開発者ツールである 
Dragonfly で表示、データ個別削除、ページ単位の削除が可能です。




Safari

Safari でも、クッキー管理で localStorage は扱われておらず 開発者ツールでデータ
表示は可能ですが、データ単位の削除しか無いので、コマンドでドメイン単位の削除を
行う方法を使う必要があります。



Safari の LocalStorage フォルダを開くスクリプト

クロスドメインで、showModalDialog を使用する

toolbox.winofsql.jp にある、modalDialog.htm を showModalDialog で呼び出して
データ交換を行います。IFRAME として、modalDialogServer.htm を組み込む必要が
あります。データは、toolbox.winofsql.jp 用の localStorage を使用して保存され
ますが、一時的な中間データとして扱います。
Opera は showModalDialog を使用できないので、同等の処理を行うにはそれ相当の工夫と努力が必要になります。

function dialog_opener_access() { try { // 処理 var win = window.dialogArguments.win; var target = window.dialogArguments.target; win.document.getElementById(target).value = document.getElementById("text").value window.close(); } catch(e) { alert("このページはモーダルダイアログ用です。"); } }

modalDialogServer.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=euc-jp" http-equiv="Content-Type">
<title>モーダルダイアログサーバー</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:700px;
	height:400px;
}
</style>
<script type=text/javascript>

var text;

if ( window.attachEvent ) {
	window.attachEvent('onmessage',function(e) {
		text = e.data;
		// 先頭コマンド 'A' で、ローカル保存
		if ( text.substr(0,1) == 'A' ) {
			if ( text.substr(1) == '' ) {
				localStorage['serverText'] = new String("");
			}
			else {
				localStorage['serverText'] = text.substr(1);
			}
		}
		// 先頭コマンド 'B' で、ローカル保存されていたデータを親ウインドウに POST
		if ( text.substr(0,1) == 'B' ) {
			parent.postMessage(localStorage['serverText'], "*");
		}
	});
}
else {
	window.addEventListener('message',function(e) {
		text = e.data;
		// 先頭コマンド 'A' で、ローカル保存
		if ( text.substr(0,1) == 'A' ) {
			if ( text.substr(1) == '' ) {
				localStorage['serverText'] = new String("");
			}
			else {
				localStorage['serverText'] = text.substr(1);
			}
		}
		// 先頭コマンド 'B' で、ローカル保存されていたデータを親ウインドウに POST
		if ( text.substr(0,1) == 'B' ) {
			parent.postMessage(localStorage['serverText'], "*");
		}
	}, false);
}

</script>
</head>
<body>
</body>
</html>

ダイアログと呼び出し側のコード

関連する記事

showModalDialog の使い方と使う場所