์‚ฌํŒŒ๋ฆฌ ๋ธŒ๋ผ์šฐ์ €, ์•„์ดํฐ iOS CSS ํ•ต ์ •๋ฆฌ.css

๋งฅ์˜ ์‚ฌํŒŒ๋ฆฌ ๋ธŒ๋ผ์šฐ์ €์™€ ์•„์ดํฐ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; 
  }

}

์•„์ดํฐ ์‚ฌํŒŒ๋ฆฌ 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)