티스토리 뷰

http://fetchak.com/ie-css3/

이게 뭔가요?

IE-CSS3 는 인터넷 익스플로러에서 곧 다가올 CSS3 표준에서 가능한 인기있는 새로운 스타일들의 지원을 제공해줍니다.

동작은

인터넷 익스플로러로 페이지를 보고 있다면, 몇몇 요서들은 스크립트에 의해 벡터 마크업 언어(VML) 내에서 재생성되어 있을겁니다. IE-특화 벡터 그림 언어는 IE가 못하는 둥근 모서리나 블러 효과와 같은 CSS 표현을 제공합니다.

사용법

평소 하던대로 CSS 를 작성하되 새 한 줄을 더하세요:

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

화제와 차선책

아마도 z-index 문제에 봉착하게 될듯한데, especially if embedding one IE-CSS3 enabled element inside of another.두가지의 차선책이 있다 :

  • IE-CSS3 요소를 둘러싸고있는 요소보다 큰 숫자로 z-index 부여.
  • IE-CSS3 요소에 position: relative 또는 position: absolute 같은 위치값 부여.

스타일과 상태

스타일 작동 비작동
border-radius
  • 네 귀퉁이 반경 설정
  • 외곽선
  • 각 귀퉁이 반경 개별 설정
box-shadow
  • 흐림정도
  • 위치값
  • #000 보다 다른 아무 색상이나
text-shadow
  • 흐림정도
  • 위치값
  • 색상

번역 by : darthJun 06-15-2010
주의: 날림 번역이니 영어 전문가는 원문을 보시기 바람.
댓글