Update naming of interactive-widgets meta property

This commit updates the names of some properties in the `interactive-widgets` property of the viewport meta tag to reflect updated spec text[1]: "interactive-widgets" --> "interactive-widget" "resize-layout" --> "resizes-content" "resize-visual" --> "resizes-visual" [1] w3c/csswg-drafts#7826
bramus · Oct 11, 2022 · 2fa3885 · 2fa3885
1 parent 49edada
commit 2fa3885
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 27 deletions.
diff --git a/demos/README.md b/demos/README.md
@@ -1,6 +1,6 @@
 # Viewport Resize Behavior Demos
 
-Set of demo pages that use the `interactive-widgets` viewport meta tag extension with its different values.
+Set of demo pages that use the `interactive-widget` viewport meta tag extension with its different values.
 
 View online: https://viewport-resize-behavior.netlify.app/
 

diff --git a/demos/package.json b/demos/package.json
@@ -1,7 +1,7 @@
 {
   "name": "viewport-resize-behavior-demos",
   "version": "1.0.0",
-  "description": "Set of demo pages that use the `interactive-widgets` viewport meta tag extension with its different values",
+  "description": "Set of demo pages that use the `interactive-widget` viewport meta tag extension with its different values",
   "scripts": {
     "start": "serve src",
 	"deploy": "netlify deploy --prod",

diff --git a/demos/src/index.html b/demos/src/index.html
@@ -39,15 +39,15 @@
     <main>
         <h1>Viewport Resize Behavior Demos</h1>
 
-        <p>Set of demo pages that use the <code>interactive-widgets</code> viewport meta tag extension with its different values.</p>
+        <p>Set of demo pages that use the <code>interactive-widget</code> viewport meta tag extension with its different values.</p>
 
         <h2>Demos</h2>
 
         <ol>
-            <li><a href="interactive-widgets/no-value/">no value set</a></li>
-            <li><a href="interactive-widgets/resize-visual/">interactive-widgets=resize-visual</a></li>
-            <li><a href="interactive-widgets/resize-layout/">interactive-widgets=resize-layout</a></li>
-            <li><a href="interactive-widgets/overlays-content/">interactive-widgets=overlays-content</a></li>
+            <li><a href="interactive-widget/no-value/">no value set</a></li>
+            <li><a href="interactive-widget/resizes-visual/">interactive-widget=resizes-visual</a></li>
+            <li><a href="interactive-widget/resizes-content/">interactive-widget=resizes-content</a></li>
+            <li><a href="interactive-widget/overlays-content/">interactive-widget=overlays-content</a></li>
         </ol>
 
 		<h2>Legend</h2>

diff --git a/...c/interactive-widgets/no-value/index.html → ...rc/interactive-widget/no-value/index.html b/...c/interactive-widgets/no-value/index.html → ...rc/interactive-widget/no-value/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
-    <title>Viewport Resize Behavior Demos – interactive-widgets - No Value</title>
+    <title>Viewport Resize Behavior Demos – interactive-widget - No Value</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="../../base.css" />
 

diff --git a/...ctive-widgets/overlays-content/index.html → ...active-widget/overlays-content/index.html b/...ctive-widgets/overlays-content/index.html → ...active-widget/overlays-content/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
-    <title>Viewport Resize Behavior Demos – interactive-widgets - overlays-content</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1,interactive-widgets=overlays-content" />
+    <title>Viewport Resize Behavior Demos – interactive-widget - overlays-content</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1,interactive-widget=overlays-content" />
     <link rel="stylesheet" href="../../base.css" />
 
     <script type="module">

diff --git a/...eractive-widgets/resize-visual/index.html → ...ractive-widget/resizes-content/index.html b/...eractive-widgets/resize-visual/index.html → ...ractive-widget/resizes-content/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
-    <title>Viewport Resize Behavior Demos – interactive-widgets - resize-visual</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1,interactive-widgets=resize-visual" />
+    <title>Viewport Resize Behavior Demos – interactive-widget - resizes-content</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1,interactive-widget=resizes-content" />
     <link rel="stylesheet" href="../../base.css" />
 
     <script type="module">

diff --git a/...eractive-widgets/resize-layout/index.html → ...eractive-widget/resizes-visual/index.html b/...eractive-widgets/resize-layout/index.html → ...eractive-widget/resizes-visual/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
-    <title>Viewport Resize Behavior Demos – interactive-widgets - resize-layout</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1,interactive-widgets=resize-layout" />
+    <title>Viewport Resize Behavior Demos – interactive-widget - resizes-visual</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1,interactive-widget=resizes-visual" />
     <link rel="stylesheet" href="../../base.css" />
 
     <script type="module">

diff --git a/explainer.md b/explainer.md
@@ -19,7 +19,7 @@ Authors: [Bramus](https://github.com/bramus/), [David Bokan](https://github.com/
 - [Alternatives Considered](#alternatives-considered)
   - [Do nothing](#do-nothing)
   - [The VirtualKeyboard API with `overlaysMode`](#the-virtualkeyboard-api-with-overlaysmode)
-  - [Force all browsers to use a `resize-visual` behavior with no way of switching](#force-all-browsers-to-use-a-resize-visual-behavior-with-no-way-of-switching)
+  - [Force all browsers to use a `resizes-visual` behavior with no way of switching](#force-all-browsers-to-use-a-resizes-visual-behavior-with-no-way-of-switching)
   - [A new meta tag](#a-new-meta-tag)
 - [Prior Art and Interesting Links](#prior-art-and-interesting-links)
   - [Prior Art](#prior-art)
@@ -28,7 +28,7 @@ Authors: [Bramus](https://github.com/bramus/), [David Bokan](https://github.com/
   - [Privacy](#privacy)
   - [Security](#security)
 - [Follow-up work](#follow-up-work)
-  - [Allow authors to easily position elements above the Virtual Keyboard when having opted in to the `resize-visual` behavior](#allow-authors-to-easily-position-elements-above-the-virtual-keyboard-when-having-opted-in-to-the-resize-visual-behavior)
+  - [Allow authors to easily position elements above the Virtual Keyboard when having opted in to the `resizes-visual` behavior](#allow-authors-to-easily-position-elements-above-the-virtual-keyboard-when-having-opted-in-to-the-resizes-visual-behavior)
 
 ## Status of this document
 
@@ -57,7 +57,7 @@ Depending on which behavior a User Agent + Platform combination a visitor uses,
 This document proposes an extension the viewport meta tag so that authors get to opt in to any of those behaviors in a declarative manner.
 
 ```html
-<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widgets=overlays-content">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">
 ```
 
 This way, authors get to control which behavior a User Agent uses.
@@ -244,16 +244,16 @@ For some layouts, authors do not want the layout to resize when the Virtual Keyb
 
 To switch Virtual Keyboard behaviors, authors can use an extra key-value pair the viewport meta tag. That way, they get to control the resize behavior of the various Viewports in case the Virtual Keyboard gets shown.
 
-The key is `interactive-widgets`, and it accepts one of these three values:
+The key is `interactive-widget`, and it accepts one of these three values:
 
-1. `resize-visual` = Resize only the Visual Viewport but not the Layout Viewport
-2. `resize-layout` = Resize both the Visual Viewport and Layout Viewport
+1. `resizes-visual` = Resize only the Visual Viewport but not the Layout Viewport
+2. `resizes-content` = Resize both the Visual Viewport and Layout Viewport
 3. `overlays-content` = Do not resize any viewport
 
 Example:
 
 ```html
-<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widgets=overlays-content">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">
 ```
 
 Visualized, the settings have this effect on the various viewports:
@@ -274,7 +274,7 @@ _ℹ️ Note: Through this declarative way of controlling the resize behavior, w
 - ✅ Authors can opt-in to any of the behaviors, not being bound to what the platform + browser combination their visitors are on uses as a default.
 - ✅ When an author opts in to a certain behavior, they know that elements sized to Viewport-Relative Units –amongst others– will work in a similar way on each platform, in case the Virtual Keyboard is shown.
 - ✅ When an author opts in to a certain behavior, they know that the position of certain elements will behave in a similar way on each platform, in case the Virtual Keyboard is shown.
-- ❌ If authors have opted in to resize-visual but want to retain a fixed positioning behavior where they want to an element above the Virtual Keyboard, they need to resort to JS to achieve this
+- ❌ If authors have opted in to resizes-visual but want to retain a fixed positioning behavior where they want to an element above the Virtual Keyboard, they need to resort to JS to achieve this
   - This workaround is already needed today for browsers that do not resize the ICB
 
 ## Alternatives Considered
@@ -297,9 +297,9 @@ If we were to pursue this, we would force authors to:
 - Manually adjust the size of their layouts
 - Implement workarounds when using the Visual Viewport API. 
 
-### Force all browsers to use a `resize-visual` behavior with no way of switching
+### Force all browsers to use a `resizes-visual` behavior with no way of switching
 
-Right now Chrome on Android uses the `resize-layout` behavior. Changing it to resize-visual with no way back could potentially break a lot of sites that did not expect this change.
+Right now Chrome on Android uses the `resizes-content` behavior. Changing it to resizes-visual with no way back could potentially break a lot of sites that did not expect this change.
 
 As outlined in the examples, it sometimes is necessary to have a layout that adapts itself to the visible space, whereas sometimes it is not. By forcing one behavior without offering a switch, authors are limited in what they can do.
 
@@ -308,7 +308,7 @@ As outlined in the examples, it sometimes is necessary to have a layout that ada
 Instead of opting for a standalone meta tag, we chose to extend the existing viewport one, as this all is linked to the (resize) behavior of the viewport.
 
 ```html
-<meta name="interactive-widgets" content="overlays-content">
+<meta name="interactive-widget" content="overlays-content">
 ```
 
 ## Prior Art and Interesting Links
@@ -340,8 +340,8 @@ There is no known security impact of this feature.
 
 ## Follow-up work
 
-### Allow authors to easily position elements above the Virtual Keyboard when having opted in to the `resize-visual` behavior
+### Allow authors to easily position elements above the Virtual Keyboard when having opted in to the `resizes-visual` behavior
 
-Should authors want to keep the  “old” positioning behavior while opting into resize-visual, they can resort to the Visual Viewport API which offers them JS access to the Visual Viewport’s dimensions and position. Combined with the dimensions of the non-resized Layout Viewport and a few resize events, elements can be guaranteed to appear above the OSK, just like they did before.
+Should authors want to keep the  “old” positioning behavior while opting into resizes-visual, they can resort to the Visual Viewport API which offers them JS access to the Visual Viewport’s dimensions and position. Combined with the dimensions of the non-resized Layout Viewport and a few resize events, elements can be guaranteed to appear above the OSK, just like they did before.
 
 They could use the Visual Viewport API for this, but that [is a bit cumbersome and relies on JavaScript](https://interop-2022-viewport.netlify.app/combined/icb-fixed-visual/). To tackle this at the CSS level, there is [an issue at the CSS Working Group which would give authors a pure CSS way of achieving this](https://github.com/w3c/csswg-drafts/issues/7475).
diff --git a/images/19.png b/images/19.png
diff --git a/package-lock.json b/package-lock.json