SQLの窓 イラストAC フリー素材

2012年08月11日

typeface-0.15.js の他ドメイン css 参照時に起こるバグ修正

非常にレアなんですが、埋め込みフォント3Dフォントを運用しているので結構重要です。

全て自分のサイトでまかなう事になる 3Dフォント では起きないですが、ブログ等への埋め込みを想定している場合は確実に起きます。オリジナルの処理としては、CSS が全く無い場合は新規にそこへ追加するので問題無く、他のドメインで外部 CSS を読み込んでいる時に起きます。

また、面倒な事に必ず起きるのでは無く、そのページの環境に依存するというか、CSS が一つ以上ある場合は先頭を使う事になっているのですが、これが外部だとアウトになります。オリジナルではそういうエラー処理が無いので追加しました。

まず、一覧の中からエラーの起きない CSS を try 〜 catch で選定して、それを使うようにするという処理で、全部エラーだったらうまく動かないので少なくとも一つは自ドメインか、createElement で作成されたものが存在する必要があります。

必ず考えられる問題が発生する環境は、ブログに独自ドメインを割り当てている場合で、元のドメインでもアクセスできる場合は、少なくともどちらかでエラーが出る事になるので注意が必要です。

レアな情報でした

832行目から
} else if (document.styleSheets) {

	if (!document.styleSheets.length) { (function() {
		// create a stylesheet if we need to
		var styleSheet = document.createElement('style');
		styleSheet.type = 'text/css';
		document.getElementsByTagName('head')[0].appendChild(styleSheet);
	})() }

	var targetParts = 0;
	for( targetParts = 0; targetParts < document.styleSheets.length; targetParts++ ) {
		try { 
			document.styleSheets[targetParts].insertRule(typefaceSelectors.join(',') + ' { visibility: hidden; }', 0); 
			break;
		} catch(e) {}
	}

	try { 
		document.styleSheets[targetParts].insertRule(
			'.typeface-js-selected-text { \
				color: rgba(128, 128, 128, 0); \
				opacity: 0.30; \
				position: absolute; \
				font-family: Arial, sans-serif; \
				white-space: pre \
			}', 
			0
		);
	} catch(e) {};

	try { 
		// set selection style for Mozilla / Firefox
		document.styleSheets[targetParts].insertRule(
			'.typeface-js-selected-text::-moz-selection { background: blue; }', 
			0
		); 

	} catch(e) {};

	try { 
		// set styles for browsers with CSS3 selectors (Safari, Chrome)
		document.styleSheets[targetParts].insertRule(
			'.typeface-js-selected-text::selection { background: blue; }', 
			0
		); 

	} catch(e) {};

	// most unfortunately, sniff for WebKit's quirky selection behavior
	if (/WebKit/i.test(navigator.userAgent)) {
		document.styleSheets[targetParts].insertRule(
			'.typeface-js-vector-container { position: relative }',
			0
		);
	}

}



【typeface.jsの最新記事】
posted by at 2012-08-11 21:44 | typeface.js | このブログの読者になる | 更新情報をチェックする