CSS module: viewport

files/en-us/web/css/css_environment_variables/index.md

@@ -16,6 +16,10 @@ Environment variables provide values that can be used on the page based on infor
 
 - {{cssxref("env")}}
 
+### Data types
+
+- [`<environment-variable-name>`](/en-US/docs/Web/CSS/CSS_environment_variables/Using_environment_variables#browser-defined_environment_variables)
+
 ## Guides
 
 - [Using environment variables](/en-US/docs/Web/CSS/CSS_environment_variables/Using_environment_variables)

files/en-us/web/css/css_viewport/index.md

@@ -0,0 +1,64 @@
+---
+title: CSS viewport
+slug: Web/CSS/CSS_viewport
+page-type: css-module
+spec-urls: https://drafts.csswg.org/css-viewport/
+sidebar: cssref
+---
+
+The **CSS viewport** module enables specifying the size, zoom factor, and orientation of the user-agent's initial containing block, or _viewport_.
+
+Content designed for large viewports may exhibit a variety of bugs when viewed in smaller viewports, including unintended wrapping, clipped content, and incorrectly sized {{glossary("scroll container", "scroll containers")}}. HTML provides a [viewport meta tag](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport), `<meta name="viewport">`, to provide hints about the initial size of the viewport. If the site isn't designed to work well on small viewports and this tag is omitted, some mobile browsers render the site using a fixed initial containing block width, typically `980px`. The content is then scaled down, making the CSS pixel size smaller than an actual pixel. The resulting page fits into the available screen space but is illegible, requiring the user to zoom and pan to view the content.
+
+The {{glossary("viewport")}} initial containing block for continuous media has the dimensions of the viewport. Since the viewport is generally no larger than the display, devices with smaller displays, such as phones or tablets, typically present a smaller viewport than larger devices like desktops or laptops.
+
+## Reference
+
+### Properties
+
+- {{cssxref("zoom")}}
+
+### Interfaces
+
+- {{domxref("Window.Viewport")}}
+- {{domxref("Viewport")}}
+  - {{domxref("Viewport.segments")}}
+- {{domxref("Viewport Segments")}}
+
+### Glossary terms and definitions
+
+- {{glossary("Viewport")}}
+- [Actual viewport](/en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts#actual_viewport)
+- [Initial viewport](/en-US/docs/Web/CSS/CSSOM_view/Viewport_concepts#initial_viewport)
+
+## Guides
+
+- [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.
+
+- [Using environment variables](/en-US/docs/Web/CSS/CSS_environment_variables/Using_environment_variables)
+  - : An overview of what environment variables are, browser-defined environment variables, and how to use the `env()` function.
+
+- [Using the Viewport Segments API](/en-US/docs/Web/API/Viewport_segments_API/Using)
+  - : Create responsive designs optimized for different viewport segment sizes and arrangements with the API and environment variables.
+
+## Related concepts
+
+- [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module
+  - {{cssxref("@media")}}
+  - {{cssxref("media/horizontal-viewport-segments", "horizontal-viewport-segments")}} descriptor
+  - {{cssxref("media/vertical-viewport-segments", "vertical-viewport-segments")}} descriptor
+
+- [CSS enviroment variables](/en-US/docs/Web/CSS/CSS_environment_variables)
+  - {{cssxref("env()")}}
+  - [`<environment-variable-name>`](/en-US/docs/Web/CSS/CSS_environment_variables/Using_environment_variables#browser-defined_environment_variables)
+
+- [Device Posture API](/en-US/docs/Web/API/Device_Posture_API)
+
+## Specifications
+
+{{Specifications}}
+
+## See also
+
+- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module

files/en-us/web/css/cssom_view/index.md

@@ -125,10 +125,13 @@ This module defines geometric utility methods that apply to the {{domxref("Text"
 ## Related concepts
 
 - {{cssxref("zoom")}}
-- {{glossary("CSSOM")}}
+- {{htmlelement("meta")}}
+
+### Glossary terms and definitions
+
+- {{glossary("CSSOM", "CSS object model (CSSOM)")}}
 - {{glossary("CSS pixel")}}
 - {{glossary("Scroll container")}}
-- {{htmlelement("meta")}}
 
 ## Specifications
 
@@ -137,6 +140,7 @@ This module defines geometric utility methods that apply to the {{domxref("Text"
 ## See also
 
 - [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) API
+- [CSS viewport](/en-US/docs/Web/CSS/CSS_viewport) 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

files/en-us/web/css/cssom_view/viewport_concepts/index.md

@@ -5,18 +5,30 @@ page-type: guide
 sidebar: cssref
 ---
 
-This article explains the concept of the {{glossary("viewport")}} — what it is, its impact in terms of CSS, SVG, and mobile devices — and differentiates between the {{glossary("visual viewport")}} and the {{glossary("layout viewport")}}.
+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?
 
-A viewport represents the area in computer graphics being currently viewed. In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc. That is the part of the document you are viewing.
+A **viewport** is a user agent feature used to establish the initial containing block for continuous media.
+
+The generic _viewport_ term generally refers to the area in computer graphics being currently viewed. In web browser terms, that is generally the same as the browser window, excluding the UI, menu bar, etc. That is the part of the document you are viewing.
+
+As a document loads, the viewport goes through two stages:
+
+- **Initial viewport**
+  - : The _initial viewport_ refers to the window or viewing area of the UA before user agent styles, HTML {{htmlelement("meta")}} tags, or CSS styles have overridden its size. The initial viewport size is based on the size of the window or viewing area, and not the content. The size of a full-screen user agent's initial viewport will differ between orientations and devices, but will always be the same for the same device in the same orientation.
+
+- **Actual viewport**
+  - : The _actual viewport_ is the viewport you get after processing the [viewport `<meta>` tag](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport). Content designed for large viewports may exhibit a variety of bugs when viewed in smaller viewports, including unintended wrapping, clipped content, and incorrectly sized {{glossary("scroll container", "scroll containers")}}. The viewport meta tag provides hints about the initial size of the viewport. The actual viewport is the size defined by its [`content`](/en-US/docs/Web/HTML/Reference/Elements/meta#content) attribute. If this tag is omitted, some mobile browsers render content using a fixed initial containing block width, typically `980px`. They set the width of the actual viewport to this value, then scale the content down to fit it, making the CSS pixel size smaller than an actual pixel.
 
 Documents, like this article, may be very long. Your viewport is everything that is currently visible; notably, the "what is a viewport" section, and perhaps some of the navigation menu. The size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the browser is zoomed in. Content outside the viewport, such as the _See Also_ section in this document, is likely to not be visible onscreen until scrolled into view.
 
 - On larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser window.
 - On most mobile devices and when the browser is in fullscreen mode, the viewport is the entire screen.
 - In fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport.
 
+For [paged media](/en-US/docs/Web/CSS/CSS_paged_media), the initial containing block is based on the page area. The page area can be set through {{cssxref("@page")}} rules.
+
 To recap, the viewport is basically the part of the document that is currently visible.
 
 ### Viewport sizes are mutable
@@ -142,6 +154,8 @@ Generally, when you write the above media query, the styles are applied if the v
 
 The [Visual Viewport API](/en-US/docs/Web/API/Visual_Viewport_API) provides a mechanism for querying and modifying the properties of the visual viewport.
 
+The [Viewport API](/en-US/docs/Web/API/Viewport_API) provides a mechanism for querying and modifying the properties of the visual viewport.
+
 ## Mobile viewports
 
 Mobile devices come in all shapes and sizes, with screens of differing {{glossary("device pixel")}} ratios. The mobile browser's viewport is the area of the window in which web content can be seen, which is not necessarily the same size as the rendered page. Mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 320px, a website might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 320px space, which, depending on the design, is illegible for many if not everyone. To tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following:
@@ -154,7 +168,8 @@ The `width` property controls the size of the viewport. It should preferably be
 
 ## See also
 
-- [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">`
+- {{HTMLElement("meta")}} and [`<meta name="viewport">`](/en-US/docs/Web/HTML/Reference/Elements/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
+- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_view) module