Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mark normal and reset as non-standard values for zoom property #36732

Merged
merged 13 commits into from
Nov 15, 2024
Merged

Mark normal and reset as non-standard values for zoom property #36732

Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
dcf198a
Mark `normal` and `reset` as non-standard values for `zoom` property
FelixTakeOne Nov 11, 2024
218242d
Update files/en-us/web/css/zoom/index.md
FelixTakeOne Nov 11, 2024
7fdb02a
Merge branch 'mdn:main' into Felix-branch-4
FelixTakeOne Nov 13, 2024
0d54366
Update files/en-us/web/css/zoom/index.md
FelixTakeOne Nov 13, 2024
68bbaf2
Update files/en-us/web/css/zoom/index.md
FelixTakeOne Nov 13, 2024
581ebf1
Update files/en-us/web/css/zoom/index.md
FelixTakeOne Nov 13, 2024
8019cb4
Update index.md
FelixTakeOne Nov 13, 2024
f0ecc37
Update files/en-us/web/css/zoom/index.md
FelixTakeOne Nov 13, 2024
cba3761
Update files/en-us/web/css/zoom/index.md
FelixTakeOne Nov 13, 2024
e60c9c9
Update files/en-us/web/css/zoom/index.md
FelixTakeOne Nov 13, 2024
b6e4b1d
Merge branch 'main' into Felix-branch-4
FelixTakeOne Nov 13, 2024
3f36037
Merge branch 'mdn:main' into Felix-branch-4
FelixTakeOne Nov 13, 2024
b0fb3f6
change order of initial examples
estelle Nov 15, 2024
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
13 changes: 7 additions & 6 deletions files/en-us/web/css/zoom/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ Additionally, elements adjusted using `scale()` transform from the `center` by d
## Syntax

```css
/* Keyword values */
zoom: normal;
zoom: reset;
/* Keyword values (Non-standard, use with caution) */
zoom: normal; /* Non-standard value, not recommended for use */
zoom: reset; /* Non-standard value, not recommended for use */
FelixTakeOne marked this conversation as resolved.
Show resolved Hide resolved

/* <percentage> values */
zoom: 50%;
Expand All @@ -43,9 +43,9 @@ zoom: unset;
### Values

- `normal`
- : Render this element at its normal size.
- : Render this element at its normal size. **Non-standard.** Avoid using this value. Consider using `unset` instead.
FelixTakeOne marked this conversation as resolved.
Show resolved Hide resolved
- `reset`
- : Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd> \- <kbd>-</kbd> or <kbd>Ctrl</kbd> \+ <kbd>+</kbd> keyboard shortcuts) to the document. **Do not use** this value, _use the standard `unset` value instead_.
- : Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd> \- <kbd>-</kbd> or <kbd>Ctrl</kbd> \+ <kbd>+</kbd> keyboard shortcuts) to the document. **Non-standard.** Consider using `unset` instead.
Copy link
Member

@estelle estelle Nov 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Suggest listing the valid values (percent and number) first, then adding a paragraph that reads something to the effect of:

"Non-standard keyword values include reset and normal. These values are not recommended. Check browser compatibility data:"

and putting the edited non-standard values after.

FelixTakeOne marked this conversation as resolved.
Show resolved Hide resolved
- {{cssxref("&lt;percentage&gt;")}}
- : Zoom factor. `100%` is equivalent to `normal`. Values larger than `100%` zoom in. Values smaller than `100%` zoom out.
- {{cssxref("&lt;number&gt;")}}
Expand All @@ -59,7 +59,7 @@ zoom: unset;

```plain
zoom =
normal | reset | <number> | <percentage>
normal | reset | <number> | <percentage> /* Non-standard values */
Copy link
Member

Choose a reason for hiding this comment

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

we can get rid of all the text here, and use the macro:

{{csssyntax}}

this will then include what is included in the spec (and not the non-standard values)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for your suggestions, I learn a lot.

```

## Examples
Expand Down Expand Up @@ -259,3 +259,4 @@ zoomControl.addEventListener("change", updateZoom);
## See also

- [`zoom` entry in CSS-Tricks' CSS Almanac](https://css-tricks.com/almanac/properties/z/zoom/)
- [CSS Unset keyword](/en-US/docs/Web/CSS/unset) - Information on the `unset` keyword, a recommended alternative for resetting properties, such as `zoom`, that are deprecated.
FelixTakeOne marked this conversation as resolved.
Show resolved Hide resolved