중첩된 @media 규칙은 CSS에서 어떻게 작동하며 어떤 브라우저 지원이 존재합니까?

CSS에서 @media 규칙 중첩

CSS 미디어 쿼리 작업 시 개발자가 @media 규칙을 중첩하려고 하면 브라우저 간에 불일치가 발생할 수 있습니다. 조건부 @import 내에서. 이 기사에서는 @media 규칙 중첩의 미묘한 차이를 살펴보고, 브라우저 지원과 다양한 동작의 기본 이유를 살펴봅니다.

브라우저 지원

역사적으로 @ 중첩 지원은 CSS2.1에는 이러한 기능이 없기 때문에 미디어 규칙이 제한되었습니다. 그러나 CSS3의 조건부 규칙 모듈의 출현으로 @media 규칙을 중첩하는 기능이 도입되어 미디어 조건에 따라 스타일을 보다 세밀하게 제어할 수 있게 되었습니다.

현재 Firefox, Safari, Chrome(및 그 파생물) 및 Microsoft Edge는 CSS 조건부 3에 설명된 대로 @media 규칙의 중첩을 지원합니다. 이는 중첩된 @media at-규칙이 있는 문제의 코드가 이제 예외를 제외하고 모든 곳에서 올바르게 작동해야 함을 의미합니다. (더 이상 개발되지 않는) Internet Explorer의

용어 설명

"@media 규칙"이라는 용어는 Internet Explorer의 전체 블록을 의미한다는 점에 유의하는 것이 중요합니다. @media, 미디어 쿼리, 중괄호 안에 중첩된 규칙으로 구성된 코드입니다. "@미디어 쿼리"는 특히 규칙의 미디어 조건 부분을 나타냅니다.

중첩 및 조건부 @import

혼란스럽게도 미디어 쿼리는 @에서도 사용할 수 있습니다. 수입 규칙은 상호 작용 방식에 대한 의문을 제기합니다. 명심해야 할 주요 차이점은 미디어 쿼리가 포함된 @import는 가져온 스타일시트의 적용을 제한하는 반면, @media 규칙은 스타일시트 내의 스타일 적용을 제한한다는 것입니다.

제공된 예에서 @media @import 문에 미디어 쿼리를 사용하더라도 가져온 스타일시트 내의 규칙은 Firefox에서 올바르게 작동합니다. 이는 조건부로 스타일을 적용하는 두 가지 별도의 메커니즘이기 때문입니다.

일관성 강화

브라우저 전체에서 일관된 동작을 보장하기 위해 개발자는 조건부 @import 문을 사용하거나 @media 규칙의 중첩을 제거합니다. 예제의 두 규칙 모두 최소 너비 미디어 조건을 사용하므로 후자 옵션을 권장합니다.

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