맥의 사파리 브라우저와 아이폰IOS 에 적용되는 CSS Hacks 입니다.
프로젝트시 가끔 아이폰과 안드로이드, 웹브라우저 간의 스타일이 적용이 다를 때나 깨질 때 사용할 수 있는 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;
}
}
소스 코드 영역을 더블클릭 하시면, 코드가 전체 선택 됩니다. 그리고, ctrl + c / ctrl + v
아이폰 사파리 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;
}
}
소스 코드 영역을 더블클릭 하시면, 코드가 전체 선택 됩니다. 그리고, ctrl + c / ctrl + v
사파리 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;
}
소스 코드 영역을 더블클릭 하시면, 코드가 전체 선택 됩니다. 그리고, ctrl + c / ctrl + v
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;
);}
}
소스 코드 영역을 더블클릭 하시면, 코드가 전체 선택 됩니다. 그리고, ctrl + c / ctrl + v
Safari 7.1+
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
소스 코드 영역을 더블클릭 하시면, 코드가 전체 선택 됩니다. 그리고, ctrl + c / ctrl + v
사파리 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;
}
}}
소스 코드 영역을 더블클릭 하시면, 코드가 전체 선택 됩니다. 그리고, ctrl + c / ctrl + v
사용방법은 CSS 클래스로 적용하고, 위의 hack 을 style 에 추가해주시면 됩니다.This text will be Blue in Safari
via stackoverflow (thanks to Jeff Clayton)
'디자인' 카테고리의 다른 글
| 코드 하이라이트 syntaxhighlighter 부트스트랩 첫라인 공백 버그 해결.CSS (0) | 2016.07.08 |
|---|---|
| 아이폰에서 iframe 페이지 스크롤 되게 하려면?.CSS (0) | 2016.07.07 |
| 사파리 브라우저, 아이폰 iOS CSS 핵 정리.css (2) | 2016.07.06 |
| Samsung 갤럭시 S6 포토샵 목업.PSD (0) | 2016.07.05 |
| 빈티지한 영문 손글씨 무료폰트 Fibre.font (0) | 2016.07.04 |
훔...아이패드와 아이폰의 사파리에만 적용되는 핵을 하고싶은데 안되네요
몇개 넣어봤는데ㅠㅠ
6.1+ 가 6.1 이상의 모든 버전에 적용되는 핵이 아닌가요??