중첩된 CSS @media 규칙은 모든 브라우저에서 일관되게 작동합니까?

CSS의 중첩 @media 규칙, 재검토

원래 질문에서는 중첩된 @media 규칙과 관련된 CSS 코드 조각의 일관되지 않은 렌더링을 탐구했습니다. 다양한 브라우저. 다음은 현재 브라우저 지원 상태를 기반으로 한 업데이트된 분석입니다.

CSS3의 중첩된 @media 규칙

CSS3의 CSS 조건부 규칙 모듈에 따라 중첩된 @media 이제 규칙이 완전히 지원됩니다. 다음 구문이 유효합니다.

@media print {
  #navigation { display: none }
  @media (max-width: 12cm) {
    .note { float: none }
  }
}

브라우저 지원

Firefox, Safari, Chrome, Microsoft Edge 및 Opera를 포함한 최신 브라우저는 이제 중첩된 @media를 지원합니다. CSS 조건부 3에 정의된 규칙입니다. Internet Explorer는 이 기능을 지원하지 않습니다.

원본 문제

원래 질문의 코드는 여러 브라우저에서 일관되게 작동하지 않는 중첩된 @media 규칙을 보여주었습니다. 이는 당시 이전 버전의 브라우저에서 지원했던 사양인 CSS2.1에서 중첩에 대한 지원이 부족했기 때문이었습니다.

해상도

지원하는 브라우저의 경우 중첩된 @media 규칙을 지원하지 않으므로 해결 방법은 중첩을 제거하고 여러 @media 규칙을 작성하는 것입니다. 별도로:

@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

미디어 조건이 있는 @import 문이 일관되게 작동한 이유는 스타일시트를 조건부로 적용하는 것이 아니라 조건부로 적용하기 때문입니다. @media 내부에 중첩이 가능하기 때문입니다.

결론

CSS 조건부 3 사양에 따라 이제 중첩된 @media 규칙이 최신 브라우저에서 널리 지원됩니다. 이 기능을 지원하지 않는 기존 브라우저의 경우 간단한 해결 방법은 별도의 @media 규칙을 사용하는 것입니다.

위 내용은 중첩된 CSS @media 규칙은 모든 브라우저에서 일관되게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!