W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2016

Re: [csswg-drafts] [css-values] [css-fonts-4] Native map() function in CSS

From: Tab Atkins Jr. via GitHub <sysbot+gh@w3.org>
Date: Mon, 10 Oct 2016 18:10:20 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-252697343-1476123018-sysbot+gh@w3.org>
I agree with others - the primitive you want here is a naked 
`interpolate()` function. We have this, specialized for images, in 
`cross-fade()` - it's reasonable to want something that'll interpolate
 anything interpolable.

The viewport-responding stuff you're talking about is, I presume, the 
concept referred to as "CSS Locks"? It's pretty cool (especially with 
Variable Fonts on the horizon), and I agree that it's way more 
difficult/limited than it needs to be right now.  I think the proper 
solution for this is something we already have plans to do - being 
able to do unit algebra.  That way, you can express the fraction you 
want in terms of viewport sizes.  For example, your first example 
(interpolate between 18px and 24px as the viewport goes from 400px to 
800px wide) could be done as:

```
calc(18px + 6px * ((100vw - 400px) / 400px) )
```

That `(100vw - 400px) / 400px` part resolves to a number between 0 and
 1 when `100vw` is between 400px and 800px. Combined with a min() and 
max() function (or, for some properties, the `min-*` and `max-*` 
properties), it can ensure that the value doesn't go outside that 
range either.  (Or probably more readably, a `clamp()` function that 
does both limits at once.)

The calc() expression above actually does the full linear 
interpolation for you, because lengths are calc-able.  It's possible 
more readable to use the `interpolate()` function direclty, tho; for 
other values that aren't directly calc-able, you need `interpolate()` 
to make it work at all:

```
interpolate(18px, 24px, calc((100vw - 400px) / 400px));
interpolate(red, blue, calc((100vw - 400px) / 400px));
```

While this isn't quite as direct as your original proposal, it has 
exactly the same power (particularly if `interpolate()` takes an 
easing argument), and is based on two very reasonable primitives 
rather than a single special-case function.  If this type of 
interpolation becomes popular afterwards, we can look at making a 
built-in function for it.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/581#issuecomment-252697343 
using your GitHub account
Received on Monday, 10 October 2016 18:10:27 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:04 UTC