@supports selector ()

@supports 규칙의 선택기 지원을 확인하는 능력은 놀랍게도 강력합니다! property: value 쌍 호환성을 테스트하는 데 종종 사용되지만 selector() 함수는 선택기 지원을 평가하기 위해 기능을 확장합니다. 이것은 단순히 선택기를 괄호 안에 배치하여 수행됩니다.

 @supports selector (: nth-Child (1 of .foo)) {
  / * 선택기가 지원되는 경우 적용되는 스타일 */
}

다음 :nth-child(n of .foo) 선택기, "선택기 목록 인수"와 호환됩니다 :nth-child Family Selectors는 좋은 예입니다. 현재 Safari 만이이 특정 선택기를 지원합니다.

분리기와 얼룩말 스트라이핑으로 목록을 스타일링 해야하는 시나리오를 고려하십시오. 이상적으로는 이와 같은 선택기를 사용하여 분리기를 무시하면서 얼룩말 스트라이핑을 달성하는 것입니다.

 li : nth-Child (홀수 .list-item) {
  배경 : LightgoldenRodyellow;
}

그러나 제한된 브라우저 지원으로 인해 @supports 사용하여 조건부 로이 스타일을 적용 할 수 있습니다.

 @supports selector (: nth-Child (1 of .foo)) {
  Li {
    패딩 : 0.25EM;
  }
  li : nth-Child (홀수 .list-item) {
    배경 : LightgoldenRodyellow;
  }
  li.separator {
    목록 스타일 : 없음;
    여백 : 0.25em 0;
  }
}
@supports not selector (: nth-Child (1 of .foo)) {
  li.separator {
    높이 : 1px;
    목록 스타일 : 없음;
    테두리 : 1px 점선 보라색;
    여백 : 0.25em 0;
  }
}

이는 고급 선택기에 대한 지원이없는 브라우저에 폴백 스타일을 제공합니다. 잠재적으로 @when 및 @else 사용하는 개선 된 구문은 이것을 단순화 할 수 있습니다.

 / * 가상의 미래 구문 */
@when supports (selector (: nth-Child (1 of .foo))) {
  / * 브라우저 지원 스타일 */
} @또 다른 {
  / * 폴백 스타일 */
}

선택기 지원 테스트를위한 JavaScript API도 있습니다.

 css.supports ( "selector (: nth-Child (1 of .foo))"))

이 메소드는 Safari에서 true 반환하고 Chrome (작성 당시)에서 false 반환합니다.

@supports 규칙은 강력하지만, 크로스 브라우저를 지원하는 CSS 선택기의 수는 셀렉터에게 @supports 요구하는 사용 사례의 수는 비교적 적습니다. ::marker 및 사례에 민감한 속성 선택기와 같은 이전에 문제가있는 많은 선택기는 이제 광범위한 지원을 즐깁니다. 셀렉터와 같은 :fullscreen 또는 :-webkit-full-screen iOS Safari에서 고유 한 지원 부족으로 인해 흥미롭고 유용한 응용 프로그램을 제공 할 수 있습니다.

위 내용은 @supports selector ()의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!