New CSSOM view API landing page, move CSS guides under

files/en-us/_redirects.txt

@@ -12141,6 +12141,7 @@
 /en-US/docs/Web/CSS/Aural	/en-US/docs/Web/CSS/@media
 /en-US/docs/Web/CSS/Block_formatting_context	/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
 /en-US/docs/Web/CSS/CSS3_Columns	/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
+/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems	/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems
 /en-US/docs/Web/CSS/CSS_Background_and_Borders	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders
 /en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
 /en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator

files/en-us/_wikihistory.json

@@ -22022,6 +22022,10 @@
     "modified": "2020-10-15T22:19:19.805Z",
     "contributors": ["jpmedley"]
   },
+  "Web/API/CSSOM_view_API/Coordinate_systems": {
+    "modified": "2020-04-27T22:32:23.815Z",
+    "contributors": ["chrisn", "mfluehr", "JohannesCleve", "Sheppy"]
+  },
   "Web/API/CSSPageRule": {
     "modified": "2020-10-15T21:21:03.183Z",
     "contributors": [
@@ -75306,10 +75310,6 @@
       "teoli"
     ]
   },
-  "Web/CSS/CSSOM_view/Coordinate_systems": {
-    "modified": "2020-04-27T22:32:23.815Z",
-    "contributors": ["chrisn", "mfluehr", "JohannesCleve", "Sheppy"]
-  },
   "Web/CSS/CSSOM_view/Viewport_concepts": {
     "modified": "2020-11-20T07:41:38.029Z",
     "contributors": [

files/en-us/web/api/caretposition/getclientrect/index.md

@@ -6,7 +6,7 @@ page-type: web-api-instance-method
 browser-compat: api.CaretPosition.getClientRect
 ---
 
-{{APIRef("CSSOM")}}
+{{APIRef("CSSOM view API")}}
 
 The `getClientRect()` method of the {{domxref("CaretPosition")}} interface returns the client rectangle for the caret range.
 

files/en-us/web/api/caretposition/index.md

@@ -5,7 +5,7 @@ page-type: web-api-interface
 browser-compat: api.CaretPosition
 ---
 
-{{APIRef("CSSOM")}}
+{{APIRef("CSSOM view API")}}
 
 The `CaretPosition` interface represents the caret position, an indicator for the text insertion point.
 You can get a `CaretPosition` using the {{domxref("Document.caretPositionFromPoint()")}} method.

files/en-us/web/api/caretposition/offset/index.md

@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.CaretPosition.offset
 ---
 
-{{APIRef("CSSOM")}}
+{{APIRef("CSSOM view API")}}
 
 The **`offset`** property of the {{domxref("CaretPosition")}} interface returns an integer representing the offset of the selection in the caret position node.
 

files/en-us/web/api/caretposition/offsetnode/index.md

@@ -6,7 +6,7 @@ page-type: web-api-instance-property
 browser-compat: api.CaretPosition.offsetNode
 ---
 
-{{APIRef("CSSOM")}}
+{{APIRef("CSSOM view API")}}
 
 The **`offsetNode`** property of the {{domxref("CaretPosition")}} interface returns a {{domxref("Node")}} containing the found node at the caret's position.
 

files/en-us/web/css/cssom_view/coordinate_systems/index.md → files/en-us/web/api/cssom_view_api/coordinate_systems/index.md

@@ -1,10 +1,11 @@
 ---
 title: Coordinate systems
-slug: Web/CSS/CSSOM_view/Coordinate_systems
+slug: Web/API/CSSOM_view_API/Coordinate_systems
 page-type: guide
-sidebar: cssref
 ---
 
+{{DefaultAPISidebar("CSSOM view API")}}
+
 When specifying the location of a pixel in a graphics context (just like when specifying coordinate systems in [algebra](https://en.wikipedia.org/wiki/Algebra)), its position is defined relative to a fixed point in the context. This fixed point is called the [origin](<https://en.wikipedia.org/wiki/Origin_(mathematics)>). The position is specified as the number of pixels offset from the origin along each dimension of the context.
 
 This guide describes the standard coordinate systems used by the CSS object model. These are generally only different in terms of where their origin is located.

files/en-us/web/api/cssom_view_api/index.md

@@ -0,0 +1,137 @@
+---
+title: CSSOM view API
+slug: Web/API/CSSOM_view_API
+page-type: web-api-overview
+spec-urls: https://drafts.csswg.org/cssom-view/
+---
+
+{{DefaultAPISidebar("CSSOM view API")}}
+
+The **CSSOM view API** lets you manipulate the visual view of a document, including getting the position of element layout boxes, obtaining the width or height of the viewport through script, and also scrolling an element.
+
+## Guides
+
+- [Coordinate systems](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems)
+  - : The coordinate systems used to specify a position in a display context such as a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing.
+- [Viewport concepts](/en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts)
+  - : The concept of the viewport — what it is, its impact in terms of CSS, SVG, and mobile devices — and the difference between the visual viewport and the layout viewport.
+
+## Interfaces
+
+- {{domxref("MediaQueryList")}}
+- {{domxref("MediaQueryListEvent")}}
+- {{domxref("Screen")}}
+- {{domxref("CaretPosition")}}
+- {{domxref("VisualViewport")}}
+
+## Extensions to other interfaces
+
+This module adds properties, methods, and events to interfaces defined in other specifications.
+
+### Extensions to Window
+
+- {{domxref("Window.devicePixelRatio", "devicePixelRatio")}}
+- {{domxref("Window.innerHeight", "innerHeight")}}
+- {{domxref("Window.innerWidth", "innerWidth")}}
+- {{domxref("Window.matchMedia", "matchMedia()")}}
+- {{domxref("Window.moveBy", "moveBy()")}}
+- {{domxref("Window.moveTo", "moveTo()")}}
+- {{domxref("Window.outerHeight", "outerHeight")}}
+- {{domxref("Window.outerWidth", "outerWidth")}}
+- `pageXOffset` (see {{domxref("Window.scrollX", "scrollX")}})
+- `pageYOffset` (see {{domxref("Window.scrollY", "scrollY")}})
+- {{domxref("Window.resizeBy", "resizeBy()")}}
+- {{domxref("Window.resizeTo", "resizeTo()")}}
+- {{domxref("Window.screen", "screen")}}
+- {{domxref("Window.screenLeft", "screenLeft")}}
+- {{domxref("Window.screenTop", "screenTop")}}
+- {{domxref("Window.screenX", "screenX")}}
+- {{domxref("Window.screenY", "screenY")}}
+- {{domxref("Window.visualViewport", "visualViewport")}}
+- {{domxref("Window.scroll", "scroll()")}}
+- {{domxref("Window.scrollBy", "scrollBy()")}}
+- {{domxref("Window.scrollTo", "scrollTo()")}}
+- {{domxref("Window.scrollX", "scrollX")}}
+- {{domxref("Window.scrollY", "scrollY")}}
+- {{domxref("Window/resize_event", "resize")}} event
+
+### Extensions to Document
+
+- {{domxref("Document.elementFromPoint", "elementFromPoint()")}}
+- {{domxref("Document.caretPositionFromPoint", "caretPositionFromPoint()")}}
+- {{domxref("Document.scrollingElement", "scrollingElement")}}
+- {{domxref("Document/scroll_event", "scroll")}} event
+- {{domxref("Document/scrollend_event", "scrollend")}} event
+
+### Extensions to Element
+
+- {{domxref("Element.checkVisibility", "checkVisibility()")}}
+- {{domxref("Element.clientHeight", "clientHeight")}}
+- {{domxref("Element.clientLeft", "clientLeft")}}
+- {{domxref("Element.clientTop", "clientTop")}}
+- {{domxref("Element.clientWidth", "clientWidth")}}
+- {{domxref("Element.currentCSSZoom", "currentCSSZoom")}}
+- {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}}
+- {{domxref("Element.getClientRects", "getClientRects()")}}
+- {{domxref("Element.scroll", "scroll()")}}
+- {{domxref("Element.scrollBy", "scrollBy()")}}
+- {{domxref("Element.scrollHeight", "scrollHeight")}}
+- {{domxref("Element.scrollIntoView", "scrollIntoView()")}}
+- {{domxref("Element.scrollLeft", "scrollLeft")}}
+- {{domxref("Element.scrollTo", "scrollTo()")}}
+- {{domxref("Element.scrollTop", "scrollTop")}}
+- {{domxref("Element.scrollWidth", "scrollWidth")}}
+- {{domxref("Element/scroll_event", "scroll")}} event
+- {{domxref("Element/scrollend_event", "scrollend")}} event
+
+### Extensions to HTMLElement
+
+- {{domxref("HTMLElement.offsetHeight", "offsetHeight")}}
+- {{domxref("HTMLElement.offsetLeft", "offsetLeft")}}
+- {{domxref("HTMLElement.offsetParent", "offsetParent")}}
+- {{domxref("HTMLElement.offsetTop", "offsetTop")}}
+- {{domxref("HTMLElement.offsetWidth", "offsetWidth")}}
+
+### Extensions to HTMLImageElement
+
+- {{domxref("HTMLImageElement.x", "x")}}
+- {{domxref("HTMLImageElement.y", "y")}}
+
+### Extensions to Range
+
+- {{domxref("Range.getBoundingClientRect", "getBoundingClientRect()")}}
+- {{domxref("Range.getClientRects", "getClientRects()")}}
+
+### Extensions to MouseEvent
+
+- {{domxref("MouseEvent.clientX", "clientX")}}
+- {{domxref("MouseEvent.clientY", "clientY")}}
+- {{domxref("MouseEvent.offsetX", "offsetX")}}
+- {{domxref("MouseEvent.offsetY", "offsetY")}}
+- {{domxref("MouseEvent.pageX", "pageX")}}
+- {{domxref("MouseEvent.pageY", "pageY")}}
+- {{domxref("MouseEvent.screenY", "screenY")}}
+- {{domxref("MouseEvent.x", "x")}}
+- {{domxref("MouseEvent.y", "y")}}
+
+This module defines geometric utility methods that apply to the {{domxref("Text")}}, {{domxref("Element")}}, {{domxref("CSSPseudoElement")}}, and {{domxref("Document")}} interfaces. These `GeometryUtils` features are not yet implemented in any browser.
+
+## Specifications
+
+{{Specifications}}
+
+## See also
+
+- [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) API
+- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module
+- [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module
+- [CSS overscroll behavior](/en-US/docs/Web/CSS/CSS_overscroll_behavior) module
+- [CSS scroll snap](/en-US/docs/Web/CSS/CSS_scroll_snap) module
+- {{glossary("Viewport")}}
+- {{glossary("Layout viewport")}}
+- {{glossary("Visual viewport")}}
+- {{cssxref("zoom")}}
+- {{glossary("CSSOM")}}
+- {{glossary("CSS pixel")}}
+- {{glossary("Scroll container")}}
+- {{htmlelement("meta")}}

files/en-us/web/api/device_orientation_events/using_device_orientation_with_3d_transforms/index.md

@@ -12,7 +12,7 @@ This article provides tips on how to use device orientation information in tande
 
 The easiest way to convert [orientation data](/en-US/docs/Web/API/Window/deviceorientation_event) to a [3D transform](/en-US/docs/Web/CSS/transform) is basically to use the `alpha`, `gamma`, and `beta` values as `rotateZ`, `rotateX` and `rotateY` values.
 
-It is important to keep in mind, however, that the [Device Orientation coordinate system](/en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained) is different from the [CSS coordinate system](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems). Namely, the former is [right-handed](https://en.wikipedia.org/wiki/Right-hand_rule) and its Y axis is positive upwards, while the latter is a left-handed coordinate system whose Y axis is positive to the bottom. Furthermore, the Device Orientation angle rotations should always be done in a Z - X' - Y'' order that does not match the order of some [CSS Transforms](/en-US/docs/Web/CSS/CSS_transforms). These are some of the practical consequences of these differences:
+It is important to keep in mind, however, that the [Device Orientation coordinate system](/en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained) is different from the [CSS coordinate system](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems). Namely, the former is [right-handed](https://en.wikipedia.org/wiki/Right-hand_rule) and its Y axis is positive upwards, while the latter is a left-handed coordinate system whose Y axis is positive to the bottom. Furthermore, the Device Orientation angle rotations should always be done in a Z - X' - Y'' order that does not match the order of some [CSS Transforms](/en-US/docs/Web/CSS/CSS_transforms). These are some of the practical consequences of these differences:
 
 - The order of angle rotations matters, so make sure the alpha, beta and gamma rotations are applied in this order.
 - The [`rotate3d()`](/en-US/docs/Web/CSS/transform-function/rotate3d) CSS transformation, and the [`DOMMatrixReadOnly.rotate()`](/en-US/docs/Web/API/DOMMatrixReadOnly/rotate) and [`DOMMatrix.rotateSelf()`](/en-US/docs/Web/API/DOMMatrix/rotateSelf) functions apply angle rotations in a Z - Y' - X'' order, so it is not possible to apply the alpha, beta and gamma rotations in the right order with a single call to any of them. Instead, you should rotate each axis individually in the correct order.

files/en-us/web/api/document/caretpositionfrompoint/index.md

@@ -6,7 +6,7 @@ page-type: web-api-instance-method
 browser-compat: api.Document.caretPositionFromPoint
 ---
 
-{{APIRef("CSSOM View")}}
+{{APIRef("CSSOM view API")}}
 
 The **`caretPositionFromPoint()`** method of the {{domxref("Document")}} interface returns a {{domxref('CaretPosition')}} object, containing the DOM node, along with the caret and caret's character offset within that node.
 

files/en-us/web/api/element/dblclick_event/index.md

@@ -39,9 +39,9 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
 - {{domxref("MouseEvent.buttons")}} {{ReadOnlyInline}}
   - : The buttons being pressed (if any) when the mouse event was fired.
 - {{domxref("MouseEvent.clientX")}} {{ReadOnlyInline}}
-  - : The X coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#viewport).
+  - : The X coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#viewport).
 - {{domxref("MouseEvent.clientY")}} {{ReadOnlyInline}}
-  - : The Y coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#viewport).
+  - : The Y coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#viewport).
 - {{domxref("MouseEvent.ctrlKey")}} {{ReadOnlyInline}}
   - : Returns `true` if the <kbd>control</kbd> key was down when the mouse event was fired.
 - {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{ReadOnlyInline}}
@@ -65,9 +65,9 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
 - {{domxref("MouseEvent.relatedTarget")}} {{ReadOnlyInline}}
   - : The secondary target for the event, if there is one.
 - {{domxref("MouseEvent.screenX")}} {{ReadOnlyInline}}
-  - : The X coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#screen).
+  - : The X coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#screen).
 - {{domxref("MouseEvent.screenY")}} {{ReadOnlyInline}}
-  - : The Y coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#screen).
+  - : The Y coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#screen).
 - {{domxref("MouseEvent.shiftKey")}} {{ReadOnlyInline}}
   - : Returns `true` if the <kbd>shift</kbd> key was down when the mouse event was fired.
 - {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{ReadOnlyInline}}

files/en-us/web/api/element/mousedown_event/index.md

@@ -41,9 +41,9 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
 - {{domxref("MouseEvent.buttons")}} {{ReadOnlyInline}}
   - : The buttons being pressed (if any) when the mouse event was fired.
 - {{domxref("MouseEvent.clientX")}} {{ReadOnlyInline}}
-  - : The X coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#viewport).
+  - : The X coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#viewport).
 - {{domxref("MouseEvent.clientY")}} {{ReadOnlyInline}}
-  - : The Y coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#viewport).
+  - : The Y coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#viewport).
 - {{domxref("MouseEvent.ctrlKey")}} {{ReadOnlyInline}}
   - : Returns `true` if the <kbd>control</kbd> key was down when the mouse event was fired.
 - {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{ReadOnlyInline}}
@@ -67,9 +67,9 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
 - {{domxref("MouseEvent.relatedTarget")}} {{ReadOnlyInline}}
   - : The secondary target for the event, if there is one.
 - {{domxref("MouseEvent.screenX")}} {{ReadOnlyInline}}
-  - : The X coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#screen).
+  - : The X coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#screen).
 - {{domxref("MouseEvent.screenY")}} {{ReadOnlyInline}}
-  - : The Y coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#screen).
+  - : The Y coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#screen).
 - {{domxref("MouseEvent.shiftKey")}} {{ReadOnlyInline}}
   - : Returns `true` if the <kbd>shift</kbd> key was down when the mouse event was fired.
 - {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{ReadOnlyInline}}

files/en-us/web/api/element/mouseenter_event/index.md

@@ -39,9 +39,9 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
 - {{domxref("MouseEvent.buttons")}} {{ReadOnlyInline}}
   - : The buttons being pressed (if any) when the mouse event was fired.
 - {{domxref("MouseEvent.clientX")}} {{ReadOnlyInline}}
-  - : The X coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#viewport).
+  - : The X coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#viewport).
 - {{domxref("MouseEvent.clientY")}} {{ReadOnlyInline}}
-  - : The Y coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#viewport).
+  - : The Y coordinate of the mouse pointer in [viewport coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#viewport).
 - {{domxref("MouseEvent.ctrlKey")}} {{ReadOnlyInline}}
   - : Returns `true` if the <kbd>control</kbd> key was down when the mouse event was fired.
 - {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{ReadOnlyInline}}
@@ -65,9 +65,9 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}
 - {{domxref("MouseEvent.relatedTarget")}} {{ReadOnlyInline}}
   - : The secondary target for the event, if there is one.
 - {{domxref("MouseEvent.screenX")}} {{ReadOnlyInline}}
-  - : The X coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#screen).
+  - : The X coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#screen).
 - {{domxref("MouseEvent.screenY")}} {{ReadOnlyInline}}
-  - : The Y coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems#screen).
+  - : The Y coordinate of the mouse pointer in [screen coordinates](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems#screen).
 - {{domxref("MouseEvent.shiftKey")}} {{ReadOnlyInline}}
   - : Returns `true` if the <kbd>shift</kbd> key was down when the mouse event was fired.
 - {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{ReadOnlyInline}}