RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/zoom below:

zoom - CSS | MDN

/* <percentage> values */
zoom: 50%;
zoom: 200%;

/* <number> values */
zoom: 1.1;
zoom: 0.7;

/* Non-standard keyword values */
zoom: normal;
zoom: reset;

/* Global values */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

Values

<percentage>: Zoom factor. 100% is equivalent to normal. Values larger than 100% zoom in. Values smaller than 100% zoom out.
<number>: Zoom factor. Equivalent to the corresponding percentage (1.0 = 100% = normal). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.

Two non-standard keyword values are not recommended. Check browser compatibility data:

normal: Render the element at its normal size; equal to zoom: 1. Use the global unset keyword value instead.
reset: Resets the value to zoom: 1 and prevents the element from being (de)magnified if the user applies non-pinch-based zooming (e.g., by pressing Ctrl - - or Ctrl + + keyboard shortcuts) to the document.

Formal definition Formal syntax

zoom = 
  <number [0,â]>      |
  <percentage [0,â]>

Examples Resizing paragraphs

In this example the paragraph elements are zoomed, on hovering a paragraph the zoom value is unset.

HTML

<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}

.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

Result Resizing elements

In this example the div elements are zoomed using the normal, <percentage>, and <number> values.

HTML

<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>

CSS

div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  vertical-align: middle;
  display: inline-block;
}
div#a {
  background-color: gold;
  zoom: normal; /* circle is 25px diameter */
}
div#b {
  background-color: green;
  zoom: 200%; /* circle is 50px diameter */
}
div#c {
  background-color: blue;
  zoom: 2.9; /* circle is 72.5px diameter */
}

Result Creating a zoom control

In this example a select field is used to change the zoom level of the element.

HTML

In this first block, of HTML, a select field is defined with the different zoom values to be used.

<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.

<p class="zoom-notice">CSS zoom is not supported</p>

The final block just defines the content that will be zoomed.

<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 and then using that as the value for zoom on the content block.

html {
  --zoom-level: normal;
}
.content {
  max-width: 60ch;
  margin: auto;
  zoom: var(--zoom-level);
}

.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 display: none;.

@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;".

const zoomControl = document.querySelector("#zoom");
const content = document.querySelector(".content");
const updateZoom = () => {
  content.style = `--zoom-level: ${zoomControl.value}`;
};
zoomControl.addEventListener("change", updateZoom);

Result Specifications Browser compatibility

Loadingâ¦