CSS에서 @supports 규칙을 사용하는 방법

다음과 같은 CSS 기능 감지를 사용한 적이 있습니까? 모 더니 저 기능이 지원되는지 여부에 따라 CSS의 동작을 차별화하려면? 나는 당신 대부분이 가지고 있다고 확신합니다. CSS의 계단식 특성으로 인해 여러 선언을 작성하는 것만으로도 많은 CSS 기능에 대한 폴백을 제공 할 수 있지만, 때로는 최첨단 블링이 없을 때 적용되는 내용에 대해 더 세밀한 제어가 필요합니다.

중히 여기다 경계 이미지 . 지원되지 않는 경우 일반적으로 대체를 제공합니다. 배경 그리고 다른 경계 , 적용되지 않아야하는 경계 이미지 적용됩니다. 또 다른 일반적인 경우는 새로운 레이아웃 모듈 (Flexbox, Grid Layout 및 Regions)입니다. 사용할 수없는 경우 이러한 기술과 충돌 할 수있는 속성을 사용하여 대체 레이아웃을 코딩해야합니다. 즉, 공존 할 수 없습니다.

다행히 CSS WG는 우아하고 순수한 CSS 솔루션을 설계했습니다. @supports 규칙 . 이 규칙을 사용하면 border-image 예제는 다음과 같이 작성됩니다.



.foo { border: 15px solid transparent; border-image: url(fancyborders.png) 33%; } @supports not (border-image: url(foo.png) 33%) { .foo { border: 3px solid rgba(0,0,0,.3); background: url(alternative-bg.png) beige; } }

이를 '기능 쿼리'라고하며 미디어 쿼리와 유사합니다. 실제로 접두사가 붙은 버전도 확인해야합니다.

@supports not (border-image: url(foo.png) 33%) or (-moz-border-image: url(foo.png) 33%) or (-webkit-border-image: url(foo.png) 33%) { ...

게다가 또는 , 아니 , 연산자를 사용할 수 있으므로 모든 종류의 복잡한 부울 논리를 사용할 수 있습니다. 이러한 규칙은 중첩 될 수 있으므로 복잡한 기능 쿼리를 많이 사용할 때 코드를 크게 단순화 할 수 있습니다.

문제가 있습니다. 사용하는 것이 현명하지 않습니다 @ 지원 지원하기 전에 브라우저에서 지원 한 기능 @ 지원 그 자체. 따라서 아직 많은 용도로 사용할 수 없습니다. 그러나 이미 Firefox 22 이상, Chrome 28 이상 및 Opera 12.1 이상에서 지원됩니다. IE 11 및 Safari 7도 지원하는 경우 이러한 버전 이후에 도입 된 기능에 사용할 수 있습니다.

CSS WG는 또한 접두사를 사용하여 @ 지원 (저자가 여러 번 여러 규칙을 작성해야하므로) 목적을 무너 뜨릴 수 있습니다. 따라서 지원하는 모든 브라우저 @ 지원 접두사없이 그렇게하고 있습니다. 다음과 같은 것은 없습니다. @ -webkit- 지원 . 브라우저가 구현에 대해 확신 할 수 없을 때 Firefox가 버전 17-27에서했던 것처럼 플래그 뒤에 숨겼습니다.

이것이 CSS에 좋다고 생각할 수 있지만 때때로 필요한 JavaScript를 통해 CSS 기능을 감지하는 데 도움이되지 않습니다. 다행히도 고유의 우아한 JavaScript API도 함께 제공됩니다. CSS.supports () . 다음과 같이 사용됩니다.

if (CSS.supports('border-image', 'url(foo.png) 33%')) { ... }

이 함수는 또한 폴리 필이 쉽기 때문에 따라 잡지 않은 브라우저에서도 사용할 수 있습니다. 앞으로는 다음과 같은 다른 CSS 기능에 대한 지원을 감지 할 수 있기를 바랍니다. @ 규칙 속성과 값이 아니라 선택자입니다.

말: Lea Verou

Lea Verou 이전에 W3C에서 개발자 옹호자로 일했으며 현재 2014 년 O'Reilly와 함께 출판 될 예정인 첫 번째 책인 CSS Secrets를 작성하고 디자인하는 데 시간을 보냅니다.

이 기사는 원래 넷 매거진 문제 248.

마음에 드 셨나요? 읽어보세요!