Skip to content

Commit ff353bd

Browse files
committed
[css-values-5] Simplify example in calc-size() explainer.
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.
1 parent 16c20b5 commit ff353bd

File tree

1 file changed

+1
-6
lines changed

1 file changed

+1
-6
lines changed

css-values-5/calc-size-explainer.md

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -141,18 +141,13 @@ animate its `height` when it opens and closes:
141141
```css
142142
details::details-content {
143143
--open-close-duration: 500ms;
144-
display: block; /* override default 'display: contents' */
145144
height: 0;
146145
overflow: hidden;
147146
transition: height var(--open-close-duration),
148-
content-visibility var(--open-close-duration) allow-discrete step-end;
147+
content-visibility var(--open-close-duration) allow-discrete;
149148
}
150149
details[open]::details-content {
151150
height: calc-size(max-content);
152-
/* repeat the 'transition' but with 'step-start' (for opening) rather than
153-
'step-end' (for closing) */
154-
transition: height var(--open-close-duration),
155-
content-visibility var(--open-close-duration) allow-discrete step-start;
156151
}
157152
```
158153

0 commit comments

Comments
 (0)