2008년 8월 11일 월요일

CSS Expression 사용을 피해라

from : High Performance Web Sites

웹개발을 하다 보면 종종 CSS expression 을 쓰는 경우가 생긴다.  이를테면

P {
  width : expression ( setCntr(), document.body.clientWidth<600 ? "600px" : "auto" );
  min-width: 600px;
  border: 1px solid;
}

와 같은 CSS expression 이 있다고 하자.

High Performance Web Sites 의 저자인 Steve Souders 의 사이트 http://stevesouders.com/hpws/expression-counter.php 를 실행해 보면 알겠지만 마우스를 이동하거나 조금 움직이기만 해도 css expression 이 10번씩 실행되는 것을 알 수 있다. 웹페이지에는 Avoid using CSS expressions 라는 내용의 <P> element가  10개가 있고, 페이지 로딩을 하면 CSS exression 은 40번 실행된다.
심지어 "Don't click here!" 부분의 텍스트 필드를 호기심 삼아 눌러주면 브라우저가 먹통이 되어버려 브라우저를 죽이고 새로 띄워야 한다.

이 문제를 피하기 위해서는 두가지 방법이 존재하는데

1. CSS Expression 이 한번만 동작되도록 하는 방법과
2. CSS Expression 대신에 이벤트 핸들링을 이용하는 방법

이 있다.

첫번째 방법은 다음과 같은 식으로 이용할 수 있다.

<style>
P {
  background-color: expression( altBgcolor(this) );
}
</style>

<script>
function altBgcolor(elem) {
   elem.style.backgroundColor = (new Date()).getHours()%2 ? "#F08A00" : "#B8D4FF";
}
</script>

두번째 이벤트 핸들링을 이용하는 방법은 CSS expression 이 브라우저의 이벤트와 자동으로 연결된다는 장점이자 단점을 해결하기 위한 방법으로, 관련없는 이벤트에도 CSS expression 이 실행되는 것을 막을 수 있다.

function setMinWidth(){
   setCntr();
   var aElements = document.getelementsByTagName("p");
   for ( var i = 0; i < aElements.length; i++ ) {
      aElements[i].runtimeStyle.width= ( document.body.clientWidth<600 ? "600px" : "auto" );
   }
}

if ( -1 != navigator.userAgent.indexOf("MSIE") ) {
   window.onresize = setMinWidth;
}

Chapter 7의 결론 : CSS Expression 과 그 영향을 명확하게 이해하지 못한 채 CSS Expression 을 사용하는 것은 매우 위험한 일이다.

댓글 4개:

  1. 흠, CSS에 저런 평가식이 가능하다니;;; 전혀 몰랐네요. ㄷㄷㄷ

    답글삭제
  2. 우울한딱따구리2008년 8월 11일 오후 10:16

    @오스카 - 2008/08/12 10:34
    저도 CSS 지식이 짧은편이라 저렇게 쓴 기억은 거의 없네요 ㅋ

    답글삭제
  3. css expression도 처음 보지만.. High Performance Web Sites 책 정보 잘 얻어 갑니다. ㅎㅎ

    ui 개발이 넘 싫어서 gwt로 어떻게 비벼볼까 생각만 하고 있지요~;

    답글삭제
  4. 우울한딱따구리2008년 8월 12일 오후 6:53

    @rath - 2008/08/13 05:58
    결과물 XML만 만들어 주거나 request 에 쇽쇽 넣어주면 view 쪽은 웹디자이너들이 알아서 처리해주는 멋진 회사는 없을까요? 아니면 전문 웹코더가 처리해줘도 좋고...



    MVC를 한다고 한들 막상 view 를 처리하는 주체가 디자이너가 다 할수도 없고 웹코더가 다 할수도 없고 그런 상황이 자주 발생해서 ㅎㅎ

    답글삭제

가장 많이 본 글