CSS-Variablen in Medienanfragen in Chrome?

Question

Unterstützt Chrome keine CSS-Variablen in Medienabfragen?

Ich habe folgende 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); 
    } 
} 

Sowohl Chrom 50 und Chrome Canary (52), ich sehe keine Randeinstellung. In Safari 9.1 funktioniert es wie erwartet.

Answer 1

: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>

Basierend auf diesem Test scheint es nur die Medienabfrage ist an die Bedingung, die das Problem hat.

Answer 2

Leider können CSS-Variablen nicht in @media-Abfragen verwendet werden. Weitere Details finden Sie in der oberen Antwort auf die Frage here. (Ich würde diese beiden Fragen als Duplikate kennzeichnen, wenn ich wüsste wie und Zugang hatte!)