사파리에만 스타일을 적용할 수 있는 방법이 있습니까?
사파리에만 CSS를 적용하는 방법을 찾고 있는데, 제가 발견한 모든 것이 크롬에도 적용됩니다.현재 둘 다 WebKit 브라우저라는 것은 알고 있지만 Chrome과 Safari의 div 정렬에 문제가 있습니다. 각각 표시가 다릅니다.
저는 이것을 사용하려고 노력해왔지만 크롬에도 영향을 미칩니다.
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
사파리에 적용될 또 다른 것을 아는 사람이 있습니까?
- Ventura 및 Safari 16.4용으로 업데이트됨(2023년 봄 업데이트) *
제발 -- 만약 여러분이 문제가 있고, 그것에 대한 의견을 게시함으로써 도움을 받거나 다른 사람들을 돕고 싶다면, 브라우저와 장치(MacBook/IPAD/etc...)를 게시하세요.브라우저와 OS 버전 번호 모두 포함!)
이러한 작업 중 어느 것도 정확하지 않다고 주장하는 것은 (실제로는 가능하지도 않습니다.)이 중 많은 것들은 실제로 '해킹'이 아니라 Apple이 Safari 버전에 내장한 코드입니다.더 많은 정보가 필요합니다.저는 당신이 여기에 왔다는 사실이 마음에 들어요. 그리고 당신에게 모든 것이 잘 되기를 바랍니다.
만약 당신이 당신의 사이트에서 작업하는 것에 문제가 있다면, 아래 링크를 통해 테스트 사이트를 확인하십시오. 만약 당신의 사이트에서 작업하고 있지만, 당신의 사이트에서 작업하고 있지 않다면, 그 해킹은 문제가 아닙니다. 당신의 사이트에서 다른 일이 일어나고 있습니다. 종종 아래 언급된 것처럼 단지 CSS 충돌입니다.또는 아무 것도 작동하지 않지만 실제로 Safari를 전혀 사용하지 않는다는 것을 모를 수도 있습니다.이 정보는 단기적인 문제가 있는 사람들을 돕기 위해 여기에 있다는 것을 기억하십시오.
테스트 사이트:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
그리고 거울!
https://browserstrangeness.github.io/css_hacks.html#safari
참고: 필터와 컴파일러(SAS 엔진 등)는 표준 '크로스 브라우저' 코드를 기대합니다. 이와 같은 CSS 해킹은 해킹이 수행하는 것이 아니기 때문에 해킹을 다시 작성, 파괴 또는 제거한다는 의미가 아닙니다.이 중 대부분은 단일 브라우저 버전만 대상으로 지정하도록 공들여 만든 비표준 코드이며 변경되면 작동할 수 없습니다.만약 당신이 그것들과 함께 사용하기를 원한다면, 당신은 어떤 필터나 컴파일러 뒤에 당신이 선택한 CSS 해킹을 로드해야 합니다.이것은 당연한 것처럼 보일 수 있지만 이러한 목적으로 설계되지 않은 소프트웨어를 통해 해킹을 실행함으로써 해킹을 취소하고 있다는 것을 깨닫지 못하는 사람들 사이에서 많은 혼란이 있었습니다.
많은 사람들이 알고 있듯이 Safari는 버전 6.1 이후로 변경되었습니다.
참고: iOS(최소한 iOS 버전 6.1 이상)에서 Chrome [그리고 지금은 Firefox]를 사용하고 있는데 왜 해킹이 Chrome과 Safari를 분리하지 않는지 궁금하다면, 그것은 Chrome의 iOS 버전이 Safari 엔진을 사용하고 있기 때문입니다. 그것은 크롬 해킹이 아닌 사파리 해킹을 사용합니다. 자세한 내용은 https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ iOS용 Firefox가 2015년 가을에 출시되었습니다.사파리 해킹에도 대응하지만 iOS 크롬과 같은 파이어폭스 해킹은 없습니다.
또한, 만약 당신이 하나 이상의 해킹을 시도했지만 그것들을 작동시키는 데 문제가 있다면, 당신이 시도하고 있는 해킹과 당신이 사용하고 있는 브라우저(정확한 버전!), 샘플 코드(더 나은 테스트 페이지)를 게시하세요.추가 정보가 없으면 저나 여기 있는 다른 사람이 당신을 돕는 것은 불가능합니다.
단순 수정이거나 세미콜론이 누락된 경우가 많습니다.CSS에서는 보통 CSS 오류뿐만 아니라 스타일 시트에 코드가 나열되는 순서의 문제입니다.여기 테스트 사이트에서 해킹 테스트를 해주시기 바랍니다.만약 그것이 작동한다면, 그것은 해킹이 당신의 설정에 정말로 효과가 있다는 것을 의미하지만, 그것은 해결되어야 할 다른 문제입니다.여기 사람들은 여러분을 돕거나 적어도 올바른 방향으로 인도하는 것을 정말 좋아합니다.
여기에는 최신 버전의 Safari에 사용할 수 있는 해킹이 있습니다.
이 버전은 현재 Safari 버전을 포함하며 순수 Safari 버전만 지원하므로 먼저 사용해 보십시오.
이 기능은 Safari 16.4(2023년 봄)에서도 제대로 작동합니다.
/* 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월 말 업데이트).
제가 만든 이 해킹은 여러 개의 다른 해킹을 결합하여 여러 달에 걸친 테스트와 실험을 통해 만들어졌습니다.
참고: 위와 같이 이중 미디어 쿼리는 우연이 아닙니다. 미디어 쿼리 중첩을 처리할 수 없는 많은 오래된 브라우저를 제외합니다. -- ' 및' 뒤에 공백이 있는 것도 중요합니다.이건 결국 해킹이고...현재 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용 1개:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 10.0용 1개:
/* 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+, < 13.1 */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Safari 9.0-10.0용 1개:
/* 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;
}
}
하나는 Safari 9.0+용이지만 iOS 기기용은 아닙니다.
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
iOS 기기가 아닌 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 해킹에 대해 묻는 이유는 대부분 Google Chrome에서 분리하는 것과 관련이 있습니다(또 다른 iOS!).사파리와 별도로 크롬을 타겟으로 하는 방법에 대한 대안을 게시하는 것이 중요할 수 있으므로 필요할 경우를 대비하여 제공합니다.
다음은 기본 사항입니다. 테스트 페이지에서 많은 특정 버전의 Chrome에 대해 다시 확인하십시오. 그러나 일반적으로 Chrome에 대한 내용입니다.Chrome은 버전 45이고 Dev 및 Canary 버전은 현재 버전 47까지입니다.
브라우저 해킹에 넣은 이전 미디어 쿼리 콤보는 여전히 크롬 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+에서도 잘 작동합니다...우리가 아래 크롬 28+에 사용하던 것의 수정된 버전.Safari 9, 곧 출시될 Firefox 브라우저 및 Microsoft Edge 브라우저는 다음과 같이 선택되지 않습니다.
/* 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 모두 @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
테스트 페이지에는 Chrome과 Safari를 추가로 구분하는 데 도움이 되는 버전 기반의 다른 많은 기능과 Firefox, Microsoft Edge 및 Internet Explorer 웹 브라우저를 위한 많은 해킹 기능도 있습니다.
참고: 문제가 해결되지 않을 경우 먼저 테스트 페이지를 확인하되, 다른 사용자가 도움을 줄 수 있도록 예제 코드와 어떤 해킹을 시도하는지 제공합니다.
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){
/* ^_^ */
}
이 해킹은 사파리 5.1-6.0에서만 100% 작동합니다.저는 방금 그것을 성공적으로 시험했습니다.
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
iOS 16 및 macOS Ventura에서 작동:
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}
이 사파리 전용 필터를 사용하면 사파리(iOS 및 Mac)를 대상으로 할 수 있지만 크롬(및 기타 브라우저)은 제외할 수 있습니다.
@supports (-webkit-backdrop-filter: blur(1px)) {
.safari-only {
background-color: rgb(76,80,84);
}
}
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>
효과:
@media not all and (min-resolution:.001dpcm) {
@media {
/* your code for Safari Desktop & Mobile */
body {
background-color: red;
color: blue;
}
/* end */
}
}
@supports (background: -webkit-named-image(i)) {
//
}
h1::after {
content: "No";
margin-left: .3em;
color: red;
}
@supports (background: -webkit-named-image(i)) {
h1::after {
content: "Yes";
color: green;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Safari?</h1>
</body>
</html>참고: iOS 전용이면 충분합니다(Safari 데스크톱을 희생할 의사가 있다면).
@supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
하이브는 이것을 만들었고 그것은 나에게 효과가 있었습니다.
@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;
}
}
}
1단계: https://modernizr.com/ 사용
2단계: html class .regions를 사용하여 Safari만 선택합니다.
a { color: blue; }
html.regions a { color: green; }
Modernizr은 현재 브라우저가 지원하는 것을 기준으로 DOM에 html 클래스를 추가합니다.Safari는 http://caniuse.com/ #safari=safari-safari 지역을 지원하는 반면 다른 브라우저는 지원하지 않습니다(아직은 지원하지 않습니다).이 방법은 다른 버전의 IE를 선택하는 데도 매우 효과적입니다.포스가 당신과 함께 하길.
미디어 쿼리 해커를 사용하여 다른 브라우저에서 Safari 6.1-7.0을 선택할 수 있습니다.
@media \\0 screen {}
고지 사항:이 해킹은 또한 (2013년 7월 이전의) 오래된 크롬 버전을 대상으로 합니다.
만약 당신이 사파리 특정 브라우저 해킹을 찾고 있다면.
이것을 사용해 봤는데 저에게 효과가 있습니다(Safari에만 해당).
@supports (-webkit-hyphens:none){
@content
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
@content
}
}
마지막에는 약간의 JavaScript를 사용하여 이를 달성합니다.
if (navigator.vendor.startsWith('Apple'))
document.documentElement.classList.add('on-apple');
그러면 Apple 브라우저 엔진을 대상으로 하는 내 CSS에서 선택기는 다음과 같습니다.
.on-apple .my-class{
...
}
사파리에서 100% 작동합니다.나는 노력했다.
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
테스트를 해봤는데 효과가 있었습니다.
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .myClass {
height: 1070px !important;
}
}
언급URL : https://stackoverflow.com/questions/16348489/is-there-a-way-to-apply-styles-to-safari-only
'programing' 카테고리의 다른 글
| 포트 바인딩에 도커에서 IPv4를 사용하도록 설정 (0) | 2023.08.13 |
|---|---|
| PowerShell: 문자열을 N자로 제한하는 방법은 무엇입니까? (0) | 2023.08.13 |
| 종료된 컨테이너의 로그를 확인하는 도커 (0) | 2023.08.13 |
| PHP 사이트에서 xss 공격을 피하기 위한 최상의 방법은 무엇입니까? (0) | 2023.08.13 |
| NumPy 배열의 임플레이스 유형 변환 (0) | 2023.08.13 |