>웹 프론트엔드 >CSS 튜토리얼 >CSS의 중첩된 @media 규칙에 대한 브라우저 지원은 얼마나 일관됩니까?

CSS의 중첩된 @media 규칙에 대한 브라우저 지원은 얼마나 일관됩니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-29 11:43:13276검색

How Consistent is Browser Support for Nested @media Rules in CSS?

CSS에서 @media 규칙 중첩: 브라우저 지원 및 호환성

질문:

방법 다양한 브라우저에서 @media 규칙 중첩이 일관되게 지원됩니까? 제공된 코드가 다양한 브라우저에서 다르게 표시되는 이유는 무엇이며 이러한 불일치의 원인은 무엇입니까? 일관된 스타일을 달성하기 위해 이 문제를 해결할 수 있습니까?

답변:

브라우저 지원

중첩 @media 규칙은 CSS2.1의 유효한 관행으로 인해 이 기능에 대한 지원이 브라우저마다 크게 다릅니다. 그러나 CSS 조건부 3이 도입되면서 @media 중첩 규칙은 Firefox, Safari, Chrome, Microsoft Edge를 포함한 모든 최신 브라우저에서 지원되는 기능이 되었습니다.

중첩 호환성

질문에 제공된 코드에는 @media 규칙 중첩이 포함됩니다. @media 규칙은 CSS3의 다른 @media 규칙 내에 중첩될 수 있지만 CSS2.1에서는 이러한 중첩이 허용되지 않습니다. 결과적으로 이전 버전의 Internet Explorer와 같이 여전히 CSS2.1을 준수하는 브라우저는 중첩된 @media 규칙을 올바르게 처리하지 못합니다.

불일치 이유

Firefox 최신 CSS 조건부 3 사양을 구현하여 중첩된 @media 규칙을 의도한 대로 해석하고 적용할 수 있습니다. 반면에 Opera, Chrome 및 IE9와 같은 다른 브라우저는 중첩된 @media 규칙을 지원하지 않는 이전 CSS2.1 사양을 따릅니다. 결과적으로 그들은 가장 안쪽 @media 규칙에 정의된 스타일을 다시 적용하게 되어 스타일 불일치가 발생하게 됩니다.

일관성 달성

전체에서 일관된 스타일을 보장하려면 모든 브라우저에서는 중첩된 @media 규칙을 제거하는 것이 좋습니다. 첫 번째 @media 규칙 내에서 두 번째 @media 규칙을 제거하면 됩니다.

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }

    @media screen and (min-width: 768px) {  // Remove this nested rule
        body {
            background-color: #000;
            color: #fff;
        }
    }
}

중첩 규칙을 제거한 후 스타일은 CSS 조건부 3 및 CSS2를 지원하는 모든 최신 브라우저에 일관되게 적용되어야 합니다. 1.

위 내용은 CSS의 중첩된 @media 규칙에 대한 브라우저 지원은 얼마나 일관됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.