CSS의 소개 @supports 규칙 (기능 쿼리)

키 테이크 아웃

CSS의 @Supports 규칙을 통해 개발자는 기능 감지를 구현하고 브라우저가 특정 CSS 속성/값 쌍을 지원하고 그에 따라 스타일을 적용하는지 확인할 수 있습니다. 이것은 고급 기술에 대한 고르지 않은 브라우저 지원을 처리하기위한 진보적 인 향상 접근법의 일부입니다.

@Supports Rule Syntax에는‘and’,‘또는’및‘Not’과 같은 논리 연산자가 포함되어있어 여러 조건을 한 번에 테스트 할 수 있습니다. 조건을 함께 그룹화 할 때 괄호를 올바르게 사용하는 것이 중요합니다.

JavaScript는 CSS 인터페이스 및 supports () 함수를 사용하여 CSS 기능 쿼리와 함께 사용할 수 있습니다. 이 함수는 브라우저가 특정 CSS 속성을 지원하는지 여부를 나타내는 부울 값을 반환합니다. 대부분의 최신 브라우저는 @supports 규칙을 지원하지만 Internet Explorer 11 및 Opera Mini는 그렇지 않습니다. 따라서 개발자는 대상 브라우저를 처리 할 수있는 기본 스타일을 정의하고 @Supports를 사용하여 최신 기능을 처리 할 수있는 브라우저에서 이러한 스타일을 재정의하고 보충해야합니다.

