From ff353bd7ae2898f2e939149c2de77ea687a73eae Mon Sep 17 00:00:00 2001 From: "L. David Baron" Date: Wed, 5 Jun 2024 16:33:26 -0400 Subject: [PATCH] [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 https://github.com/whatwg/html/pull/10265#issuecomment-2145837051 and https://github.com/whatwg/html/pull/10265/commits/fb3033aad0a48ae7d0b3285e220834a601ea2341 the display: block is no longer needed. --- css-values-5/calc-size-explainer.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/css-values-5/calc-size-explainer.md b/css-values-5/calc-size-explainer.md index d533144778c..04c4b1ec1c1 100644 --- a/css-values-5/calc-size-explainer.md +++ b/css-values-5/calc-size-explainer.md @@ -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; } ```