HTML5 Canvas のIE8対応

最初ExplorerCanvasを使ってしまって、全然動かなかった。

参考:Internet Explorer 8でCanvasを動かす時のメモ

VMLCanvasを使うとよかったです。
https://code.google.com/p/mofmof-js/wiki/VMLCanvas

VMLCanvas.js は uuCanvas.js から Silverlight と Flash バックエンドを省略し、 コンパクトにパッケージしなおした JavaScript ライブラリです。mofmof.js に依存せず単体でも動作します。 ExplorerCanvas に比べ、より多くの機能をサポートしています。

canvasでグラフを表示してマウスオーバーでポップアップするようなものでしたが、結果的には全てIE10や、chromeなどと同じように表示することができました。

IEだけVML Canvasを読み込みます。

ie8かチェックする関数をつくります。

ie8以外の場合は、$(window).loadを使い、ie8の場合は、window.oncanvasreadyを使います。

これで全部表示されました。スクリプト分けるとメンテが大変なので一つにしようと思って上記のようにしました。images.onloadを使うとie8で動かなかったのでとりあえず外しました。

マウスオーバーチェックは、下記のようになりました。

ie8の場合、e.targetというのが使えないので、その変わりにsrcElementというのを使うのですが、それでやってもrectの値がおかしくて使えませんでした。e.xがmouse_xとほぼ同じになるので、上記のようにしました。

firefoxでformにdisabled設定するとリロードしてもdisabledのままになっちゃう

firefoxはFormの入力内容を勝手ながら保存してくれます。便利なときもあれば不便なときもあります。

disabledをjavascriptで動的に設定した場合は不便です。

入力内容を覚えておいておかないようにするか、javascriptで、Firefoxのために初期化(disabledを外す)するかなどが必要になります。formに、autocomplete=”off”という設定を入れるのが一番楽でした。

mailto 改行文字 %0d%0a

下記はcakePHPのビューでmailtoのリンクを作っている様です。

さて、mailtoのbodyの内容をエレメントに登録するとして、メール本文の改行文字は、

%0d%0a

です。

HTMLの印刷時の注意

  • IEでは幅649pxまでしか印刷できないのでそれ以内にする必要がある。あるいはwidth:autoにする。
  • media=”print”設定のスタイルシートをつくって、display: none;を設定することで印刷時に不要な箇所を削除できる。
  • 背景画像・背景色はデフォルトでは印刷されない。
  • 透過PNGはデフォルトでは印刷されない
  • しかし、CSSで、bodyとかに、-webkit-print-color-adjust: exact;という設定をするとchrome(safariもっぽい)では背景画像等が印刷されるようになる。
  • 通常のcssの後に印刷用cssをつける(後の方が優先される為)
  • ヘッダー・フッターなどはブラウザの機能であるため、URLを印刷しないなどの設定はブラウザ側で対処する必要がありHTML,CSS等での制御は基本できない
  • 強引的手法としてCSS上で、背景画像をbackground-imageではない方法で表示させることで印刷時にも表示させるようにすることが可能らしい。でも背景色は無理なんだろうから微妙。

紙サイズ(A4等)とpxの関係

紙サイズ一覧Web対応版参照

  • A4は、792×1120(px)