Skip to content

유용한 정보

유용한 정보

사파리 브라우저, 아이폰 iOS CSS 핵 정리.css

Posted on12월 13, 20213개월 전

맥의 사파리 브라우저와 아이폰IOS 에 적용되는 CSS Hacks 입니다.

목차 숨기기
  1. 1) Safari 6.1+
  2. 2) Safari 9.0+
  3. 3) Safari 9
  4. 4) 아이폰 사파리 9.0이상 만 적용Safari 9.0+ (iOS Only)
  5. 5) 사파리 9.0 이상 웹브라우저 만 적용 – Safari 9.0+ (non-iOS)
  6. 6) Safari 6.1-7.0
  7. 7) Safari 7.1+
  8. 8) 사파리 6.1 이상 웹브라우저 만 적용 – Safari 6.1+ (non-iOS)

프로젝트시 가끔 아이폰과 안드로이드, 웹브라우저 간의 스타일이 적용이 다를 때나 깨질 때 사용할 수 있는 CSS 코드 입니다.
핵은 안쓰면 좋겠지만, 꼭 필요할 때가 생기기도 하니..
적용 후, 테스트 잊지 마세요~

Safari 6.1+

/* Safari 6.1+ (9.0 is the latest version of Safari at this time) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

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

    }
}}

Safari 9.0+

/* Safari 9.0+ */
_::-webkit-:not(:root:root), .safari_only {

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

}

소스 코드 영역을 더블클릭 하시면, 코드가 전체 선택 됩니다. 그리고, ctrl + c / ctrl + v

Safari 9

/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{

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

}

아이폰 사파리 9.0이상 만 적용Safari 9.0+ (iOS Only)

/* Safari 9.0+ (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-accelerator:true))
and (not (-moz-appearance:none))
{

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

}

사파리 9.0 이상 웹브라우저 만 적용 – Safari 9.0+ (non-iOS)

/* Safari 9.0+ (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {

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

}

Safari 6.1-7.0

/* 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; 

    );}
}

Safari 7.1+

/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {

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

}

사파리 6.1 이상 웹브라우저 만 적용 – Safari 6.1+ (non-iOS)

/* Safari 6.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; 

    }
}}

사용방법은 CSS 클래스로 적용하고, 위의 hack 을 style 에 추가해주시면 됩니다.

This text will be Blue in Safari

via stackoverflow (thanks to Jeff Clayton)

공유하기
Post Tags:#CSS

  • #전국 도·시·군·구 지자체 홈페이지 바로가기
  • #국민연금 예상수령액
  • #숨은 보험금 찾기
  • #기초연금 신청 및 지급
  • #국민건강보험 자격득실 확인서 인터넷발급
  • #개인통관고유부호 발급 및 조회
  • #주유소 가격비교

© 2025 유용한 정보

  • PRIVACY POLICY
  • TERMS
  • CONTACT
Scroll to top
Search