일전에 IE11 border-radus 와 배경이미지를 함께 사용하면 이미지가 흐릿해지는 현상을 질문한적이 있었습니다.

 

border-radus 와 backround 두개를 분리해서 사용해봤지만 이 두개가 겹치면 IE11에서는 이미지가 흐릿해져서 그냥 border-radius 효과를 빼려고 하다가

 

우연히

 

-webkit-border-radius

 

라는 것을 사용해 봤더니 크롬에서는 라운드처리가 되고 나머지 IE11 같은 곳에서는 직사각형으로 나와 이미지 흐릿한 현상이 사라지던군요.

 

뭐 IE11 에서 border-radius 없애서 이미지 또렷하게 보이는 목적은 달성은 했는데 이게 뭔지 궁금하네요 ㅋ

검색을 해봐도 뭔가 잘 모르겠어서요..

 

 

 

  • profile

    크롬에서 원래 사용하던 오픈소스 렌더링 엔진(HTML을 해석해서 화면에 뿌려주는 프로그램) 이름이 webkit입니다. 지금은 webkit을 가지치기해서 blink라는 것을 사용하고 있지만 여전히 webkit이라고 부르는 사람들이 많죠.

     

    -webkit-으로 시작하는 속성을 사용하면 webkit 기반의 브라우저에서만 적용됩니다. 크롬, 사파리, 안드로이드 브라우저 등이 해당되고요, IE나 파이어폭스는 제외됩니다. (파이어폭스는 -moz-를 사용합니다.)

     

    그러나 이런 트릭은 웹표준 속성이 널리 지원되지 않는 상황에서 개발자들이 최신 기술을 미리 시험해 볼 수 있도록 배려하는 것이 목적이기 때문에, 아무 속성에나 사용할 수는 없고 border-radius처럼 일부 브라우저(라고 쓰고 항상 IE라고 읽습니다)가 아직 제대로 지원하지 않는 속성에 한하여 사용을 허락하고 있습니다. 웹표준이 충분히 정착되었다고 판단하면 구글에서 일방적으로 지원을 종료하기도 하니 주의하셔야 해요.

  • profile profile
    아 뭔가 굉장히 알듯 ㅋㅋ 크롬에서 출발한거군요. 언젠가 의도치 않게 디자인이 바뀐다면 이것 수정하면 되겠네요 ㅋ 늘 IE가 말썽입니다 ㅋㅋ IE11 때문에 그냥 검색박스를 깍두기로 만들려다가 우연히 이렇게 했네요.
  • profile
    https://css-tricks.com/almanac/properties/b/border-radius/
  • profile

    기진곰님께서 잘 설명해 주셨네요.
    추가로
    ...
    -webkit-border-radius : 사파리, 크롬
    -moz-border-radius : 파이어폭스
    -o-border-radius : 오페라
    -ms-border-radius : 인터넷 익스플로러
    border-radius : CSS3 표준 속성

    이런 식으로 브라우저 별로 있고, 벤더프리픽스라고 부르기도 합니다.

  • profile
    사실 웹킷의 역사는 구글보다 애플에 더 연관성이 있습니다. 
    기술적인 부분은 아니지만 웹킷의 역사에 대해 잘 쓴 글이 있길래 링크를 남겨두니, 심심하면 읽어보시길 ㅎ
    http://huns.me/development/1478