W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2020

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

From: Brian Kardell via GitHub <sysbot+gh@w3.org>
Date: Thu, 07 May 2020 20:25:25 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-625478736-1588883124-sysbot+gh@w3.org>
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

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