크롬이 아닌 사파리 전용 CSS 해킹이 있습니까?

programing tip

크롬이 아닌 사파리 전용 CSS 해킹이 있습니까?

itbloger 2020. 6. 5. 20:15

크롬이 아닌 사파리 전용 CSS 해킹이 있습니까?

크롬이 아닌 사파리에 대한 CSS 해킹을 찾으려고 노력하고 있습니다.이 둘 모두 웹킷 브라우저이지만 크롬과 사파리의 div 정렬에 문제가 있다는 것을 알고 있습니다. 각각 다르게 표시됩니다.

나는 이것을 사용하려고 노력했지만 크롬에도 영향을 미칩니다.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
}

누구나 사파리에 적용 할 다른 것을 알고 있습니까?

SAFARI 11 용 업데이트 (2017 년 가을 업데이트) *

참고 : 필터 및 컴파일러 (예 : SASS 엔진)는 표준 '크로스 브라우저'코드를 필요로합니다. CSS와 같은 해킹은 해킹이 아닌 해킹 을 다시 작성, 파괴 또는 제거한다는 의미입니다. 이 코드는 단일 브라우저 버전 만 대상으로하기 위해 고의적으로 제작되었으며 변경 될 경우 작동하지 않는 비표준 코드입니다. 이것들과 함께 사용하려면 필터 또는 컴파일러 후에 선택한 CSS 핵을로드해야합니다 . 이것은 주어진 것처럼 보일지 모르지만 이러한 목적으로 설계되지 않은 소프트웨어를 통해 해킹을 실행 취소하고 있다는 사실을 모르는 사람들 사이에는 많은 혼란이있었습니다.

많은 사람들이 주목 한 것처럼 6.1 버전 이후 Safari가 변경되었습니다.

참고 : iOS (최소한 iOS 버전 6.1 이상)에서 Chrome (및 현재 Firefox)을 사용하고 있으며 Chrome에서 Safari를 분리하는 것으로 보이는 해킹이없는 이유는 Chrome의 iOS 버전 때문입니다. Safari 엔진을 사용하고 있습니다. Chrome이 아닌 Safari 해킹을 사용합니다. 이에 대한 자세한 내용은 https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/

또한 : 하나 이상의 해킹을 시도했지만 작동하지 못하는 경우 샘플 코드를 게시하십시오 (테스트 페이지가 더 낫습니다)-시도중인 해킹 및 브라우저 (정확한 버전!) 사용중인 장치뿐만 아니라 사용하고 있습니다. 추가 정보가 없으면 나와 다른 사람이 귀하를 도울 수 없습니다.

종종 간단한 수정 또는 누락 된 세미콜론입니다. CSS를 사용하면 CSS 오류뿐만 아니라 스타일 시트에 코드가 나열되는 순서 나 문제가 발생합니다. 테스트 사이트에서 해킹을 테스트하십시오. 그것이 작동한다면, 해킹이 실제로 설정에서 작동하고 있지만 해결해야 할 다른 것입니다. 여기 사람들은 정말로 당신을 도와 주거나 적어도 올바른 방향으로 당신을 가리 킵니다.

테스트 사이트 :

https://browserstrangeness.bitbucket.io/css_hacks.html#webkit

그리고 거울!

https://browserstrangeness.github.io/css_hacks.html#webkit

iOS 용 Firefox는 2015 년 가을에 출시되었으며 Safari Hacks에도 응답하지만 iOS Chrome과 같은 Firefox는 없습니다.

최신 버전의 Safari에 사용할 수있는 방법이 있습니다.

현재 Safari 버전을 다루고 순수 사파리 전용이므로 먼저이 방법을 시도해야합니다.

이것은 여전히 Safari 10.1에서 올바르게 작동합니다.

/* Safari 7.1+ */

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

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

}

더 많은 버전 6.1 이상을 다루려면 현재 다음 CSS 해킹 쌍을 사용해야합니다. 6.1-10.0은 10.1 이상을 처리하는 것과 함께 사용됩니다.

다음은 Safari 10.1 이상에서 해결 한 것입니다.

이중 미디어 쿼리는 여기서 중요합니다. 제거하지 마십시오.

/* Safari 10.1+ */

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

    .safari_only { 

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

    }
}}

SCSS 또는 기타 도구 세트가 중첩 된 미디어 쿼리에 문제가있는 경우이 방법을 시도하십시오.

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

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

    }
}}

다음은 6.1-10.0에서는 작동하지만 10.1에서는 작동하지 않습니다 (2017 년 3 월 말 업데이트).

이 핵은 다른 여러 핵을 결합하여 수개월에 걸친 테스트와 실험을 통해 만들어졌습니다.

