미디어 쿼리에서 작동하지 않는 CSS 네이티브 변수
미디어 쿼리에서 CSS 변수를 사용하려고하는데 작동하지 않습니다.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
로부터 사양 ,
이
var()함수는 요소의 모든 속성에있는 값의 일부 대신 사용할 수 있습니다. 이var()함수는 속성 이름, 선택기 또는 속성 값 이외의 다른 것으로 사용할 수 없습니다. (그렇게하면 일반적으로 잘못된 구문이 생성되거나 의미가 변수와 연결되지 않은 값이 생성됩니다.)
따라서 아니요, 미디어 쿼리에서 사용할 수 없습니다.
그리고 그것은 의미가 있습니다. --mobile-breakpoint예를 들어 :root, 즉 <html>요소로 설정할 수 있기 때문에 다른 요소로 상속 될 수 있습니다. 그러나 미디어 쿼리는 요소가 아니며에서 상속 <html>되지 않으므로 작동하지 않습니다.
이것은 CSS 변수가 달성하려는 것이 아닙니다. 대신 CSS 전처리기를 사용할 수 있습니다.
Oriol이 대답 했듯이 현재 CSS Variables Level 1 var()은 미디어 쿼리에 사용할 수 없습니다 . 그러나이 문제를 해결할 최근 개발이있었습니다. 몇 년 안에 CSS 환경 변수 모듈 레벨 1 이 표준화되고 구현되면 env()모든 최신 브라우저의 미디어 쿼리에서 변수 를 사용할 수 있습니다 .
사양 을 읽고 우려 사항이 있거나 미디어 쿼리 사용 사례에 대한 지원을 표명하려는 경우 GitHub w3c / csswg-drafts # 1693 또는 "["로 시작하는 CSS GitHub 문제 에서 계속 그렇게 할 수 있습니다 . CSS-ENV-1] " .
원래 대답 2017년 11월 9일는 : 최근 CSS 워킹 그룹은 결정 있다는 CSS 변수 레벨 2를 사용하여 사용자 정의 환경 변수를 지원합니다 env(), 그들은 그들이 미디어 쿼리에 유효하게하려고합니다 . 그룹 은 2017 년 9 월 iPhone X의 공식 발표 직전에 Apple이 처음으로 표준 사용자 에이전트 속성을 제안한 후이 문제를 해결했습니다 ( Timothy Horton의 WebKit : "iPhone X 용 웹 사이트 디자인" 참조 ). 그런 다음 다른 브라우저 담당자는 TV 디스플레이 및 가장자리가 블리드 된 잉크 인쇄와 같은 많은 장치에서 일반적으로 유용 할 것이라는 데 동의했습니다. ( env()불렀던constant(),하지만 이제는 더 이상 사용되지 않습니다. Peter-Paul Koch의이 기사 와 같이 이전 이름을 참조하는 기사를 계속 볼 수 있습니다 .) 몇 주가 지난 후 Mozilla의 Cameron McCormack은 이러한 환경 변수를 미디어 쿼리에서 사용할 수 있음 을 깨달았 으며 Tab Atkins, Jr. of Google 은 사용자 정의 환경 변수가 미디어 쿼리에서 사용할 수있는 재정의 불가능한 전역 루트 변수로 특히 유용 하다는 것을 깨달았습니다 . 이제 Apple의 Dean "Dino"Jackson이 레벨 2 편집 에 Atkins 에 합류하게됩니다 .
이 문제에 대한 업데이트는 w3c/csswg-draftsGitHub 문제 # 1693 에서 구독 할 수 있습니다 . (특히 관련된 내역 세부 정보를 보려면 CSSWG Meeting Bot의 해상도에 포함 된 회의 로그를 확장하고 "미디어 쿼리"를 의미하는 "MQ"를 검색하십시오.)
앞으로 더 많은 발전이있을 때이 질문을 업데이트 할 계획입니다. 미래는 흥미 진진합니다.
업데이트 2018-02-08 : Safari Technology Preview 49 는 calc()미디어 쿼리의 구문 분석 에 대한 지원을 추가 했으며, 이는 지원의 전주곡 일 수 있습니다 env().
업데이트 2018-04-27 : Google의 Chromium 팀이 env(). 이에 대한 응답으로 Atkins는 env()별도의 비공식 초안 표준 인 CSS 환경 변수 모듈 레벨 1 을 지정하기 시작했습니다 . ( w3c / csswg-drafts # 1693의 GitHub 주석 과 w3c / csswg-drafts # 1817의 주석을 참조하십시오 .) 초안은 명시 적 사용 사례로 미디어 쿼리의 변수를 호출합니다.
환경 변수는 특정 요소에서 가져온 값에 의존하지 않기 때문에 함수가 유효하지 않은
@media규칙 과 같이 그릴 명백한 요소가없는 곳에서 사용할 수 있습니다var().
사양을 읽고 우려 사항이 있거나 미디어 쿼리 사용 사례에 대한 지원을 표명하려는 경우 GitHub w3c / csswg-drafts # 1693 또는 "["로 시작하는 CSS GitHub 문제 에서 계속 그렇게 할 수 있습니다 . CSS-ENV-1] " .
2019-07-06 업데이트 : 사양 작업이 계속됩니다. GitHub 문제 # 2627 은 사용자 지정 환경 변수에 관한 것입니다.
그러나 할 수있는 일은 @media 쿼리 : root 문입니다!
:root {
/* desktop vars */
}
@media screen and (max-width: 479px) {
:root {
/* mobile vars */
}
}
이 게시물 현재 Chrome, Firefox 및 Edge에서 적어도 최신 프로덕션 버전에서 완전히 작동합니다.
원하는 것을 달성하는 한 가지 방법은 npm 패키지를 사용하는 것 postcss-media-variables입니다.
npm 패키지를 사용하는 것이 괜찮다면 여기에서 동일한 문서를 살펴볼 수 있습니다.
예
/* 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) {}
Apparently it's just not possible to use native CSS variables like that. It's one of the limitations.
A clever way to use it is to change your variables in the media-query, to impact all your style. I recommend this article.
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
As you can read other answers, still not possible to do so.
Someone mentioned custom environmental variables (similar to custom css variables env() instead of var()), and the principle is sound, though there are still 2 major issues:
- weak browser support
- so far there is no way to define them (but probably will be in the future, as this is so far only an unofficial draft)
참고URL : https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries
'programing tip' 카테고리의 다른 글
| 글로벌 네임 스페이스가 오염된다는 것은 무엇을 의미합니까? (0) | 2020.09.19 |
|---|---|
| Rails 4.2 개발 서버의 기본 바인딩 IP를 변경하는 방법은 무엇입니까? (0) | 2020.09.19 |
| C에서 터미널 너비를 얻습니까? (0) | 2020.09.19 |
| EnableEurekaClient와 EnableDiscoveryClient의 차이점은 무엇입니까? (0) | 2020.09.19 |
| Java에서 지역 변수가 스레드로부터 안전한 이유 (0) | 2020.09.19 |