최신 기술에 대한 브라우저의 고르지 않은 지원에 대한 두 가지 일반적인 접근 방식은 우아한 열화와 진보적 인 향상입니다. 우아한 열화는 고급 기술을 활용하여 정교한 사용자 경험과 기능을위한 설계를 활용합니다. 유능한 브라우저를 사용하는 사용자는 여전히 웹 사이트에 액세스 할 수 있지만 기능 수준의 감소 및 탐색 경험을 누릴 수 있습니다. 진보적 인 향상을 통해 개발자는 대부분의 브라우저가 지원할 수있는 수준의 사용자 경험을 설계하여 기준을 설정합니다. 그들의 응용 프로그램은 브라우저 기능의 내장 감지 기능을 제공하며, 이에 따라보다 고급 기능과 더 풍부한 브라우징 경험을 제공하는 데 사용합니다. 진보적 인 향상 접근 방식에서 가장 널리 채택 된 도구는 Modernizr JavaScript 라이브러리입니다. modernizr는 브라우저가 차세대 웹 기술을 지원하는지 프로그래밍 방식으로 점검하여 True 또는 False를 반환합니다. 이 지식으로 무장하면서, 당신은 지원 브라우저에서 새로운 기능을 악용 할 수 있으며, 오래된 또는 비합성 브라우저를 제공하는 신뢰할 수있는 수단을 가지고 있습니다. 이 소리만큼 좋을 때, 더 나은 것이 한동안 양조되었습니다. @Supports 규칙과 함께 기본 CSS 기능 쿼리를 사용하여 기능 감지를 수행 할 수 있습니다. 이 게시물에서 @supports와 관련 JavaScript API를 더 깊이 파고들 것입니다.
@Supports Rule
• 로 브라우저 기능 감지 @supports 규칙은 CSS3 조건부 규칙 사양의 일부이며, 우리 모두가 반응 형 디자인 작업에서 사용하는보다 광범위한 @Media 규칙도 포함합니다. 미디어 쿼리를 사용하면 뷰포트 너비 및 높이와 같은 디스플레이 기능을 감지 할 수 있지만 @Supports는 CSS 속성/값 쌍에 대한 브라우저 지원을 확인할 수 있습니다. 기본 예를 고려하려면 웹 페이지에 CSS 블렌딩을 사용하여 향상시킬 예술 작품을 표시한다고 가정 해 봅시다. CSS 블렌드 모드는 비 지원되는 브라우저에서 우아하게 저하 된 것은 사실입니다. 그러나 이러한 경우 기본적으로 브라우저가 표시하는 대신 비 지원 브라우저 사용자에게 똑같이 특별한 것을 표시함으로써 똑같이 특별한 것을 표시함으로써 유쾌한 브라우저 사용자를 기쁘게 할 수 있습니다. 스타일 시트에서 @supports와 함께 CSS 블렌딩 검사를 수행하는 방법입니다.

  믹스 블렌드 모드 지원이없는 브라우저에 다양한 스타일을 적용하려면이 구문을 사용합니다.

  주목할만한 몇 가지 :

  <span><span>@supports (mix-blend-mode: overlay)</span> {
  </span>
    <span><span>.example</span> {
  </span>    <span>mix-blend-mode: overlay;
  </span>  <span>}
  </span>
  <span>}</span>

  테스트중인 상태는 괄호 안에 있어야합니다. 다시 말해, @Supports Mix-Blend-Mode : Overay {...}는 유효하지 않습니다. 그러나 필요한 것보다 더 많은 괄호를 추가하면 코드가 정상입니다. 예를 들어, @supports ((믹스 블렌드 모드 : 오버레이))는 유효합니다 조건에는 속성과 값이 모두 포함되어야합니다. 위의 예에서는 믹스 블렌드 모드 속성과 해당 속성의 오버레이 값을 확인하고 있습니다. 후행 추가! 테스트중인 선언에 중요한 코드의 유효성에는 영향을 미치지 않습니다.

  작은 데모로 위의 예를 살펴 보겠습니다. 믹스 블렌드 모드 지원이있는 브라우저는 @Supports () {...} 블록 내부에 스타일을 적용합니다. 다른 브라우저는 @supports 내부에 스타일이 없어지지 않습니다 () {...} 블록. html :

  CSS :

  <span><span>@supports not(mix-blend-mode: overlay)</span> {
  </span>
    <span><span>.example</span> {
  </span>    <span>/* alternative styles here */
  </span>  <span>}
  </span>
  <span>}</span>

  Codepen에서 데모를 확인하십시오 : Codepen에서 sitepoint (@sitepoint)의 @supports 규칙 데모 참조. 한 번에 여러 조건에 대한 테스트 @supports에서 기능 테스트를 수행 할 때 한 번에 하나의 테스트 조건에 국한되지 않습니다. 같은 논리 연산자와 같은 논리 연산자를 결합하여 이미 언급되지 않은 운영자는 한 번에 여러 기능을 테스트 할 수 있습니다.

  및 결합 연산자 테스트 다중

  필수
  조건의 존재에 대한 테스트 :
  disjunctive 또는 키워드를 사용하면 스타일 세트에 대한 여러 대체 기능의 존재를 테스트 할 수 있습니다. 이러한 대안 중 일부가 속성 또는 값에 대해 공급 업체 접두사가 필요한 경우 특히 편리합니다.
  • 동일한 @supports 규칙에서 조건을 결합하거나 또는 테스트 할 수 있습니다.

    <span><span>@supports (mix-blend-mode: overlay)</span> {
    </span>
      <span><span>.example</span> {
    </span>    <span>mix-blend-mode: overlay;
    </span>  <span>}
    </span>
    <span>}</span>

    여러 조건을 함께 그룹화하면 괄호를 올바르게 사용하는 것이 중요합니다. 함께 혼합 된 키워드가없고, 또는 또는, 또한 괄호 안에 조건을 그룹화하는 방식은 평가를받는 순서를 설정합니다. 위의 스 니펫에서, 분리 또는 조건이 먼저 평가 된 후, 결과 답변은 및 키워드에 의해 도입 된 추가 필요한 조건에 대해 평가된다.

    키워드가 아닌 경우 한 번에 한 가지 조건을 테스트 할 수 있습니다. 예를 들어 아래 코드는 유효하지 않습니다 대신 모든 를 그룹화해야합니다. 위의 스 니펫의 수정 된 버전은 다음과 같습니다

    마지막으로, 당신은 an and or. 행동의 운영자 브라우저가 다음 구문을 사용하여 그라디언트와 블렌드 모드를 모두 지원하는 경우 스타일 세트를 적용 할 수 있습니다 (디스플레이 목적으로 아래 코드를 여러 줄로 끊었습니다).

    일부 이전 안드로이드 브라우저는 선형 그라디언트 용 -webkit- 접두사가 필요하기 때문에이 추가 조건을 @supports 블록에 통합하여 브라우저 지원을 확인해 봅시다.

    <span><span>@supports not(mix-blend-mode: overlay)</span> {
    </span>
      <span><span>.example</span> {
    </span>    <span>/* alternative styles here */
    </span>  <span>}
    </span>
    <span>}</span>

    귀하의 웹 사이트가 글을 쓰는 시점에서 Safari에서 지원되지 않는 광도 및 채도 블렌드 모드를 사용한다고 가정 해 봅시다. 여전히 해당 브라우저에 대한 대체 스타일을 제공하려고합니다. @Supports를 사용하여 적절한 결합 조건을 설정하는 방법은 다음과 같습니다.

    이 섹션의 모든 데모는 Codepen에서 사용할 수 있습니다 : . Codepen에서 sitepoint (@sitepoint)로 @supports로 여러 기능 테스트에서 펜 데모를 참조하십시오. CSS 기능 쿼리가있는 JavaScript JavaScript CSS 인터페이스 및 supports () 함수를 사용하여 CSS 기능 쿼리를 활용할 수 있습니다. CSS.Supports () 함수를 두 가지 방법 중 하나로 쓸 수 있습니다.

    초기에 가장 널리 지원되는 구문은 두 가지 인수, 즉 속성
    class="artwork">
    src="myimg.jpg" alt="cityscape"> >와 를 취하고 부울 참 또는 거짓 값을 반환합니다 : .
    속성과 해당 값을 인용문 내부에 배치하십시오. 사양은 다음 두 가지 조건을 충족하면 위의 함수가 true를 반환한다는 것을 분명히합니다.
    이 속성은 브라우저가 지원하는 "CSS 속성의 이름에 대한 문자 매치"입니다. 값은 "해당 속성의 지원 값으로 성공적으로 구문 분석됩니다".
    by by 리터럴 매치
    • > 사양은 CSS 이스케이프가 처리되지 않고 공백이 다듬어지지 않음을 의미합니다. 따라서 캐릭터를 탈출하거나 후행 공백을 떠나지 마십시오. 그렇지 않으면 테스트가 거짓을 반환합니다.
    . 대안, 최신 구문은 괄호 안에서 하나의 인수 만 가져옵니다.
    이 구문을 사용하면 및 키워드를 사용하여 여러 조건을 테스트하는 것이 편리합니다. 다음은 빠른 예입니다. 브라우저가 Luminosity Blend 모드를 지원하는지 테스트하고 싶다고 가정 해 봅시다. 그렇다면, JavaScript는 대상 요소에 Luminosity 블렌드 클래스를 동적으로 추가합니다. 그렇지 않으면 비오루미어 클래스가 추가됩니다. 그런 다음 CSS는 그에 따라 요소를 스타일링합니다 CSS는 다음과 같습니다

    두정 구문을 따르는 경우 JavaScript 스 니펫은 다음과 같습니다. 최신 단일 학기 구문을 선호하는 경우 위의 해당 코드 라인을 아래의 코드로 바꾸십시오. 데모를 자유롭게 확인하십시오 : Codepen에서 SitePoint (@SitePoint)의 CSS 기능 쿼리의 펜 JavaScript API 참조. 브라우저 지원 주요 브라우저의 모든 최신 버전은 Internet Explorer 11 및 Opera Mini를 제외한 @supports 규칙을 지원합니다. @supports는 현실 세계를 위해 준비되어 있습니까? Tiffany Brown의 말 에서이 질문에 대한 최상의 대답을 찾았습니다.

    의 모든 스타일. 브라우저가 처리 할 수 ​​있습니다. 그런 다음 @supports를 사용하여 를 재정의하고 보충하십시오 최신 기능을 처리 할 수있는 브라우저의 이러한 스타일 CSS 마스터, p.303 <span><span>@supports (mix-blend-mode: overlay)</span> { </span> <span><span>.example</span> { </span> <span>mix-blend-mode: overlay; </span> <span>} </span> <span>}</span>
    결론

    이 기사에서는 @supports 규칙 (일명 기능 쿼리)을 사용하여 기본 CSS 브라우저 기능 감지를 탐색했습니다. 또한 해당 JavaScript API를 살펴 보았습니다. 이는 Flexible CSS.Supports () 메소드를 사용하여 최신 CSS 속성에 대한 현재 브라우저 지원 상태를 확인할 수 있습니다. CSS 기능 쿼리에 대한 브라우저 지원은 양호하지만 모든베이스를 다루는 것은 아닙니다. 그러나 프로젝트에서 @supports를 사용하려면 Tiffany Brown이 제안한 것처럼 CSS 문서에 전략적 스타일을 배치하고 Han Lin Yap의 CSS-Supports.js Polyfill이 도움이 될 수 있습니다.

    이 기사에서 데모를 시험해 보거나 @supports를 사용한 실제 경험이 있다면, 여러분의 의견을 듣고 싶습니다. CSS @supports 규칙 에 대해 자주 묻는 질문 CSS @Supports 규칙이란 무엇이며 어떻게 작동합니까? 기능 쿼리라고도하는 CSS @Supports 규칙은 브라우저가 특정 CSS 기능을 지원하는지 확인하는 조건부 규칙입니다. 기능이 지원되면 브라우저는 @Supports 규칙 내에 스타일을 적용합니다. 그렇지 않으면 무시할 것입니다. 이를 통해 개발자는 이전 브라우저와의 호환성을 유지하면서 새로운 CSS 기능을 사용할 수 있습니다. 구문은 @supports 다음과 같은 기능과 그 값이 다음과 같이 괄호 안에 있습니다 : @supports (display : grid) { / * 그리드가 지원되는 경우 적용 할 수있는 스타일 * /}. CSS @Supports 규칙에서?

    예, 논리 연산자를 사용하여 CSS @Supports 규칙에서 여러 조건을 사용할 수 있습니다. ‘및’운영자를 사용하면 여러 기능이 지원되는지 확인할 수 있으며‘또는’운영자는 기능 중 하나 이상이 지원되는지 확인합니다. 'Not'운영자는 기능이 지원되지 않는지 확인합니다. 예를 들어, @supports (display : grid) 및 (display : flex) { / * 그리드와 플렉스가 모두 지원되는 경우 적용 할 수있는 스타일 * /}.

    브라우저가 지원하지 않는지 어떻게 확인할 수 있습니까? CSS 기능?

    @Supports 규칙에서 'NOT'연산자를 사용하여 브라우저가 CSS 기능을 지원하지 않는지 확인할 수 있습니다. 예를 들어, @supports not (display : grid) { / * 그리드가 지원되지 않는 경우 적용 할 수있는 스타일 * /}. 브라우저가 CSS 그리드를 지원하지 않으면 스타일이 적용됩니다.

    브라우저가 @supports 규칙을 지원하지 않으면 어떻게됩니까?

    브라우저가 @를 지원하지 않으면 @ 규칙을지지하면, 스타일을 포함하여 전체 규칙을 무시합니다. 즉, 이전 브라우저에서 웹 사이트를 끊는 것에 대해 걱정하지 않고 @supports를 안전하게 사용할 수 있습니다. 그러나 @supports로 테스트하는 기능을 지원하지 않는 브라우저에 대한 폴백 스타일을 제공하는 것이 여전히 중요합니다.

    @supports 규칙을 중첩 할 수 있습니까?

    예, 둥지를 둥지 할 수 있습니다. @supports 규칙은 다른 CSS 규칙을 중첩 할 수 있습니다. 이를 통해보다 복잡한 방식으로 여러 기능을 지원하는 방법을 테스트 할 수 있습니다. 예를 들어, 브라우저가 CSS 그리드와 Flexbox를 모두 지원하는 경우에만 Nested @Supports 규칙을 사용하여 스타일을 적용 할 수 있습니다.

    기능 감지를위한 @Supports 규칙은 얼마나 신뢰할 수 있습니까?
    @ @ 지원 규칙은 CSS의 기능 감지를위한 신뢰할 수있는 방법이지만 완벽하지는 않습니다. 일부 이전 브라우저는 @supports를 지원하지 않으며 일부 브라우저는 잘못된 양성 또는 부정적인 것을보고 할 수 있습니다. 예상대로 작동하는지 확인하기 위해 여러 브라우저에서 웹 사이트를 테스트하는 것이 좋습니다.

    @supports 규칙과 함께 javaScript를 사용할 수 있습니까?

    예, JavaScript를 사용하여 테스트 할 수 있습니다. CSS는 CSS.Supports () 메소드를 지원합니다. 이 방법은 @Supports 규칙과 유사하게 작동하지만 JavaScript 코드에서 동적으로 기능 지원을 테스트 할 수 있습니다. CSS 기능에 대한 브라우저 지원을 확인할 수있는 도구가 있습니까?

    예, CSS 기능에 대한 브라우저 지원을 확인하는 데 도움이되는 몇 가지 도구가 있습니다. 가장 인기있는 것 중 하나는 광범위한 CSS 기능에 대한 브라우저 지원에 대한 최신 정보를 제공하는 것입니다.

    미디어 쿼리와 함께 @supports를 사용할 수 있습니까?

    . 예, 미디어 쿼리와 함께 @supports를 사용하여 기능 지원 및 뷰포트 크기를 기반으로 스타일을 적용 할 수 있습니다. 이것은 새로운 CSS 기능을 활용하는 반응 형 디자인을 만드는 데 매우 유용 할 수 있습니다.

    @supports 규칙의 일반적인 사용 사례는 무엇입니까?

    @supports 규칙은 일반적으로 사용됩니다. 고급 CSS 기능이 브라우저에서 지원되는 경우에만 웹 사이트를 점차적으로 향상시킵니다. 여기에는 CSS 그리드, Flexbox, 사용자 정의 속성 등이 포함될 수 있습니다. 또한 이러한 기능을 지원하지 않는 브라우저에 폴백 스타일을 제공하는 데 사용됩니다.

위 내용은 CSS의 소개 @supports 규칙 (기능 쿼리)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!