참고 : 위와 같이 이중 미디어 쿼리는 우연이 아닙니다. 미디어 쿼리 중첩을 처리 할 수없는 많은 이전 브라우저를 배제합니다. - 'and'중 하나 다음에 누락 된 공간도 중요합니다. 이것은 결국 해킹입니다. 현재 6.1 및 모든 최신 Safari 버전에서 작동하는 유일한 것입니다. 또한 아래 주석에 나열된 것처럼 핵은 비표준 CSS이며 필터 후에 적용해야합니다. SASS 엔진과 같은 필터는 다시 쓰거나 실행 취소하거나 완전히 제거합니다.

위에서 언급했듯이 테스트 페이지를 확인하여 수정없이 그대로 작동하는지 확인하십시오.

그리고 여기 코드가 있습니다 :

/* 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 CSS는 아래에서 계속 읽으십시오.

/* Safari 11+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    .safari_only { 

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

    }
}}

10.1에 대한 약간 수정 된 작품 (전용) :

/* Safari 10.1 */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {

    .safari_only { 

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

    }
}}

Safari 10.0 용 :

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .safari_only {

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

}

Safari 10.0 (비 iOS 장치) :

/* Safari 10.0 (not 10.1) but not on iOS */

_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {

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

}

Safari 9 CSS 해킹 :

Safari 9.0 이상용 :

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

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

}

또한 지원 기능 쿼리 :

/* Safari 9+ */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

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

    }
}

Safari 9.0-10.0 용 :

/* Safari 9.0-10.0 (not 10.1) */

_::-webkit-:not(:root:root), .safari_only {

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

}

Safari 9에는 이제 기능 감지 기능이 포함되어 있으므로 지금 사용할 수 있습니다.

/* Safari 9 */

@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

이제 iOS 기기 만 대상으로합니다. 위에서 언급했듯이 iOS의 Chrome은 Safari에 뿌리를두고 있기 때문에 물론 그중 하나를 공격합니다.

/* Safari 9.0 (iOS Only) */

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

iOS 9.0이 아닌 Safari 9.0 이상용 :

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

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

}

iOS 9.0이 아닌 Safari 9.0-10.0의 경우 :

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

_:-webkit-full-screen:not(:root:root), .safari_only {

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

}

다음은 6.1-7.0 및 7.1+를 분리하는 핵입니다. 올바른 결과를 얻으려면 여러 핵을 조합해야합니다.

/* Safari 6.1-7.0 */

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

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

    );}
}

iOS 기기를 차단하는 방법을 지적 했으므로 iOS가 아닌 기기를 대상으로하는 수정 된 Safari 6.1+ 해킹 버전은 다음과 같습니다.

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */

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

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

    }
}}

그것들을 사용하려면 :

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

일반적으로 [이 질문에서와 같이] 사람들이 Safari 해킹에 대해 묻는 이유는 주로 iOS에서 Chrome을 분리하는 것과 관련이 있습니다 (iOS가 아니라!). 대안을 게시하는 것이 중요 할 수 있습니다. 필요한 경우에 대비하여 여기에 제공하고 있습니다.

기본 사항은 다음과 같습니다. 테스트 페이지에서 특정 버전의 Chrome이 많이 있는지 확인하지만 일반적으로 Chrome에 적용됩니다. 현재 Chrome은 버전 45, 개발자 및 카나리아 버전은 최대 버전 47입니다.

브라우저 해킹에 넣은 이전 미디어 쿼리 콤보는 여전히 Chrome 29 이상에서만 작동합니다.

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

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

    }
}

@supports 기능 쿼리는 Chrome 29 이상에서도 잘 작동합니다. 아래에서 Chrome 28 이상에 사용했던 수정 된 버전입니다. 다가오는 Firefox 브라우저 및 Microsoft Edge 브라우저는 Safari 9와 함께 제공되지 않습니다.

/* Chrome 29+ */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {

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

    }
}

이전에는 Chrome 28 이상이 타겟팅하기 쉬웠습니다. 이것은 다른 CSS 코드 블록 (원래 CSS 핵으로 의도되지 않음) 내에 포함 된 것을보고 브라우저 해킹에 보낸 것으로 그 기능을 깨달았으므로 목적을 위해 관련 부분을 추출했습니다.

[참고 :] 아래의이 오래된 방법은 이제 위의 업데이트없이 Safari 9 및 Microsoft Edge 브라우저를 표시합니다. 다가오는 Firefox 및 Microsoft Edge 버전은 프로그래밍에서 여러 개의 웹킷 CSS 코드에 대한 지원을 추가했으며 Edge 및 Safari 9 모두 @supports 기능 감지에 대한 지원을 추가했습니다. Chrome 및 Firefox에는 이전에 @support가 포함되었습니다.

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {

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

    }
}

Chrome 버전 22-28 (이전 버전을 지원해야하는 경우)의 블록은 위에 게시 한 Safari 콤보 핵을 비틀어 타겟팅 할 수도 있습니다.

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;

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

    );}
}

NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;

위의 Safari CSS 형식 해킹과 마찬가지로 다음과 같이 사용할 수 있습니다.

