2011年02月21日


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>


----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
posted by at 2011-02-21 19:41 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする

2011年02月07日


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" のセットでした。
ここのコードは大げさなので、自分のコードでやってみるとうまく変更されました。


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


posted by at 2011-02-07 13:21 | Comment(0) | ブラウザ | このブログの読者になる | 更新情報をチェックする

2011年02月05日


ブラウザ別、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 フォルダを開くスクリプト
posted by at 2011-02-05 08:15 | Comment(0) | ブラウザ | このブログの読者になる | 更新情報をチェックする

2011年02月03日


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

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


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 の使い方と使う場所


posted by at 2011-02-03 14:16 | Comment(0) | クロスドメイン | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します