Re: [csswg-drafts] [css-env] Adding custom env() variables (#2627)

> I have a calculated "base font size" that grows/shrinks based on window width, but stops at min/max values at specified min/max width.

Sounds like a job for [`clamp()`](https://drafts.csswg.org/css-values-4/#comp-func), rather than media queries:

```css
:root {
  font-size: clamp(10px, 10vw, 50px);
}
```

As for using custom identifiers in Media Query conditions, though you do need to process it (either ahead of time, or at runtime) there's already flexibility in CSS to allow you to encode some nice breakpoints, and write at-rules that use those user-defined breakpoints, and interpret those at-rules as though they were media queries written for the values those custom breakpoints represent:

```css
:root {
  --breakpoints: {
    "narrow": "(min-width: 300px)",
    "medium": "(min-width: 600px)",
    "wide": "(min-width: 900px)"
  }
}

@supports (--breakpoint("narrow")) {
  html {
    background: red;
  }
}

@supports (--breakpoint("medium")) {
  html {
    background: green;
  }
}

@supports (--breakpoint("wide")) {
  html {
    background: blue;
  }
}
```

Demo: https://codepen.io/tomhodgins/pen/yLBOyBe

So nothing else needs to be added to CSS to accomplish either the scalable font-size functionality where a scalable unit is capped with a minimum and maximum it won't go beyond, as well as the ability to encode custom breakpoint names and refer to them, though for the second one you'll need a little bit of code to help either in advance, or like my Codepen demo in the browser at runtime :D

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

Received on Thursday, 31 October 2019 15:24:15 UTC