Techracho

JavaScriptでCSSのプロパティを削除する(IEでfilterがあるとClearTypeが無効になるバグ対策)

このエントリーをはてなブックマーク Share
2009.08.22    CSS, dojo toolkit, javascript, 馬場      baba   

javascriptからCSSを変更したい場合は、

//生
var node = document.getElementById('hoge');
node.style.marginLeft = '10px';

//dojo
dojo.style(dojo.byId('hoge'), 'marginLeft', '10px');

といった感じになります。

しかしこれだと、CSSのプロパティ自体を削除することはできません。

普段はそんな必要も無いのですが、IEにはfilterプロパティの付いた要素のその子要素でフォントのアンチエイリアス(ClearType)が効かなくなるというバグがあるので、filterプロパティ自体を削除したいことがあります。

node.styleで取得できるオブジェクトはCSSStyleDeclarationで、これにはremoveProperty()というメソッドがあるので、

node.style.removeProperty('filter');

とすれば良さそうです。

しかしIEではなぜかこれが未定義です。代わりにremoveAttributeが使えます。

なので、

var node = document.getElementById(’hoge’);
if (node.style.removeProperty) {
	node.style.removeProperty(’filter’);
}
if (node.style.removeAttribute) {
	node.style.removeAttribute(’filter’);
}

のような使い方になります。

—–具体的な使用例—–
dojoでは簡単にフェードインが使えます。
しかし、IEだと、フェードインした要素はフォントがガタガタになります。特にメイリオ等のアンチエイリアス前提フォントだと悲惨です。
以下のようにonEndを設定することで、フェードイン完了後はなめらかになります。

//fadeInを使うのであらかじめ透明度を0にする
dojo.style(dojo.byId(’hoge’), ‘opacity’, ‘0′);

(new dojo.fadeIn({
	node: ‘hoge’, //フェードインさせるノードのID
	duration: 1000, //ミリ秒
	onEnd: function() {
		var node = dojo.byId(’hoge’);
		if (node.style.removeProperty) {
			node.style.removeProperty(’filter’);
		}
		if (node.style.removeAttribute) {
			node.style.removeAttribute(’filter’);
		}
	}
})).play();

上がonEndを設定しない場合、下が設定した場合です。メイリオフォント使用。
090822_cleartype

他業種のマインドセットに触れる

このエントリーをはてなブックマーク Share
2009.08.21    投稿者, 渡辺      peter   

昨夜恵比寿で前職の先輩と食事しました。

XBRL(財務情報が作成・流通・再利用できるように標準化されたXMLベースの言語)

が来年3月頃から日本でも導入されるそうです。

これまで好き勝手な書式で財務情報を報告していたが、それを一本化する、ということですね。

一般ユーザー向けのサービスがない今が、window of opportunityかもしれません。

どこまで企業が正確に情報を提示しているか、は疑問ですが。笑

最近技術をベースにビジネスロジックを考えていたので、新鮮な会話でした。

普段共に仕事している仲間と阿吽の呼吸で物事を議論すると

話が早い、意見がまとまりやすい、ゆえに仕事が円滑に進んでいる

そんな気分になります。

会社内のマインドセットがうまく浸透している証拠なので

これはこれで、嬉しいです。

でもちょくちょく社外のマインドに触れるのも大切ですね。

異なる文化、目的設定のもと行動しているので

毎日培っている経験やノウハウが異なるのですよね。

それに触れるとき、仕事の刺激になります。

気付き、が生まれます。

日々、勉強ですね。

最近会社にやってきた旧友が

外に出ること・外に向けて発信することの意義、

得られるものの濃さを教えてくれました。

感謝 (ー人ー) 感謝

dojoで角丸ボタン

このエントリーをはてなブックマーク Share
2009.08.11    CSS, dojo toolkit, javascript, 馬場      baba   

dojo toolkitはデフォルトで各種ウィジェットが付いていて便利ですが、現時点ではまだテーマが充実していません。
実質的に使えるのは、tundraとsoriaくらいだと思います。

どちらもコントロールが角張っているので、丸くしたくなることがあります。

ダイアログの角丸は、-moz-border-radius / -webkit-border-radius を使えば簡単にできますが、IEなどにも対応しようと思うと、ウィジェットテンプレートを書き換えたりJavascriptで要素を書き換えたりしないといけません。

ボタン(高さ固定)は、IEを含め比較的簡単に角丸にできますので、今回はこちらを紹介します。

テーマの自作になりますので、まずはsoriaあたりをコピーして、これを上書きしていくことにします。
soria.css を mytheme.css にリネームして、.soria を .mytheme に一括置換(手抜き)してしまいましょう。

そして、角丸実現のために以下のような記述を追加します。

.mytheme .dijitButtonNode .dijitButtonContents {
	background: url(images/button_back.png) repeat-x 0 0;
}
.mytheme .dijitButton .dijitRight {
	background: url(images/button_right.png) no-repeat top right;
}
.mytheme .dijitLeft.dijitButton {
	background: url(images/button_left.png) no-repeat top left;
}

button_leftは左側の丸い画像、button_rightは右側の丸い画像、button_backは中央の矩形部分の画像です。
これらのファイルは自分で作ってimagesに入れておきます。
これだけで丸くなります。

ちゃんとやるときは、soriaテーマをきちんと解読して矛盾が無いようにすべきですが、小規模ならこんな安易な改造も可能です。

IEでのdojo.requireの挙動

このエントリーをはてなブックマーク Share
    dojo toolkit, javascript, 馬場      baba   

DojoToolkitのお話です。

dojo.requireを使うと、JavaScriptを動的に読み込むことができます。
<script>タグを書くのに比べて、読み込むタイミングを制御できるため、大規模な開発に向いています。

しかし、<script>の羅列を単純に置き換えると、動かないことがあります。

読み込まれるファイルで var Test = {}; のように記述した場合、FirefoxではTestを参照できますが、IEでは参照できません。
この関数は、JavaScriptリソースを文字列として取得し、最終的にevalを使って評価しているのですが、FirefoxとIEでevalの挙動が違うためだと思われます。

dojo.requireを使うときは、簡単なクラスを定義する場合でも必ずdojo.declare() を使うことで、IEでも参照できるようになります。

« 新しい投稿

COPYRIGHT [C] 2009 BEYOND PERSPECTIVE SOLUTIONS LTD. ALL RIGHTS RESERVED.