{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/3455","repository_url":"https://api.github.com/repos/w3c/csswg-drafts","labels_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/3455/labels{/name}","comments_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/3455/comments","events_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/3455/events","html_url":"https://github.com/w3c/csswg-drafts/issues/3455","id":392404620,"node_id":"MDU6SXNzdWUzOTI0MDQ2MjA=","number":3455,"title":"[css-values] if() function","user":{"login":"matthew-dean","id":414752,"node_id":"MDQ6VXNlcjQxNDc1Mg==","avatar_url":"https://avatars1.githubusercontent.com/u/414752?v=4","gravatar_id":"","url":"https://api.github.com/users/matthew-dean","html_url":"https://github.com/matthew-dean","followers_url":"https://api.github.com/users/matthew-dean/followers","following_url":"https://api.github.com/users/matthew-dean/following{/other_user}","gists_url":"https://api.github.com/users/matthew-dean/gists{/gist_id}","starred_url":"https://api.github.com/users/matthew-dean/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matthew-dean/subscriptions","organizations_url":"https://api.github.com/users/matthew-dean/orgs","repos_url":"https://api.github.com/users/matthew-dean/repos","events_url":"https://api.github.com/users/matthew-dean/events{/privacy}","received_events_url":"https://api.github.com/users/matthew-dean/received_events","type":"User","site_admin":false},"labels":[{"id":395786797,"node_id":"MDU6TGFiZWwzOTU3ODY3OTc=","url":"https://api.github.com/repos/w3c/csswg-drafts/labels/Closed%20Rejected%20as%20Wontfix%20by%20Editor%20Discretion","name":"Closed Rejected as Wontfix by Editor Discretion","color":"f9d0c4","default":false},{"id":410302234,"node_id":"MDU6TGFiZWw0MTAzMDIyMzQ=","url":"https://api.github.com/repos/w3c/csswg-drafts/labels/css-values-4","name":"css-values-4","color":"c5def5","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2018-12-19T01:31:16Z","updated_at":"2018-12-21T00:57:56Z","closed_at":"2018-12-20T23:21:00Z","author_association":"NONE","body":"The addition of `min()`, `max()`, `clamp()` and `toggle()` to the CSS Values 3 draft has made a lot of great progress towards more expressive styles. One thing that would be a very powerful general purpose logic switch would be an `if()` function. (Full disclosure, this matches the implementation in Less - http://lesscss.org/functions/#logical-functions-if, but would be much more powerful in the cascade.)\r\n\r\nIt would have this signature:\r\n\r\n#### `if(condition, trueResult, falseResult)`\r\n\r\nThe `condition` would match the semantics in Media Queries Level 4, and would query the computed properties of an element.\r\n\r\nFor example, here's usage of an `if()` as an emulation of `min()`\r\n```css\r\n.foo {\r\n  --calc: calc(10 * (1vw + 1vh) / 2);\r\n  font-size: if(var(--calc) < 12px, 12px, var(--calc));\r\n}\r\n```\r\nObviously, we already have `min` `max`, but what's useful about `if()` is that, like `toggle()`, you can use it for any value.\r\n```css\r\n.foo {\r\n  /** If our inherited width is below a certain threshold, change flex box wrapping behavior */\r\n  flex-wrap: if(100% < 400px, wrap, nowrap);\r\n  /** Note, a nicer way to write this would be \"width < 400px\" or some kind of units for inherited container width / height, like \"100cw < 400px\" but those don't exist */\r\n}\r\n```\r\nYou could also use it to toggle background based on inherited values.\r\n```css\r\n.foo {\r\n  background: if(currentColor = white, black, lightblue);\r\n}\r\n```\r\nLike `calc()` and like other languages that have a declarative `if()` function, you can of course nest it.\r\n```css\r\n.foo {\r\n  width: if(box-sizing = border-box, 100%, if(var(--adjust), calc(100% - 20px), 100%));\r\n}\r\n```\r\nNote that many other functions in CSS already have a kind of logic test built-in, but they're very restricted, such as `var()` itself, which tests for an inherited value, and has an `else` if the value is not defined.\r\n\r\n`if()` would also pair nicely with `toggle()`, where the toggled value can be tested to resolve other property values.\r\n```css\r\n.foo {\r\n  font-style: toggle(italic, normal);\r\n}\r\n.foo .bar {\r\n  /** Also demonstrates use of MQ4 not() */\r\n  text-transform: if(not (font-style = italic), uppercase, inherit);\r\n}\r\n```\r\n\r\nAnyway, that's for your consideration. Cheers!"},"comment":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/comments/449194275","html_url":"https://github.com/w3c/csswg-drafts/issues/3455#issuecomment-449194275","issue_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/3455","id":449194275,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0OTE5NDI3NQ==","user":{"login":"matthew-dean","id":414752,"node_id":"MDQ6VXNlcjQxNDc1Mg==","avatar_url":"https://avatars1.githubusercontent.com/u/414752?v=4","gravatar_id":"","url":"https://api.github.com/users/matthew-dean","html_url":"https://github.com/matthew-dean","followers_url":"https://api.github.com/users/matthew-dean/followers","following_url":"https://api.github.com/users/matthew-dean/following{/other_user}","gists_url":"https://api.github.com/users/matthew-dean/gists{/gist_id}","starred_url":"https://api.github.com/users/matthew-dean/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matthew-dean/subscriptions","organizations_url":"https://api.github.com/users/matthew-dean/orgs","repos_url":"https://api.github.com/users/matthew-dean/repos","events_url":"https://api.github.com/users/matthew-dean/events{/privacy}","received_events_url":"https://api.github.com/users/matthew-dean/received_events","type":"User","site_admin":false},"created_at":"2018-12-21T00:57:56Z","updated_at":"2018-12-21T00:57:56Z","author_association":"NONE","body":"@tabatkins \r\n\r\n> Tangent: be careful with your units invention - ch is already a valid unit, so I was really confused by your example for a while. ^_^\r\n\r\nlol whoops. Not a unit I've used.\r\n\r\nIn any case, if I didn't say it already, I'm excited to see `min()` `max()` and `clamp()` there. And `toggle()` was a nice surprise. So it's still great progress in my book."}}
{"actor":{"display_login":"matthew-dean"}}