Skip to content

Commit

Permalink
[css-values-5] Simplify example in calc-size() explainer.
Browse files Browse the repository at this point in the history
This simplifies the example in two ways:

1. By depending on the animation rules defined in
https://drafts.csswg.org/css-contain-3/#content-visibility-animation the
step-end and step-start values are not needed.  (I had forgotten about
these.)

2. By depending on the change in
whatwg/html#10265 (comment)
and
whatwg/html@fb3033a
the display: block is no longer needed.
  • Loading branch information
dbaron committed Jun 5, 2024
1 parent 16c20b5 commit ff353bd
Showing 1 changed file with 1 addition and 6 deletions.
7 changes: 1 addition & 6 deletions css-values-5/calc-size-explainer.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,18 +141,13 @@ animate its `height` when it opens and closes:
```css
details::details-content {
--open-close-duration: 500ms;
display: block; /* override default 'display: contents' */
height: 0;
overflow: hidden;
transition: height var(--open-close-duration),
content-visibility var(--open-close-duration) allow-discrete step-end;
content-visibility var(--open-close-duration) allow-discrete;
}
details[open]::details-content {
height: calc-size(max-content);
/* repeat the 'transition' but with 'step-start' (for opening) rather than
'step-end' (for closing) */
transition: height var(--open-close-duration),
content-visibility var(--open-close-duration) allow-discrete step-start;
}
```

Expand Down

0 comments on commit ff353bd

Please sign in to comment.