Próbuję użyć zmiennych CSS w zapytaniu o media i to nie działa.Natywne zmienne CSS nie działają w zapytaniach o media
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
Z spec,
Funkcja
var()mogą być stosowane w miejsce dowolnej części wartości w żadnego majątku na elemencie. Funkcjavar()nie może być używana jako nazwy właściwości, selektory ani nic poza wartościami właściwości. (Może to zazwyczaj wytwarza nieprawidłową składnię, albo wartość, której znaczenie ma połączenie do zmiennej.)
Więc nie, nie można go używać w zapytaniu mediów.
To ma sens. Ponieważ możesz ustawić --mobile-breakpoint np. to :root, czyli element <html>, a następnie dziedziczony do innych elementów. Ale zapytanie o media nie jest elementem, nie dziedziczy po <html>, więc nie może działać.
To nie jest to, co próbują wykonać zmienne CSS. Zamiast tego możesz użyć preprocesora CSS.
Wygląda na to, że nie można używać natywnych zmiennych CSS w ten sposób. Jest to jeden z limitations.
Sprytnym sposobem na to jest zmiana zmiennych w zapytaniu o media, aby wpłynąć na cały styl. Polecam this article.
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
I don ' • zrozumieć znaczenie "zmień swoje zmienne w zapytaniu o media", możesz pokazać przykład? –
Nie o to mi chodziło. Pytałem o wartość zapytania mediów. –
Tak, właśnie tak, jest w artykule, który łączyłem. Wiem, że to nie jest to, czego oczekiwałeś, ale zmienne CSS ** po prostu nie mogą być użyte do zdefiniowania zapytań o media ** – Cohars
Jednym ze sposobów osiągnięcia tego, czego chcesz, jest użycie pakietu NPM postcss-media-variables.
Jeśli są w porządku z wykorzystaniem pakietów NPM następnie można wziąć documentatoin szukać samego tutaj
Przykład
/* input */
:root {
--min-width: 1000px;
--smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}
@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}
Dzięki, ale starałem się nie używać żadnego preprocesora. –
Jak inni odpowiedział CSS Variables Level 1’s var() cannot be used in media queries. Jednak pojawiły się ostatnie wydarzenia, które rozwiążą ten problem. Po kilku latach, gdy poziom CSS Variable Level 2 będzie bardziej znormalizowany i zaimplementowany, będziemy mogli używać zmiennych env() w zapytaniach o media.
Niedawno grupa robocza uznała, że CSS Zmienne CSS Level 2 wesprze zmienne środowiskowe zdefiniowane przez użytkownika za pomocą env() i będą starać się ich ważność w mediach odpytuje. Grupa rozwiązała ten problem po tym, jak Apple po raz pierwszy zaproponowała standardowe właściwości klienta użytkownika, krótko przed oficjalnym ogłoszeniem iPhone'a X we wrześniu 2017 r. (Patrz także: WebKit: “Designing Websites for iPhone X” by Timothy Horton). Inni przedstawiciele przeglądarek zgodzili się, że generalnie będą przydatni na wielu urządzeniach, takich jak wyświetlacze telewizyjne i drukowanie tuszem z krawędziami spadowymi. (env()) nazywał się constant(), ale obecnie został uznany za przestarzały. Nadal możesz zobaczyć artykuły odnoszące się do starej nazwy, na przykład this article by Peter-Paul Koch.Po kilku tygodniach Cameron McCormack z Mozilli zdał sobie sprawę, że te zmienne środowiskowe będą użyteczne w zapytaniach o media, a Tab Atkins, Jr. z Google zdał sobie wtedy sprawę, że zmienne środowiskowe zdefiniowane przez użytkownika będą szczególnie przydatne jako globalne, nieprzesuwalne zmienne główne użyteczny w zapytaniach o media. Teraz Dean "Dino" Jackson z Apple dołączy do Atkinsa w edycji Poziomu 2.
Możesz subskrybować aktualizacje w tej sprawie pod numerem w3c/csswg-drafts GitHub issue #1693. (W przypadku szczególnie istotnych szczegółów historycznych, rozszerz również swoje osadzone dzienniki IRC i przeszukuj wszystkie wiadomości dla "MQ" = "zapytania o media".)
Mam zamiar zaktualizować to pytanie w przyszłości, gdy pojawi się więcej wydarzeń. Przyszłość jest ekscytująca.
Aktualizacja 2018-0250: Safari Technology Preview 49 dodała obsługę analizowania calc() w zapytaniach o media, co może być wstępem do obsługi także w nich env().
Czy próbowałeś w kilku przeglądarkach? (Podobnie jak Chrome i Firefox) – Cohars
Tak, mam najnowszy Chrome –
Jakiego preprocesora css używasz? Co próbujesz osiągnąć? –