브라우저에서 CSS 속성과 값 지원을 모두 확인하는 방법은 무엇입니까?

CSS 속성 및 값에 대한 브라우저 지원 감지

문제:

CSS 속성 또는 값이 다음에서 지원되는지 확인 특정 브라우저는 브라우저 간 호환성을 보장하는 데 중요합니다. 그러나 기존 솔루션은 자산 지원에만 초점을 맞추는 경우가 많습니다. CSS 또는 JavaScript에서 속성과 값 지원을 모두 확인할 수 있는 방법은 무엇입니까?

해결책:

CSS.supports

Modern 브라우저는 속성 및 값 유효성 검사를 모두 허용하는 CSS.supports API를 지원합니다. 구문은 다음과 같습니다.

<code class="css">CSS.supports(property, value);</code>

예:

다음 JavaScript 코드는 CSS.supports의 사용법을 보여줍니다.

<code class="javascript">console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  5, CSS.supports("( transform-origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or "
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
);</code>

CSS.supports API는 지정된 속성 및/또는 값이 지원되면 true를 반환하고 그렇지 않으면 false를 반환합니다. 이를 통해 포괄적인 브라우저 간 지원 테스트가 가능합니다.

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