こんにちは,
クロスブラウザの連載で草稿段階の仕様について触れることに不思議に思われるかもしれませんが,
CSSOM View Moduleとは
まず,
そして,
この要素の位置については,
CSSOM View ModuleのAPI
では,
まず,
AbstractViewインターフェース
名前のとおり,
最も抽象的なインタフェースで, APIはありません。DocumentViewとMediaが継承しています。 Mediaインターフェース
MediaQuery用のインターフェースです。
ScreenViewインターフェース
視覚的なメディア表現用のインターフェースです。Documentのdefault viewがこのインターフェースを実装しています。default viewというのはつまりwindowオブジェクト
(ウェブブラウザにおけるグローバルオブジェクト) のことです。 Screenインターフェース
出力デバイスのスクリーンの情報を扱うインターフェースです。ScreenViewがブラウザウィンドウ側の情報なのに対して,
Screenはモニタ側の情報を扱います。 DocumentViewインターフェース
DocumentViewインターフェースはdocumentオブジェクト用のインターフェースです。DOMとの連携において有用なAPIが定義されています。
Elementインターフェース拡張
DOM Level 3 Coreで定義されているElementインターフェースの拡張APIが定義されています。
HTMLElementインターフェース拡張
DOM Level 2 HTMLとHTML5で定義されているHTMLElementインターフェースの拡張APIが定義されています。
Rangeインターフェース拡張
DOM Level 2 Traversal and Rangeで定義されているRangeインターフェースの拡張APIが定義されています。
MouseEventインターフェース
DOM Level 2 Eventsで定義されているMouseEventインターフェースの拡張APIが定義されています。
簡単に言えば,
では,
スクリーンの位置情報
モニターについての情報はグローバル変数のscreenオブジェクトから取得できます。
CSSOM Viewで定義されているのは,
width, heightは実際のモニタのサイズ,
Firefox, Safari, ChromeではさらにavailLeft, availTopという独自プロパティも対応しており,
なお,
IEのscreenオブジェクト
{
bufferDepth : 0,
deviceXDPI : 96,
deviceYDPI : 96,
fontSmoothingEnabled : true,
logicalXDPI : 96,
logicalYDPI : 96,
systemXDPI : 96, // IE8以降
systemYDPI : 96, // IE8以降
updateInterval : 0,
availHeight : 1170,
availWidth : 1600,
colorDepth : 32,
height : 1200,
pixelDepth : 32, // IE9以降
width : 1600
}
ウィンドウの位置情報
ウィンドウの位置情報はwindowオブジェクト,
CSSOM Viewで定義されているプロパティ・
ScreenViewのインターフェース
// viewport
readonly attribute long innerWidth;
readonly attribute long innerHeight;
readonly attribute long pageXOffset;
readonly attribute long pageYOffset;
void scroll(long x, long y);
void scrollTo(long x, long y);
void scrollBy(long x, long y);
// client
readonly attribute long screenX;
readonly attribute long screenY;
readonly attribute long outerWidth;
readonly attribute long outerHeight;
innerWidth・
pageXOffset・
screenX・
scroll・