크롬이 아닌 사파리에 대한 CSS 해킹을 찾으려고 노력 중입니다. 웹킷 브라우저 모두 알고 있지만 크롬과 사파리의 div 정렬에 문제가 있으며 각기 다르게 표시됩니다.
나는 이것을 사용하려고 노력했지만 크롬에도 영향을 미칩니다.
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
} 누구나 사파리에 적용 할 다른 것을 알고 있습니까?
답변
- CATALINA & SAFARI 13 업데이트 (2020 년 초)
참고 : 필터 및 컴파일러 (예 : 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/ iOS 용 Firefox가 2015 년 가을에 출시되었습니다. Safari Hacks는 있지만 iOS Chrome과 같은 Firefox는 없습니다.
또한 : 하나 이상의 해킹을 시도했지만 작동하지 못하는 경우 샘플 코드를 게시하십시오 (테스트 페이지는 더 낫습니다)-해킹하려는 해킹 및 브라우저 (정확한 버전!) 사용중인 장치뿐만 아니라 사용하고 있습니다. 추가 정보가 없으면 나와 다른 사람이 귀하를 도울 수 없습니다.
종종 간단한 수정 또는 누락 된 세미콜론입니다. CSS를 사용하면 CSS 오류뿐만 아니라 스타일 시트에 코드가 나열되는 순서 또는 문제가 발생합니다. 테스트 사이트에서 해킹을 테스트하십시오. 그것이 작동한다면, 해킹이 실제로 설정에서 작동하고 있지만 해결해야 할 다른 것입니다. 여기 사람들은 정말로 당신을 도와 주거나 적어도 올바른 방향으로 당신을 가리 킵니다.
테스트 사이트 :
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
그리고 거울!
https://browserstrangeness.github.io/css_hacks.html#safari
최신 버전의 Safari에 사용할 수있는 방법이 있습니다.
현재 Safari 버전을 다루고 순수 사파리 전용이므로 먼저이 방법을 시도해야합니다.
이것은 Safari 13 (-2020 이전)에서 여전히 올바르게 작동합니다.
/* 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;
}
}}Safari 11.0 용 :
/* Safari 11.0 (not 11.1) */
html >> * .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;
}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 (비 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 이상에서 기능 쿼리 해킹을 지원합니다.
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}Safari 9.0 이상에 대한 간단한 밑줄 핵 :
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}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#safari
[또는 거울]
https://browserstrangeness.github.io/css_hacks.html#safari
테스트 페이지에는 크롬과 사파리를 구별하는 데 도움이되는 버전 기반과 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 %는 사파리 5.1-6.0에서만 작동합니다. 나는 그것을 성공으로 테스트했습니다.
@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
}
답변
그건 그렇고, 모바일에서 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>