{"action":"created","issue":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/544","repository_url":"https://api.github.com/repos/w3c/csswg-drafts","labels_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/544/labels{/name}","comments_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/544/comments","events_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/544/events","html_url":"https://github.com/w3c/csswg-drafts/issues/544","id":179817848,"number":544,"title":"[css-values] Re-adding min() and max()?","user":{"login":"LeaVerou","id":175836,"avatar_url":"https://avatars.githubusercontent.com/u/175836?v=3","gravatar_id":"","url":"https://api.github.com/users/LeaVerou","html_url":"https://github.com/LeaVerou","followers_url":"https://api.github.com/users/LeaVerou/followers","following_url":"https://api.github.com/users/LeaVerou/following{/other_user}","gists_url":"https://api.github.com/users/LeaVerou/gists{/gist_id}","starred_url":"https://api.github.com/users/LeaVerou/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LeaVerou/subscriptions","organizations_url":"https://api.github.com/users/LeaVerou/orgs","repos_url":"https://api.github.com/users/LeaVerou/repos","events_url":"https://api.github.com/users/LeaVerou/events{/privacy}","received_events_url":"https://api.github.com/users/LeaVerou/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/w3c/csswg-drafts/labels/css-values-4","name":"css-values-4","color":"c5def5"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-09-28T16:12:10Z","updated_at":"2016-10-04T11:38:30Z","closed_at":null,"body":"Perhaps now that Values 3 has gone to CR it's time to reconsider adding `min()` and `max()` back into Values 4?\r\n\r\nAuthors are doing extremely [weird](http://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks) [hacks](http://fvsch.com/code/css-locks/) with `calc()` to emulate them in `font-size` and `line-height`, which they call \"CSS locks\". If you google _CSS locks_ you will see how widespread these hacks are becoming, indicating a clear author need.\r\n\r\nFurthermore, as CSS variables become more widely used, the need for `min()` and `max()` will become even greater. I recall some of the issues that [made us drop them 6 years ago](https://lists.w3.org/Archives/Public/www-style/2010Sep/0233.html) can now be solved with the _invalid at computed value time_ concept that Variables introduced."},"comment":{"url":"https://api.github.com/repos/w3c/csswg-drafts/issues/comments/251364549","html_url":"https://github.com/w3c/csswg-drafts/issues/544#issuecomment-251364549","issue_url":"https://api.github.com/repos/w3c/csswg-drafts/issues/544","id":251364549,"user":{"login":"Crissov","id":6200185,"avatar_url":"https://avatars.githubusercontent.com/u/6200185?v=3","gravatar_id":"","url":"https://api.github.com/users/Crissov","html_url":"https://github.com/Crissov","followers_url":"https://api.github.com/users/Crissov/followers","following_url":"https://api.github.com/users/Crissov/following{/other_user}","gists_url":"https://api.github.com/users/Crissov/gists{/gist_id}","starred_url":"https://api.github.com/users/Crissov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Crissov/subscriptions","organizations_url":"https://api.github.com/users/Crissov/orgs","repos_url":"https://api.github.com/users/Crissov/repos","events_url":"https://api.github.com/users/Crissov/events{/privacy}","received_events_url":"https://api.github.com/users/Crissov/received_events","type":"User","site_admin":false},"created_at":"2016-10-04T11:38:30Z","updated_at":"2016-10-04T11:38:30Z","body":"So, for “locks”,\r\n\r\n``` css\r\nselector {\r\n  property: /* $min_value ≤ */ $fallback_value /* ≤ $max_value = $min_value + $max_increment */;\r\n}\r\n@media (min-width: $min_vw) and (max-width: $max_vw) {\r\n  selector {\r\n    property: calc( $min_value + $max_increment *   (100vw - $min_vw) \r\n                //*                               ———————————————————  */\r\n                                                  ($max_vw - $min_vw)  );\r\n  }\r\n}\r\n@media (max-width: $min_vw) {\r\n  selector {\r\n    property: calc( $min_value + 0 );\r\n  }\r\n}\r\n@media (min-width: $max_vw) {\r\n  selector {\r\n    property: calc( $min_value + $max_increment /* = $max_value */ );\r\n  }\r\n}\r\n```\r\n\r\nwould become\r\n\r\n``` css\r\nselector {\r\n  property: /* $min_value ≤ */ $fallback_value /* ≤ $max_value = $min_value + $max_increment */;\r\n  property: calc( $min_value + $max_increment * min(  (100vw - $min_vw) \r\n              //*                                   ———————————————————     */\r\n                                                    ($max_vw - $min_vw), 1) );\r\n}\r\n```\r\n\r\nright?\r\n\r\nI wonder if authors would also find good use for `mid()`dle/`avg()`, `med()`ian, `mod()`e etc."}}
{"actor":{"display_login":"Crissov"}}