0

Does Chrome not support CSS variables within media queries?

I have the following CSS:

:root {
 --threshold-lg: 1200px;
 --threshold-md: 992px;
 --threshold-sm: 768px;
 --sidebar-margins: 10px;
}

@media(min-width: var(--threshold-sm)) {
  .sidebar {
    top: var(--sidebar-margins);
    bottom: var(--sidebar-margins);
  }
}

In both Chrome 50 and Chrome Canary (52), I see no margin adjustment. In Safari 9.1, it works as expected.

timbo
  • 13,244
  • 8
  • 51
  • 71

2 Answers2

1

Sadly CSS variables cannot be used in @media queries. For more details see the top answer to the question here. (I would flag these two questions as duplicates if I knew how and had access!)

R Barton
  • 11
  • 1
0

:root {
 --threshold-lg: 1200px;
 --threshold-md: 992px;
 --threshold-sm: 768px;
 --sidebar-margins: 10px;
}

body {
  background-color: pink;
}
@media(min-width: 300px) {
  .sidebar {
    position: absolute;
    top: var(--sidebar-margins);
    bottom: var(--sidebar-margins);
    background-color: tan;
  }
}
<div class="sidebar">sidebar</div>

Based on this test it seems it is only the media query conditional that has the issue.

orangeh0g
  • 418
  • 2
  • 10