2008년 9월 17일 수요일

Gecko와 Webkit의 CSS Transform 테스트

Gecko 엔진에서도 CSS Transform 기능이 추가되었다는 소식을 듣고 테스트해보았다. 특히 나는 CSS에서 left: 50% + 20px;과 같은 다른 단위끼리의 간단한 사칙연산을 지원해주었으면 하는 생각을 가지고 있었고, left 속성과 transform 중 linear traslation을 조합하면 해당 기능을 구현할 수 있으리란 생각이 들었기 때문이다.

직접 간단한 예제를 만들어 테스트해본 결과 예상대로 제대로 동작함을 확인할 수 있었다. 오오 ㅠ_ㅠb

Gecko와 Webkit의 CSS Transform 테스트


일단 transform 속성 중 위치를 변경시키는 translate 자체는 거의 100% 호환되는 듯하나, 불행히도(?) rotate시킬 때 어느 점을 기준으로 하는지는 약간 차이가 있는 것 같다.

실제 테스트 페이지도 따로 볼 수 있도록 만들었다. 여기 클릭.

IE에서도 DXImageTransform.Microsoft.Matrix 필터를 이용해 이런 transform이 가능하기는 한데, 직접 해보니 rotation의 경우 원래 블록이 차지하던 영역 밖으로 벗어나는 부분이 그대로 짤려버려서 매우 보기 흉하고, 특히 직접 회전변환 행렬을 계산해서 넣어줘야 한다는 점이 개발자 입장에서 매우 불편하다.

사실상 두 엔진의 transform 속성이 거의 똑같은 문법으로 동작하는만큼 이 기능이 CSS3 표준에 포함되었으면 좋겠다.

댓글 2개:

  1. CSS3에 멀티백그라운드나 텍스트쉐도우와 같은 좋은 기능들이 있음에도 제대로 활용하지 못하는게 아쉽게 느껴져요. SVG에 대한 지원문제도 그렇고... 뭔가 기술은 필요로 하는 것들을 만들어 내는데 정작 다른 기술이 가로막는 형국이라.. 씁쓸할 때가 많아요;

    답글삭제
  2. @봄눈 - 2008/09/18 16:21
    사실 그 다른 기술이라는 게 99% IE라는 거...ㅠ_ㅠ

    답글삭제