CSS에서 @media 규칙 중첩
브라우저마다 지원이 다른 것 같습니다 ..
링크 확인
Firefox : 검정색과 흰색 텍스트.
Opera, Chrome, IE9 : 검정색 텍스트가있는 파란색.
어느 것이 정확하며 어떻게 일관성을 유지합니까?
코드
@media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
@media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
흥미롭게도 조건부 내에서 미디어 쿼리를 중첩하는 @import것이 작동하는 것처럼 보입니다.
예 :
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importer.css
@import url(media.css) screen and (min-width: 480px);
media.css
body {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}
"어떤 브라우저가 @media규칙 중첩을 지원 합니까?" 에 대한 답을 찾는 사람들을 위해 간단한 대답은 Firefox, Safari, Chrome (및 그 파생 제품) 및 Microsoft Edge를 포함한 모든 최신 브라우저가 이제 @mediaat 규칙 중첩을 지원한다는 것입니다 . CSS Conditional 3에 설명 된대로 . 중첩 된 at- @media규칙이 있는 문제의 코드 는 이제 Internet Explorer ( 더 이상 새로운 기능으로 업데이트되지 않음 , IE 버전이이 기능을 지원 하지 않음) 를 제외하고 모든 곳에서 올바르게 작동합니다 .
This feature did not exist in CSS2.1, since only media types existed at the time which you could simply group with a comma, which explains why support for this was very poor at the time this question was first asked.
What follows is an analysis of the original question with these historical limitations in mind.
There's a bit of terminology confusion that needs clearing up in order for us to understand what exactly is happening.
The code you have refers to @media rules, and not so much media queries — the media query itself is the component that follows the @media token, whereas the rule is the entire block of code consisting of @media, the media query, and the rules nested within its set of curly braces.
This may cause confusion among many when it comes to using media queries in CSS, as well as your specific case where a @media rule in an imported stylesheet works correctly even when the @import is accompanied by another media query. Notice that media queries can occur in both @media and @import rules. They're the same thing, but they're being used to restrictively apply style rules in different ways.
Now, the actual issue here is that nested @media rules are not valid in CSS2.1 because you're not allowed to nest any at-rules within @media rules. However, things seem quite different in CSS3. Namely, the Conditional Rules module states very clearly that @media rules can be nested, even providing an example:
For example, with this set of nested rules:
@media print { // rule (1) #navigation { display: none } @media (max-width: 12cm) { // rule (2) .note { float: none } } }the condition of the rule marked (1) is true for print media, and the condition of the rule marked (2) is true when the width of the display area (which for print media is the page box) is less than or equal to 12cm. Thus the rule ‘#navigation { display: none }’ applies whenever this style sheet is applied to print media, and the rule ‘.note { float: none }’ is applied only when the style sheet is applied to print media and the width of the page box is less than or equal to 12 centimeters.
Furthermore, it looks like Firefox is following this specification and processing the rules accordingly, whereas the other browsers are still treating it the CSS2.1 way.
The grammar in the Syntax module hasn't been updated to reflect this yet, though; it still disallows nesting of at-rules within @media rules as with CSS2.1. This specification is slated for a rewrite anyway, so I guess this doesn't matter.
Basically, CSS3 allows it (pending rewriting the Syntax module), but not CSS2.1 (because it neither defines media queries nor allows nested @media rule blocks). And while at least one browser has begun supporting the new spec, I wouldn't call other browsers buggy; instead, I'll say that they simply haven't caught up yet as they're really conforming to an older, more stable spec.
Lastly, the reason why your @import works is because @import is able to work conditionally with the help of a media query. However this has no relation to the @media rule in your imported stylesheet. These are in fact two separate things, and are treated as such by all browsers.
To make your code work consistently across browsers, you can either use your @import statement, or, since both of your rules use min-width, simply remove the nesting of your @media rules:
@media screen and (min-width: 480px) {
body {
background-color: #6aa6cc;
color: #000;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #000;
color: #fff;
}
}
참고URL : https://stackoverflow.com/questions/11746581/nesting-media-rules-in-css
'Programing' 카테고리의 다른 글
| DbEntityEntry를 조롱 또는 위조하거나 새 DbEntityEntry 생성 (0) | 2020.12.05 |
|---|---|
| 콘솔에서 자바 스크립트 함수 호출 (0) | 2020.12.05 |
| Delphi의 단위 테스트-어떻게하고 있습니까? (0) | 2020.12.05 |
| CSS에서 1div가있는 겹치는 원 (0) | 2020.12.04 |
| “git checkout-”. (0) | 2020.12.04 |