zoom CSS Property (mdn#33473)

* updated the current examples and added a new one

* added section about differences between zoom and transform scale

* added zoom property to see also on scale function

files/en-us/web/css/transform-function/scale/index.md

@@ -217,6 +217,7 @@ div {
 
 - {{cssxref("transform")}}
 - {{cssxref("scale")}}
+- {{cssxref("zoom")}}
 - {{cssxref("<transform-function>")}}
 - {{cssxref("transform-function/scale3d", "scale3d()")}}
 - Other individual transform properties {{cssxref("translate")}} and {{cssxref("rotate")}}

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

@@ -9,6 +9,12 @@ browser-compat: css.properties.zoom
 
 The **`zoom`** [CSS](/en-US/docs/Web/CSS) property can be used to control the magnification level of an element. {{cssxref("transform-function/scale", "transform: scale()")}} should be used instead of this property, if possible. However, unlike CSS Transforms, `zoom` affects the layout size of the element.
 
+## Difference between zoom and transform:scale()
+
+The `zoom` CSS property scales the whole element that is being targeted and this will have an effect on the layout of the page. When scaling the zoomed element scales from `top` `center` when using the default {{CSSXRef("writing-mode")}}.
+
+{{cssxref("transform-function/scale", "transform: scale()")}} the element being targeted will remain the same and the content within will scale, if scaling makes the element larger than the containing element then {{CSSXRef("overflow")}} comes into place. When scaling the transformed element scales from the `center` (by default) this can be changed with {{CSSXRef("transform-origin")}} CSS property.
+
 ## Syntax
 
 ```css
@@ -56,7 +62,9 @@ zoom =
 
 ## Examples
 
-### First example
+### Resizing paragraphs
+
+In this example the paragraph elements are zoomed, on hovering a paragraph the `zoom` value is `unset`.
 
 #### HTML
 
@@ -94,9 +102,11 @@ p:hover {
 
 #### Result
 
-{{EmbedLiveSample('First_example')}}
+{{EmbedLiveSample('resizing_paragraphs')}}
 
-### Second example
+### Resizing elements
+
+In this example the `div` elements are zoomed using the `normal`, `<percentage>`, and `<number>` values.
 
 #### HTML
 
@@ -113,28 +123,128 @@ div.circle {
   width: 25px;
   height: 25px;
   border-radius: 100%;
-  text-align: center;
   vertical-align: middle;
   display: inline-block;
-  zoom: 1.5;
 }
 div#a {
   background-color: gold;
-  zoom: normal;
+  zoom: normal; /* circle is 25px diameter */
 }
 div#b {
   background-color: green;
-  zoom: 200%;
+  zoom: 200%; /* circle is 50px diameter */
 }
 div#c {
   background-color: blue;
-  zoom: 2.9;
+  zoom: 2.9; /* circle is 72.5px diameter */
 }
 ```
 
 #### Result
 
-{{EmbedLiveSample('Second_example')}}
+{{EmbedLiveSample('resizing_elements')}}
+
+### Creating a zoom control
+
+In this example a `select` field is used to change the zoom level of the .
+
+#### HTML
+
+In this first block, of HTML, a `select` field is defined with the different `zoom` values to be used.
+
+```html
+<section class="controls">
+  <label for="zoom"
+    >Zoom level
+    <select name="zoom" id="zoom">
+      <option value="0.5">Extra Small</option>
+      <option value="0.75">Small</option>
+      <option value="normal" selected>Normal</option>
+      <option value="1.5">Large</option>
+      <option value="2">Extra Large</option>
+    </select>
+  </label>
+</section>
+```
+
+In this second block a **not supported** message is added that will be hidden if the browser supports `zoom`.
+
+```html
+<p class="zoom-notice">CSS zoom is not supported</p>
+```
+
+The final block just defines the content that will be zoomed.
+
+```html
+<section class="content">
+  <h1>This is the heading</h1>
+  <p>
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
+    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
+    provident repellat officiis facilis alias facere obcaecati quos sunt
+    voluptas! Iste.
+  </p>
+  <p>
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
+    ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
+    provident repellat officiis facilis alias facere obcaecati quos sunt
+    voluptas! Iste.
+  </p>
+</section>
+```
+
+#### CSS
+
+In this first block, of CSS, we are setting the starting value for the `--zoom-level` using [custom properties](/en-US/docs/Web/CSS/--*) and then using that as the value for `zoom` on the content block.
+
+```css
+html {
+  --zoom-level: normal;
+}
+.content {
+  max-width: 60ch;
+  margin: auto;
+  zoom: var(--zoom-level);
+}
+```
+
+```css hidden
+.controls,
+.zoom-notice {
+  display: flex;
+  justify-content: space-around;
+}
+.zoom-notice {
+  color: red;
+}
+```
+
+In this final CSS block we are checking to see if the browser supports `zoom` and if so setting the **not supported** message to `diplay: none;`.
+
+```css
+@supports (zoom: 1) {
+  .zoom-notice {
+    display: none;
+  }
+}
+```
+
+#### JavaScript
+
+This JavaScript watches for a change in the select field and sets the new value for `--zoom-level` on the content `section`, e.g. `style="--zoom-level: 1.5;"`.
+
+```js
+const zoomControl = document.querySelector("#zoom");
+const content = document.querySelector(".content");
+const updateZoom = () => {
+  content.style = `--zoom-level: ${zoomControl.value}`;
+};
+zoomControl.addEventListener("change", updateZoom);
+```
+
+#### Result
+
+{{EmbedLiveSample('creating_a_zoom_control', '550', '280')}}
 
 ## Specifications