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

Technical review: add interpolate-size and calc-size() #35934

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Technical review: add interpolate-size and calc-size() #35934

wants to merge 3 commits into from

Conversation

chrisdavidmills
Copy link
Contributor

Description

Chrome 129 supports the interpolate-size property and calc-size() function, which enable animation to/from and calculations involving intrinsic size values. This PR adds reference documentation for these new features.

See also:

Motivation

Additional details

Related issues and pull requests

@chrisdavidmills chrisdavidmills requested a review from a team as a code owner September 18, 2024 12:15
@chrisdavidmills chrisdavidmills requested review from estelle and removed request for a team September 18, 2024 12:15
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Sep 18, 2024
@chrisdavidmills chrisdavidmills marked this pull request as draft September 18, 2024 12:16
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Sep 18, 2024 •
edited
Loading

Preview URLs (13 pages)
Flaws (6)

Note! 7 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Glossary/Intrinsic_Size
Title: Intrinsic size
Flaw count: 1

  • broken_links:
    • Link points to the page it's already on

URL: /en-US/docs/Web/CSS/calc
Title: calc()
Flaw count: 1

  • macros:
    • /en-US/docs/Web/CSS/auto redirects to /en-US/docs/Web/CSS/width

URL: /en-US/docs/Web/CSS/height
Title: height
Flaw count: 1

  • macros:
    • /en-US/docs/Web/CSS/auto redirects to /en-US/docs/Web/CSS/width

URL: /en-US/docs/Web/CSS/inline-size
Title: inline-size
Flaw count: 1

  • macros:
    • /en-US/docs/Web/CSS/auto redirects to /en-US/docs/Web/CSS/width

URL: /en-US/docs/Web/CSS/width
Title: width
Flaw count: 1

  • macros:
    • /en-US/docs/Web/CSS/auto redirects to /en-US/docs/Web/CSS/width

URL: /en-US/docs/Web/CSS/block-size
Title: block-size
Flaw count: 1

  • macros:
    • /en-US/docs/Web/CSS/auto redirects to /en-US/docs/Web/CSS/width
External URLs (3)

URL: /en-US/docs/Web/CSS/interpolate-size
Title: interpolate-size

URL: /en-US/docs/Web/CSS/calc-size
Title: calc-size()

(comment last updated: 2024-09-19 20:04:04)

@github-actions github-actions bot added size/l [PR only] 501-1000 LoC changed and removed size/m [PR only] 51-500 LoC changed labels Sep 19, 2024
@github-actions github-actions bot added the Content:Glossary Glossary entries label Sep 19, 2024
@chrisdavidmills chrisdavidmills marked this pull request as ready for review September 19, 2024 20:03
@chrisdavidmills chrisdavidmills requested a review from a team as a code owner September 19, 2024 20:03
@chrisdavidmills chrisdavidmills requested review from Elchi3 and removed request for a team September 19, 2024 20:03
@chrisdavidmills chrisdavidmills changed the title Add interpolate-size and calc-size() Technical review: add interpolate-size and calc-size() Sep 19, 2024
bramus
bramus reviewed Sep 20, 2024
View reviewed changes
files/en-us/web/css/calc-size/index.md
```css
section {
width: calc-size(fit-content, size + 4rem);
height: calc-size(auto, size * 1.40;
Copy link
Contributor

Choose a reason for hiding this comment

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

Missing semicolon:

Suggested change
height: calc-size(auto, size * 1.40;
height: calc-size(auto, size * 1.40);

files/en-us/web/css/calc-size/index.md
<h2>Chris Mills</h2>
</header>
<main>
<p>Chris is the silent phantom of MDN.</p>
Copy link
Contributor

Choose a reason for hiding this comment

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

:)

files/en-us/web/css/interpolate-size/index.md

### Values that can be interpolated

At the time of writing, the following intrinsic values can be opted-in to animations:
Copy link
Contributor

Choose a reason for hiding this comment

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

This is a Chrome limitation. I’m not sure if other browsers – when they ship this – would have these same limitations. They could, for example, support stretch out of of the box.

(I’m also not sure if “At the time of writing” is something that conforms to MDN’s writing style)

files/en-us/web/css/calc-size/index.md
The **`calc-size()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) allows you to perform calculations on [intrinsic size values](/en-US/docs/Glossary/Intrinsic_Size) such as `auto`, [`fit-content`](/en-US/docs/Web/CSS/fit-content), and [`max-content`](/en-US/docs/Web/CSS/max-content); this is not supported by the regular {{cssxref("calc()")}} function.

`calc-size()` return values can also be interpolated, enabling their use in [animations](/en-US/docs/Web/CSS/CSS_animations) and [transitions](/en-US/docs/Web/CSS/CSS_transitions). In effect, they have [`interpolate-size: allow-keywords`](/en-US/docs/Web/CSS/interpolate-size) applied to them automatically.

Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe there should be some kind of warning here to urge people to use interpolate-size as that will do most of the time?

(It is mentioned further down)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bramus bramus bramus left review comments

@estelle estelle Awaiting requested review from estelle estelle is a code owner automatically assigned from mdn/yari-content-css

@Elchi3 Elchi3 Awaiting requested review from Elchi3 Elchi3 is a code owner automatically assigned from mdn/yari-content-mdn

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
Content:CSS Cascading Style Sheets docs Content:Glossary Glossary entries size/l [PR only] 501-1000 LoC changed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@chrisdavidmills @bramus