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 을 사용하는 것은 매우 위험한 일이다.