<div class="chrome_only">This text will be Blue in Chrome</div>

따라서이 게시물에서 검색 할 필요가 없습니다. 여기 내 라이브 테스트 페이지가 있습니다.

https://browserstrangeness.bitbucket.io/css_hacks.html#webkit

[또는 거울]

https://browserstrangeness.github.io/css_hacks.html#webkit

테스트 페이지에는 특히 크롬과 사파리를 구별 할 수있는 버전 기반과 Firefox, Microsoft Edge 및 Internet Explorer 웹 브라우저에 대한 많은 핵이 포함되어 있습니다.

참고 : 문제가 해결되지 않으면 먼저 테스트 페이지를 확인하되 다른 사람이 도와 줄 예제 코드와 WHICH 해킹을 제공하십시오.

Chrome에서 Safari 5 이상을 필터링하는 방법이 있습니다.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}

사라리 만

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}

이 해킹은 100 % 사파리에서만 작동합니다. 나는 그것을 성공으로 테스트했습니다.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}

7.1 이상이 아닌 Safari 7.0 이하에 대한 핵을 구현하려는 경우 다음을 사용하십시오.

.myclass { (;property: value;); }
.myclass { [;property: value;]; }

(.myClass)에서 클래스를 교체하십시오.

/ * Safari 만 해당 * / .myClass : not (: root : root) { enter code here}

다음 방법을 사용하고 싶습니다.

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};

그건 그렇고, 모바일에서 Safari를 타겟팅 해야하는 사람이라면이 해킹에 미디어 쿼리를 추가하십시오.

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

그리고 타겟팅하려는 요소에 .safari_only 클래스 를 추가하는 것을 잊지 마십시오 ( 예 :

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

1 단계 : https://modernizr.com/ 사용

2 단계 : html class .regions를 사용하여 Safari 만 선택

a { color: blue; }
html.regions a { color: green; }

Modernizr은 현재 브라우저가 지원하는 것을 기반으로 HTML 클래스를 DOM에 추가합니다. Safari는 http://caniuse.com/#feat=css-regions 지역을 지원 하지만 다른 브라우저는 (아직도) 지원하지 않습니다. 이 방법은 또한 다른 버전의 IE를 선택하는 데 매우 효과적입니다. 포스가 함께하길.

미디어 쿼리 해킹을 사용하여 다른 브라우저에서 Safari 7 이상을 선택할 수 있습니다.

@media \\0 screen {}

고지 사항 :이 핵은 또한 이전 Chrome 버전 (2013 년 7 월 이전)을 대상으로합니다.

안녕 나는 이것을 만들었고 그것은 나를 위해 일했다.

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}

이 사파리 전용 필터를 사용할 때 Safari (iOS 및 Mac)를 대상으로 할 수 있지만 Chrome (및 기타 브라우저)은 제외 할 수 있습니다.

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}

사파리에서 100 % 작동합니다.

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}

이것은 작동합니다 :

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}

나는 테스트했고 그것은 나를 위해 일했다.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}

결국 나는 약간의 JavaScript를 사용하여 그것을 달성합니다.

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

그런 다음 CSS에서 Apple 브라우저 엔진을 대상으로 선택기는 다음과 같습니다.

.on-apple .my-class{
    ...
}

이 방법은 일부 JS를 사용하지만 https : //.com/a/17637937/3174065 여기에 대답되어 있습니다. 사용하는 경우 js를 바닥 글에 넣으십시오. 바디에 올바르게 장착하려면 바디를 완전히로드해야합니다. 헤드에 배치하면 바디가로드되기 전에 시작되므로 오류가 발생합니다.

그런 다음 본문에 .safari 클래스를 추가하지만 사파리에서만 CSS를 타겟팅하기가 쉽습니다.

참고 : iOS 전용이면 충분합니다 (Safari 데스크탑을 희생하려는 경우).

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }

참고 URL : https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome

저작자표시

'programing tip' 카테고리의 다른 글

jQuery로 입력 값을 설정 한 후 각도 모델 업데이트 (0)	2020.06.05
기본값으로 bash에서 변수 읽기 (0)	2020.06.05
C #의 다양한 스레딩 동기화 옵션의 차이점은 무엇입니까? (0)	2020.06.04
+0과 -0이 동일합니까? (0)	2020.06.04
'앱'Android XML 네임 스페이스 란 무엇입니까? (0)	2020.06.04

현재글크롬이 아닌 사파리 전용 CSS 해킹이 있습니까?

itbloger

크롬이 아닌 사파리 전용 CSS 해킹이 있습니까?

크롬이 아닌 사파리 전용 CSS 해킹이 있습니까?

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

티스토리툴바

크롬이 아닌 사파리 전용 CSS 해킹이 있습니까?

크롬이 아닌 사파리 전용 CSS 해킹이 있습니까?

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

관련글

티스토리툴바