Some other example use cases:
- Trigger layout changes as the user scrolls for storytelling or
creative direction e.g. Create gradients that smoothly shift colors or
positions based on scroll progress or container size, or apply filter
effects like blur or saturation based on scroll position or container
dimensions, creating dynamic visual effects.
- Progress bars based on scroll position or container layout
- Adjust font sizes based on the viewport width or container size, for
example to improve readability across different screen sizes.
e.g. h1 { font-size: calc(1rem + 2rem * media-progress(width, 320px,
1200px)); }
On Wed, Feb 19, 2025 at 6:44 AM Daniel Bratell <bratel...@gmail.com> wrote:
> I also find it a bit hard to understand what it is meant to accomplish and
> how it does so. I might be missing some basic knowledge block here, but ...
> why?
>
> Maybe when the tests are updated I can look at those, but if you were to
> explain this to someone like ... I don't know, a manager, how would you
> explain what it does?
>
> /Daniel
> On 2025-02-19 11:34, Daniil Sakhapov wrote:
>
> I imagine the use case example would be using e.g. container-progress
> inside color(), so that you can change the color, based on some ancestor
> parent's size - 'color: rgb(container-progress(width of my-container,
> var(--container-min-size), var(--container-max-size)), ..., ...);'
>
> Ah, for some reason we don't have 'In Progress' option for Gecko, only for
> Webkit, and the tool didn't copy my comment on that here, but they are
> working on it.
>
> The test is failing as there has been minor synax change and it's been
> addressed on Monday, WPT hasn't been updated yet.
> вторник, 18 февраля 2025 г. в 20:24:40 UTC+1, Mike Taylor:
>
>> On 2/18/25 12:15 PM, Chromestatus wrote:
>>
>> Contact emails sakha...@chromium.org
>>
>> Explainer None
>>
>> Could you describe what these features allow for (beyond what you have in
>> the summary), maybe with some example code? It's not obvious to me what it
>> means practically to represent proportional distance of a container
>> feature, for example.
>>
>>
>> Specification https://drafts.csswg.org/css-values-5/#progress
>>
>> Summary
>>
>> The progress(), media-progress(), and container-progress() functional
>> notations represent the proportional distance of a given value (the
>> progress value) from one value (the progress start value) to another value
>> (the progress end value). They allow drawing a progress ratio from math
>> functions, media features, and container features, respectively.
>>
>>
>> Blink component Blink>CSS
>> <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22>
>>
>> TAG review None
>>
>> TAG review status Not applicable
>>
>> Risks
>>
>>
>> Interoperability and Compatibility
>>
>> None
>>
>>
>> *Gecko*: No signal
>>
>> Can we request one please?
>>
>>
>> *WebKit*: Shipped/Shipping
>>
>> *Web developers*: Strongly positive Mostly for calc() hacks like getting
>> rid of units
>>
>> *Other signals*:
>>
>> WebView application risks
>>
>> Does this intent deprecate or change behavior of existing APIs, such that
>> it has potentially high risk for Android WebView-based applications?
>>
>> None
>>
>>
>> Debuggability
>>
>> None
>>
>>
>> Will this feature be supported on all six Blink platforms (Windows, Mac,
>> Linux, ChromeOS, Android, and Android WebView)? Yes
>>
>> Is this feature fully tested by web-platform-tests
>> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>
>> ? Yes
>>
>> https://wpt.fyi/css/css-values/progress-computed.tentative.html
>> https://wpt.fyi/css/css-values/media-progress-computed.tentative.html
>> https://wpt.fyi/css/css-values/container-progress-computed.tentative.html
>>
>> These tests are all failing in Chromium. Any reason why? Also, they
>> shouldn't be considered tentative tests now, correct?
>>
>>
>>
>> Flag name on about://flags CSSProgressNotation
>>
>> Finch feature name None
>>
>> Non-finch justification None
>>
>> Requires code in //chrome? False
>>
>> Tracking bug https://issues.chromium.org/issues/40944203
>>
>> Estimated milestones
>> Shipping on desktop 135
>> Shipping on Android 135
>> Shipping on WebView 135
>>
>> Anticipated spec changes
>>
>> Open questions about a feature may be a source of future web compat or
>> interop issues. Please list open issues (e.g. links to known github issues
>> in the project for the feature specification) whose resolution may
>> introduce web compat/interop risk (e.g., changing to naming or structure of
>> the API in a non-backward-compatible way).
>> None
>>
>> Link to entry on the Chrome Platform Status
>> https://chromestatus.com/feature/5112558941634560?gate=5096732792455168
>>
>> This intent message was generated by Chrome Platform Status
>> <https://chromestatus.com>.
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "blink-dev" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to blink-dev+unsubscr...@chromium.org.
>> To view this discussion visit
>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67b4c03b.2b0a0220.399c7e.014b.GAE%40google.com
>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67b4c03b.2b0a0220.399c7e.014b.GAE%40google.com?utm_medium=email&utm_source=footer>
>> .
>>
>> --
> You received this message because you are subscribed to the Google Groups
> "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to blink-dev+unsubscr...@chromium.org.
> To view this discussion visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ff893886-dbfb-4404-833b-384206d8a4edn%40chromium.org
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ff893886-dbfb-4404-833b-384206d8a4edn%40chromium.org?utm_medium=email&utm_source=footer>
> .
>
> --
> You received this message because you are subscribed to the Google Groups
> "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to blink-dev+unsubscr...@chromium.org.
> To view this discussion visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4702f132-3736-4b4d-bb41-5d52d7f33e5d%40gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4702f132-3736-4b4d-bb41-5d52d7f33e5d%40gmail.com?utm_medium=email&utm_source=footer>
> .
>
--
*Penny McLachlan*
(she/her)
Senior Product Manager
pjmclach...@google.com
Google Chrome
--
You received this message because you are subscribed to the Google Groups
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to blink-dev+unsubscr...@chromium.org.
To view this discussion visit
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFuQ4YtoM_-2eu8n%3DTNZJvVKTMRTVTn4iDffHHAfVsbq1MTN7g%40mail.gmail.com.
