Firefox에서만 CSS 사용

웹 애플리케이션을 개발하는 동안 개발자는 웹 애플리케이션이 모든 브라우저에서 제대로 표시되는지 확인해야 합니다. 일부 CSS 속성은 Firefox와 같은 브라우저에서는 지원되지 않지만 Chrome, Opera 등과 같은 다른 브라우저에서는 지원됩니다.

이 경우 Firefox 브라우저만을 대상으로 하는 CSS 코드를 작성해야 합니다. 이 튜토리얼에서는 Firefox 브라우저용으로 CSS를 작성하는 두 가지 방법을 배웁니다.

Mozila 전용 CSS 확장 사용

우리 목록에서 Firefox 브라우저용 CSS를 사용하는 첫 번째 방법은 '@-moz-document url-prefix()' CSS 특정 확장을 사용하는 것입니다. Firefox 브라우저가 열릴 때 웹 페이지에만 적용되도록 이 CSS 확장에 CSS 코드를 작성해야 합니다.

문법

사용자는 Firefox용 CSS를 사용하기 위해 다음 구문에 따라 @-moz-document url-prefix() CSS 전용 확장자를 사용할 수 있습니다.

으아악

예 1

아래 예에서는 HTML div 요소를 만들고 그 안에 텍스트 콘텐츠를 추가했습니다. 그 후 CSS에서 @-moz-document url-prefix()를 사용하여 Firefox 브라우저의 div 요소에만 스타일을 적용했습니다.

사용자는 Chrome 및 Firefox 브라우저에서 다음 웹페이지를 열고 div 요소 스타일의 차이를 관찰할 수 있습니다.

으아악

예 2

아래 예에서는 상위 div 요소를 만들고 그 안에 다른 div 요소를 추가했습니다. CSS에서는 Firefox 브라우저에서만 div 요소의 스타일을 지정하기 위해 @-moz-document url-prefix() CSS 전용 확장을 사용합니다.

Chrome에서는 크기가 적용되지 않기 때문에 사용자는 빈 웹 페이지를 볼 수 있지만 Firefox에서는 스타일이 지정된 HTML 콘텐츠를 볼 수 있습니다.

으아악

@supports 규칙 사용

CSS에는 각각 다른 기능을 제공하는 다양한 규칙이 포함되어 있습니다. @supports 규칙은 조건을 매개변수로 취하고 조건이 true가 되면 CSS가 Firefox 브라우저의 웹 페이지에 적용됩니다.

이 예에서는 "-moz-appearance:none" CSS 조건을 사용하여 현재 브라우저가 Firefox인지 확인합니다. '-moz-appearance:none'은 체크박스와 같은 HTML 요소의 기본 스타일을 제거하지만 여기서는 현재 브라우저가 Firefox인지 확인하는 데 사용할 수 있습니다.

문법

사용자는 Firefox 브라우저용 CSS를 사용하기 위해 다음 구문에 따라 @supports CSS 규칙을 사용할 수 있습니다.

으아악

위 구문에서는 @supports 규칙의 선언 블록에 CSS 코드를 추가해야 합니다.

예 3

아래 예에서는 HTML에 세 가지 "

" 요소를 생성한 후 @supports 규칙과 "-moz-appearance:none" 조건을 사용하여 Firefox 브라우저에서만 "

" 요소를 설정했습니다

Firefox 브라우저에서 사용자는 다양한 색상의 텍스트를 관찰할 수 있습니다.

으아악

사용자는 CSS만 사용하여 Firefox 브라우저를 타겟팅하는 방법을 배웠습니다. 우리는 CSS 특정 확장과 @supports 규칙을 사용했습니다. 사용자는 Firefox 브라우저가 대체 스타일을 적용하기 위한 특정 CSS 속성을 지원하지 않는 경우에만 Firefox에 대해 CSS를 사용해야 합니다.

위 내용은 Firefox에서만 CSS 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!