Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions files/en-us/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -12141,6 +12141,8 @@
/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/CSSOM_view/Viewport_concepts /en-US/docs/Web/API/CSSOM_view_API/Viewport_concepts
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK to move Coordinate_systems but not Viewport_concepts

/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
Expand All @@ -12164,7 +12166,7 @@
/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
/en-US/docs/Web/CSS/CSS_Columns/Using_multicol_layouts /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
/en-US/docs/Web/CSS/CSS_Device_Adaptation /en-US/docs/Web/CSS
/en-US/docs/Web/CSS/CSS_Device_Adaptation/Viewport_Concepts /en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts
/en-US/docs/Web/CSS/CSS_Device_Adaptation/Viewport_Concepts /en-US/docs/Web/API/CSSOM_view_API/Viewport_concepts
/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox /en-US/docs/Glossary/Flexbox
/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Box_Alignment_in_Flexbox /en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox
/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax /en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis
Expand Down Expand Up @@ -12345,7 +12347,7 @@
/en-US/docs/Web/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries
/en-US/docs/Web/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
/en-US/docs/Web/CSS/Value_definition_syntax /en-US/docs/Web/CSS/CSS_Values_and_Units/Value_definition_syntax
/en-US/docs/Web/CSS/Viewport_concepts /en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts
/en-US/docs/Web/CSS/Viewport_concepts /en-US/docs/Web/API/CSSOM_view_API/Viewport_concepts
/en-US/docs/Web/CSS/Visual_formatting_model /en-US/docs/Web/CSS/CSS_display/Visual_formatting_model
/en-US/docs/Web/CSS/_image /en-US/docs/Web/CSS/image/image
/en-US/docs/Web/CSS/abs() /en-US/docs/Web/CSS/abs
Expand Down
38 changes: 19 additions & 19 deletions files/en-us/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -22022,6 +22022,25 @@
"modified": "2020-10-15T22:19:19.805Z",
"contributors": ["jpmedley"]
},
"Web/API/CSSOM_view/Coordinate_systems": {
"modified": "2020-04-27T22:32:23.815Z",
"contributors": ["chrisn", "mfluehr", "JohannesCleve", "Sheppy"]
},
"Web/API/CSSOM_view/Viewport_concepts": {
"modified": "2020-11-20T07:41:38.029Z",
"contributors": [
"in43sh",
"PerfectVirgo",
"Wryhder",
"mfuji09",
"bagaffey",
"sivabalan02",
"syntaxval",
"chrisdavidmills",
"estelle",
"ExE-Boss"
]
},
"Web/API/CSSPageRule": {
"modified": "2020-10-15T21:21:03.183Z",
"contributors": [
Expand Down Expand Up @@ -75306,25 +75325,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": [
"in43sh",
"PerfectVirgo",
"Wryhder",
"mfuji09",
"bagaffey",
"sivabalan02",
"syntaxval",
"chrisdavidmills",
"estelle",
"ExE-Boss"
]
},
"Web/CSS/CSS_Flexible_Box_Layout/Controlling_ratios_of_flex_items_along_main_axis": {
"modified": "2020-06-24T00:31:19.661Z",
"contributors": [
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/layout_viewport/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This becomes important, for example, on mobile devices, where a pinching gesture

- {{Glossary("Viewport")}}
- {{Glossary("Visual viewport")}}
- [Viewport concepts](/en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts)
- [Viewport concepts](/en-US/docs/Web/API/CSSOM_view_API/Viewport_concepts)
- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module
- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
- [Viewport](https://en.wikipedia.org/wiki/Viewport) on Wikipedia
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/viewport/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The visual viewport of an {{htmlelement("iframe")}}, {{svgelement("svg")}}, or {

- {{Glossary("Visual viewport")}}
- {{Glossary("Layout viewport")}}
- [Viewport concepts](/en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts)
- [Viewport concepts](/en-US/docs/Web/API/CSSOM_view_API/Viewport_concepts)
- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module
- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
- [Viewport](https://en.wikipedia.org/wiki/Viewport) on Wikipedia
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/visual_viewport/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The portion of the {{Glossary("viewport")}} that is currently visible is called

- {{Glossary("Viewport")}}
- {{Glossary("Layout viewport")}}
- [Viewport concepts](/en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts)
- [Viewport concepts](/en-US/docs/Web/API/CSSOM_view_API/Viewport_concepts)
- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module
- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
- [Viewport](https://en.wikipedia.org/wiki/Viewport) on Wikipedia
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ Here, we have the following:
- `<html></html>`: The {{htmlelement("html")}} element wraps all the content on the entire page and is sometimes known as the **root element**. It also includes the `lang` [attribute](/en-US/docs/Glossary/Attribute), which sets the primary language of the document.
- `<head></head>`: The {{htmlelement("head")}} element acts as a container for all the stuff you want to include on the HTML page that _isn't_ the content you are showing to your page's viewers. This includes things like {{Glossary("keyword", "keywords")}} and a page description that you want to appear in search results, {{glossary("CSS")}} to style the content, character set declarations, and more.
- `<meta charset="utf-8">`: This element sets the character set your document should use to [UTF-8](/en-US/docs/Glossary/UTF-8), which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
- `<meta name="viewport" content="width=device-width">`: This [viewport element](/en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts#mobile_viewports) ensures the page renders at the width of the browser viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
- `<meta name="viewport" content="width=device-width">`: This [viewport element](/en-US/docs/Web/API/CSSOM_view_API/Viewport_concepts#mobile_viewports) ensures the page renders at the width of the browser viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
- `<title></title>`: The {{htmlelement("title")}} element sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
- `<body></body>`: The {{htmlelement("body")}} element contains _all_ the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else. At the moment it only contains a single `<img>` element, but we'll add more content later on.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/caretposition/getclientrect/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/caretposition/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/caretposition/offset/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/caretposition/offsetnode/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -138,7 +139,7 @@ Here you can see the results in action. As you mouse in and around the blue box,

## See also

- [Viewport concepts](/en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts)
- [Viewport concepts](/en-US/docs/Web/API/CSSOM_view_API/Viewport_concepts)
- [Using CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms): how to alter a coordinate system
- Coordinates of a {{domxref("MouseEvent")}}:
- {{domxref("MouseEvent.offsetX")}} and {{domxref("MouseEvent.offsetY")}}
Expand Down
137 changes: 137 additions & 0 deletions files/en-us/web/api/cssom_view_api/index.md
Original file line number Diff line number Diff line change
@@ -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/API/CSSOM_view_API/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")}}
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
---
title: Viewport concepts
slug: Web/CSS/CSSOM_view/Viewport_concepts
slug: Web/API/CSSOM_view_API/Viewport_concepts
page-type: guide
sidebar: cssref
---

{{DefaultAPISidebar("CSSOM view API")}}

This article explains the concept of the {{glossary("viewport")}} — what it is and its impact in terms of CSS, SVG, and mobile devices. This article defines the initial viewport and actual viewport, and differentiates between the {{glossary("visual viewport")}} and the {{glossary("layout viewport")}}.

## What is a viewport?
Expand Down Expand Up @@ -138,7 +139,7 @@ In an [SVG](/en-US/docs/Web/SVG) document, the viewport is the visible area of t

In this example, the viewport has an {{glossary("aspect ratio")}} of 3:4 and is, by default, 400 by 300 units, with a unit generally being a CSS pixel.

SVG also has an internal [coordinate system](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems) defined via the [viewBox](/en-US/docs/Web/SVG/Reference/Attribute/viewBox) attribute, which is not related to this viewport discussion.
SVG also has an internal [coordinate system](/en-US/docs/Web/API/CSSOM_view_API/Coordinate_systems) defined via the [viewBox](/en-US/docs/Web/SVG/Reference/Attribute/viewBox) attribute, which is not related to this viewport discussion.

If you include an SVG file in your HTML, the viewport of the SVG is the initial containing block, or the width and height of the SVG container. Using the {{CSSxRef("@media")}} query in your SVG's CSS is relative to that container, not the browser.

Expand Down Expand Up @@ -168,7 +169,9 @@ The `width` property controls the size of the viewport. It should preferably be

## See also

- {{HTMLElement("meta")}} and [`<meta name="viewport">`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module
- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
- {{HTMLElement("meta")}}, specifically `<meta name="viewport">`
- [Using the viewport meta tag to control layout on mobile browsers](/en-US/docs/Web/HTML/Guides/Viewport_meta_element)
- [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API)
- [CSS viewport](/en-US/docs/Web/CSS/CSS_viewport) module
Expand Down
Loading