CSS Hack을 사용하여 Safari에만 스타일을 적용하려면 어떻게 해야 합니까?

Safari만을 대상으로 하는 CSS 해킹

Safari에 대해 별도의 스타일을 사용하는 이유는 무엇입니까?

CSS 해킹은 종종 특정 대상을 대상으로 사용됩니다. 스타일링 목적을 위한 브라우저. 이 경우 Chrome 등 다른 브라우저를 제외하고 Safari에만 스타일을 적용하는 것을 목표로 합니다.

현재 해킹의 비효율성

원본 게시물에서 언급했듯이, @media 화면 및 (-webkit-min-device-pixel-ratio:0) 해킹은 Safari와 Chrome.

Safari용 업데이트된 솔루션

그러나 다음은 Safari만을 대상으로 하는 몇 가지 새로운 CSS 해킹입니다.

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/ Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

사용방법

신청하기 이러한 스타일을 Safari의 요소에 적용하려면 다음과 같이 safari_only 클래스를 사용하세요.

<div class="safari_only">This text will be blue in Safari</div>

참고:

이러한 해킹을 구현할 때 사용자 정의 클래스 이름을 사용하는 것이 중요합니다. 의도하지 않은 결과를 피하기 위해. 또한 이러한 핵은 모든 시나리오에서 작동하지 않을 수 있으며, 특히 웹사이트에서 CSS 필터나 컴파일러를 사용하는 경우 핵이 변경되거나 제거될 수 있다는 점에 유의하세요.

위 내용은 CSS Hack을 사용하여 Safari에만 스타일을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!