Re: [csswg-drafts] [css-values]: Express conditional values in a more terse way (#5009)

If we are going to talk about a switch like function solution I think this *conceptually* fits with the existing switch/context proposal in that it seems like the underlying machinery could let you write tab's custom thing with some context property (which of course needs a whole topic discussion, but so does tabs I think) something like

``` 
@media (max-width: [1200px, 768px, 425px]) {
  .text-box {
    font-size: switch(
     (breakpoint == 1) 24px; 
     (breakpoint == 2) 20px; 
     (breakpoint == 3) 16px;
    );
    padding: switch(
     (breakpoint == 1) 50px; 
     (breakpoint == 2) 30px; 
     (breakpoint == 3) 10px;
    );
    margin: switch(
     (breakpoint == 1) 50px 25px; 
     (breakpoint == 2) 25px 12.5px; 
     (breakpoint == 3) 12.5px;
    );
  }
}
```

So then this would let us unify underlying work and answer a bunch of questions 'together' rather than entirely disjointly.  We could easily sugar this as something like..

```
@media (max-width: [1200px, 768px, 425px]) {
  .text-box {
    font-size: breakpoint(
     24px; 
     20px; 
     16px;
    );
    padding: breakpoint(
     50px; 
     30px; 
     10px;
    );
    margin: breakpoint(
     50px 25px; 
     25px 12.5px; 
     12.5px;
    );
  }
}
```

But at least a lot of the harder questions can be centralized?

-- 
GitHub Notification of comment by bkardell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-625478736 using your GitHub account

Received on Thursday, 7 May 2020 20:25:26 UTC