2

I'm building a responsive layout, referencing my variable in media queries, like this:

.item {
    --width: calc(50% - 10px);
    width: var(--width);
    padding-top: calc(var(--width) * 0.75);
}

@media(min-width: 920px) {
    .item {
        --width: calc(33.3333% - 10px);
    }
}

@media(min-width: 1280px) {
    .item {
        --width: calc(25% - 10px);
    }
}

It works in Google Chrome. Is there better way to do this assuming I want to stick to vanilla CSS? Are there any potential pitfalls with this solution?

Robo Robok
  • 21,132
  • 17
  • 68
  • 126
  • calc() and CSS variable have almost the same support ... so if want to remove CSS variable for support issue you need to also get rid of calc() – Temani Afif May 16 '19 at 23:34
  • My question is not about the support of `calc()` and `var()`, but about setting var in media query and referencing it outside of it. – Robo Robok May 16 '19 at 23:35
  • you question is then opinion based. What you made is working fine (you already noticed this) and there is for sure other ways but *better* remain opinion based (I thought by *vanilla* CSS you mean removing those new features to stick to common ones supported everywhere) – Temani Afif May 16 '19 at 23:41
  • By vanilla CSS I mean CSS without using preprocessors. This is *not* opinion based at all, buddy. – Robo Robok May 16 '19 at 23:46
  • 1
    you asked : *Is there better way to do this assuming I want to stick to vanilla CSS?*. You should define *better* because it's opinion based. I can give you a different way that I consider *better* like using CSS grid because you are trying to have gaps between your elements. I can also consider a pseudo element instead of padding for the aspect ratio trick. A lot of ways to achieve the same thing – Temani Afif May 16 '19 at 23:54
  • This is the problem with Stack Overflow: people overuse the word "opinion". If I asked if there is a better way, it means I'm asking: safer, more concise way to do it, more standard, maybe less sophisticated in terms of CSS grammar. This is not opinion based, don't be too lexical about the word "better". I found so many great questions here on SO closed because of being allegedly "opinion based", while they were only gramatically formed like this. This must stop. – Robo Robok May 16 '19 at 23:58
  • I am not too lexical (I am not even good at english). By *opinion based* I meant that there is no direct answer to your question. I think you agree with me that there is a lot of different ways to do the same thing and each one can share its own solution saying *this one is better because ...*. `You should only ask practical, answerable questions based on actual problems that you face. Chatty, open-ended questions diminish the usefulness of our site and push other questions off the front page.` https://stackoverflow.com/help/dont-ask (I don't see any problem in your question). – Temani Afif May 17 '19 at 00:05
  • as a side note, you can simply ignore my comments. I am only one user among this huge community. What I think is only *my* thinking and doesn't make it a *global* thinking – Temani Afif May 17 '19 at 00:07
  • I don't think there are many ways to do it at all and that's the thing here. Do you know any other solution that would follow the DRY principle? This is why I used the variable here, because I didn't find any other solution that wouldn't require repeating myself in the code. By "better" I mean: another solution, perhaps with better support, but doing the same thing and following the basic programming principles. – Robo Robok May 17 '19 at 00:10
  • actually there is an issue with your code, percentage value with padding will consider the parent width element as a reference and it won't work like you expect here. It will not consider the computed width of your element (related: https://stackoverflow.com/a/55213309/8620333) – Temani Afif May 17 '19 at 00:18
  • It does work. Setting padding this way keeps the aspect ratio: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp – Robo Robok May 17 '19 at 00:21
  • The problem in this other topic was the context of percentage, not being unable to use computed value per se. Percentage on padding is relative to width and it works just fine. I am using the code above now and there are no issues. I'm just asking question for self-improvement. – Robo Robok May 17 '19 at 00:26
  • Yes I used wrong words. In this case it's working fine because both padding-top and width consider the same reference (the width of the parent container) but I meant is that you need to pay attention when assigning percentage value using CSS variable because in some case the reference may not be the same. Ex: https://jsfiddle.net/5jdoxz49/ It can happen to have the width changed by other properties and the aspect ratio will not be kept because padding-top don't consider the width of the element itself but the width of the parent element. – Temani Afif May 17 '19 at 00:34
  • 1
    The width is also relative to the parent, that's why it works :) – Robo Robok May 17 '19 at 00:53

0 Answers0