JavaScript를 사용하여 브라우저가 CSS 속성을 지원하는지 확인하는 방법은 무엇입니까?

개요

오늘날 시스템에서는 다양한 브라우저를 사용할 수 있습니다. 따라서 일부 CSS(Cascading Style Sheets) 속성이 이 브라우저에서 작동하지 않는 경우가 있습니다. 따라서 특정 브라우저에서 어떤 CSS 속성이 지원되는지 확인하기 위해 JavaScript에는 브라우저가 해당 특정 속성을 지원하는지 확인하는 내장 메서드 CSS.supports()가 있습니다. supports() 메서드는 Opera, Edge, Chrome, Firefox 등 모든 브라우저에서 지원됩니다.

문법

CSS.supports() 메서드는 문자열 형식의 키-값 쌍을 입력으로 사용합니다. 사용되는 기본 구문은 -

입니다. 으아악

• supports() - 브라우저가 지원 매개변수에 전달된 속성을 지원하는지 확인하는 CSS 개체의 메서드입니다.

• propertyName - 여기에는 표시, 위치, 여백, 패딩, Z-색인, 텍스트 정렬 등과 ​​같은 CSS 속성의 이름이 포함됩니다.

• value - Flex, Absolute, Relative, 20px, Left, Right 등과 같은 특정 속성의 값을 사용합니다.

그래서 CSS.Supports() 메서드에 대해 더 자세히 알아보기 위해 몇 가지 예를 살펴보겠습니다.

방법 1 - 이 예에서는 CSS 스타일 키 값을 CSS.supports() 메서드에 매개변수로 직접 전달합니다. 그러면 주어진 CSS 속성이 이 브라우저에서 지원되는지 여부가 결정됩니다.

알고리즘

• 1단계 - CSS 객체에 CSS.supports()로 존재하는 presents() 메소드를 사용합니다.

• 2단계 - CSS(Cascading Style Sheets) 속성을 매개변수로 전달합니다.

• 3단계 - console.log()를 사용하여 콘솔에서 CSS.supports() 메서드를 인쇄합니다.

• 4단계 - 속성을 전달할 때 true가 반환되면 해당 특정 속성이 지원되고, 그렇지 않으면 브라우저가 이를 지원하지 않는 것입니다.

예

으아악

출력

위 코드의 출력은 아래 그림과 같습니다. "float:top" 및 "float:bottom" 속성은 유효하지 않으므로 콘솔에서 false를 반환하는 반면 "float:right" 및 "float:left" 속성 은 유효하고 지원되는 경우 true를 반환합니다. 브라우저.

방법 2 - 이 방법에서는 사용자가 지정된 필드에 CSS 속성을 입력하고 브라우저가 이러한 CSS 속성을 지원하는지 확인할 수 있는 사용자 인터페이스를 구축합니다. 아니요.

알고리즘

• 1단계 - CSS 속성이 키-값 형식이므로 두 개의 검색 상자를 만듭니다. 하나는 키용이고 다른 하나는 값용입니다. 특정 ID를 각각 "propertyName" 및 "pval"로 할당합니다. 다른 출력 필드와 HTML 버튼을 만듭니다.

• 2단계 - JavaScript에서 checkCss()라는 함수를 만듭니다. 화살표 기능이 사용됩니다.

• 3단계 - 두 개의 입력 상자에 액세스하여 변수에 저장하고, 이 상자의 값을 변수에 연결합니다.

• 4단계 - CSS.supports()에 이 연결 변수를 전달하고 if-else 조건을 확인하세요.

• 5단계 - true가 반환되면 CSS 속성이 지원되고, 그렇지 않으면 false가 지원되지 않습니다.

예

으아악

출력

위 코드의 출력은 아래 그림과 같습니다. 사용자는 주어진 입력 상자에 CSS 속성을 입력하고 브라우저가 이러한 속성을 지원하는지 확인할 수 있습니다. 아래 그림과 같이 "display:block" 속성이 지원됩니다. 브라우저에 의해 유효하며 true를 반환합니다.

출력은 아래 그림과 같고 false가 반환되므로 입력창에 채워진 속성이 유효하지 않아 브라우저에서 지원하지 않습니다.

결론

supports() 메서드의 반환 유형은 현재 브라우저가 CSS 속성을 지원하는지 여부에 따라 true 또는 false를 반환하므로 부울입니다. 예제 2 인터페이스는 콘솔을 반복적으로 확인할 필요가 없으므로 개발자에게 특히 유용합니다. CSS 속성 이름과 값을 입력 필드에 입력하기만 하면 현재 브라우저가 이를 지원하는지 여부를 알 수 있습니다.

위 내용은 JavaScript를 사용하여 브라우저가 CSS 속성을 지원하는지 확인하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!