밤하늘의 실제별, 나도 가질 수 있다?!


Expression.
인터넷 익스플로러(IE6,7)에서만 사용할 수 있는 CSS 표현입니다.
말도 많고 탈도 많은 녀석이죠.

자바스크립트가 최소단위인 천분의 일초로 작동을 한다면
이녀석은 수천분의 일초 아니 거의 만분의 일초까지도 되는 것 처럼 작동을 합니다.
(직접 세어보지는 않았습니다. 그냥 느낌이에요 느낌상-_-;)
예를 들어,
IE6에서는 표현이 불가능한 postion: fixed 속성을 expression으로 표현하면
스크롤을 겁나 빨리 내리고 올려도 울렁거림 없이 거의 완벽한 동작을 보여줍니다.

어떠한 동작(이벤트)이든 일어나는대로
이 수천분의 일초 간격으로 계속 대기하고 읽어들이고 값을 던져주고 있다는 겁니다.
그래서 브라우저에 부담을 주고 심지어는 브라우저를 멈추거나 셧다운-_- 시켜버린다는
무시무시한 소문을 안고 다니는 녀석이죠.

그래도 IE6에서는 지원되지 않는 수많은 CSS 속성을
expression을 사용하여 자바스크립트 언어로 표현이 가능한
엄청난 강점을 갖고 있어서 외면하려고 해도 가끔은 생각이납니다.-_-;

대략 2년 전인가요.
야후에서 근무하는 어떤 멋진(wow) 분이- (지금은 구글 olleh!)
expression의 살인적인 아니 살브라우저적인 호출을  상당히 줄여줄 수 있는 방법을 제시했습니다.


저 페이지를 처음 보았을 당시 전 이제 막 웹표준의 웹을 시작하고 있었던 터라
"음. 이런게 있군- expression 무서운 녀석." 이라고 그냥 넘기고 말았는데요.

오늘 max-height 때문에 expression을 써야하나 고민을 잠깐 하다가
max-height 같은 경우는 position: fixed 처럼 계속해서 읽어드릴 필요가 없이
페이지 열릴때 한번만 잡아주면 되거든요.
정말로 작동을 하는지, 진짜 차이가 있는건지 궁금해서 테스트 페이지를 한번 만들어 보았습니다.


예제 파일 : http://mkyoon.tomeii.com/expression.html (IE6, 7에서 보셔야 합니다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>One-Time Expressions</title>
<style type="text/css">
.onetime {
width: 200px;
padding: 10px;
border: 2px solid #666;
overflow: hidden;
/* 생각없이 쓴 expression */
height: expression( setCntr(), this.scrollHeight > 99 ? "100px" : "auto" );
/* 멋진 아저씨가 추천한 방법 */
/*height: expression(
setCntr(),
new Function('el', 'el.style.height = el.scrollHeight > 99 ? "100px" : "auto";')(this)
);*/
}
</style>
<script type="text/javascript">
//<![CDATA[
var gnExpr = 0;
var gCntrDisplay;
var gbOn = true;

function setCntr() {
gnExpr++;

if ( gbOn ) {
displayCntr();
}

return true;
}

function displayCntr() {
if ( ! gCntrDisplay ) {
gCntrDisplay = document.getElementById("cntrdisp");
}

if ( gCntrDisplay ) {
gCntrDisplay.value = gnExpr;
}
}

function setDisplay(bOn) {
gbOn = bOn;
}

//]]>
</script>
</head>
<body>
<input type="text" size="10" id="cntrdisp" disabled="disabled"/>
<div class="onetime">
(마우스를 움직여보세요.)
우리는 달려간다 이상한 나라로 니나가 잡혀있는 마왕의 소굴로
어른들은 모르는 사차원세계 날쌔고 용감한 폴이 여깄다
마술차 마술봉 딱부리 삐삐 찌찌 힘을 모으자 대마왕 손아귀에 니나를 구해내자
띠이빠빠 띠이빠빠 달려간다 삐삐
</div>
<p>출처 : http://stevesouders.com/hpws/onetime-expressions.php</p>
</body>
</html>

'생각없이 쓴 expression' 부분과
주석처리된 '멋진 아저씨가 추천한 방법'
주석부분을 바꿔서 열어보시면 차이를 바로 알 수 있습니다.
(정말로 딱 1개만 찍히네요. 오우 신기.)


결론 : expression 한번만 실행시키기.
CSSproperty: expression(
new Function('el', 'el.style.CSSproperty = 어쩌구 저쩌구 계산식')(this)
);



하지만 이방법도 완전한 해결책은 아니라고 하네요~
expression 자체가 위험하긴 하나봅니다. IE8에서도 내다버린 녀석이니까요.

Posted by mkyoon

2009/09/04 00:06 2009/09/04 00:06
, , , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/130

Trackback URL : http://mkyoon.com/trackback/130

Leave a comment

http://www.savethedeveopers.org


이곳. 기억하시는지요~
(지금은 아예 Microsoft Internet Explorer 페이지로 redirecting 해놓았네요.)
한국어 버전이 있었습니다 ㅠㅠ감격


http://resistan.com/savethedeveloper

개발자 좀 살려주세요 제발!

브라우저 업그레이드가 한 사람을 살립니다.



처절하지 않습니까.
살려주세요 ㅠㅅㅠ

Posted by mkyoon

2008/12/09 19:49 2008/12/09 19:49
, , , ,
Response
No Trackback , 6 Comments
RSS :
http://mkyoon.com/rss/response/112

Trackback URL : http://mkyoon.com/trackback/112

Comments List

  1. 별이 2008/12/10 09:52 # M/D Reply Permalink

    저도 업글하고 싶긴 한데요...
    PC먼저 업글 하고 해야 할꺼같아요.
    사실 파폭이나 IE7은 느려서요.(정말 느낌이지만 드립니다. 특히 노트북에서는 사용할 수 없죠.)
    오페라는 못보는곳이 너무 많고......
    사용자보다 회사들이 먼저 앞장서야 바뀔거 같은데.... (언제쯤?)

    1. mkyoon 2008/12/10 16:42 # M/D Permalink

      맞아요~ 네이버에 ie7로 검색하면 바로
      "다시 ie6으로 돌아가는 방법을 알려주세요"
      라는 글이 많으니까요.

      회사측에서도 90%가 ie를 쓰고
      웹을 이용하는데에도 아무런 불편함이 없으니
      필요성을 못느끼는 거겠죠ㅠㅠ?

      정말 대체 언제쯤 ㅋㅋ 별이님 말대로 10년 후가 될까요 ㅋㅋ

  2. 별이 2008/12/10 17:22 # M/D Reply Permalink

    헉;; 제가 10년 후라고 했었나요???? XP만 사라지면 같이 사라지는데요 ㅎ
    음 윈도우 98이 사라지는데... 걸린시간보다는 더 걸릴꺼 같긴해요 ㅋㅋ

    1. mkyoon 2008/12/11 15:55 # M/D Permalink

      앗! 10년이 아니었나요;;
      윈도우98 예를 들면서 말씀하신 기억 때문인지
      10년이라고 잘못 기억하고 있었나봐요 ㅋㅋ
      사실 98 지원은 2006년도 즈음에 중단된거 맞죠>_<? 이런 몹쓸 기억력 ㅋㅋ

  3. 스페시얼 2008/12/11 01:07 # M/D Reply Permalink

    아~ 왠지 눈물날라그래~~ ㅋㅋㅋ;;

    이글보자마자 파이어폭스 설치들어갔다 ㅋㅋ;;

    1. mkyoon 2008/12/11 15:56 # M/D Permalink

      ㅋㅋㅋㅋ
      사파리는 윈도우에서 좀 글코;
      오페라 한번 깔아봐~ 속도감 최고야 ㅋㅋ

Leave a comment

min-height 속성을 IE6 에 주는 방법에서도 언급했듯이
IE6 은 max, min 개념이 없기 때문에 Hack을 써서 넣어주어야 한다. (IE6 *\#&*$@)

어떠한 이미지의 너비를 최대 500px 이상으로 넘어가지 않도록 하기 위해서는
IE6 을 제외한 모든 브라우저에서

 #somewhere img { 
max-width: 500px;
}

라고 "한줄" 넣으면 끝난다.

그러나 우리의 구닥다리 IE6 은
저 속성을 읽지 못하고 img 너비를 있는 그대로 뿌려준다-_-

IE6 에만 적용해야 할 Hack은 다음과 같다.

 #somewhere img {
width: expression( this.clientWidth > 499 ? "500px" : "auto" );
}

expression 으로 IE6 만의 자바스크립트를 작성할 수 있으니 good.
expression 이녀석은 상상을 초월할 만큼 IE6 브라우저를 힘들게 하는 것 같다.
하지만 어쩔 수 없이 꼼수를 써야 한다는 거~ 슬픈 현실ㅠㅠ


덧 : One-Time Expression 한번만 실행시키자 http://mkyoon.com/130

Posted by mkyoon

2007/12/11 13:12 2007/12/11 13:12
, , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/80

Trackback URL : http://mkyoon.com/trackback/80

Leave a comment

투명처리된 PNG 파일은 IE 6 에서 회색 바탕으로 나옵니다.
이를 해결하기 위해 PNG를 배경그림으로 넣고
AlphaImageLoader 필터를 씌우는데요.

특수한 경우
필터 먹은 DIV 안에 있는 링크를 아무리 눌러도
클릭이 되지 않는 현상이 생깁니다. (언제나 이상한 IE.)

필터먹인 DIV에
position: relative, absolute 설정을 주면
안에 있는 링크는 무용지물이 되고 맙니다.

해결방법

1. 필터 먹인 DIV에는 position 설정이 없거나 position: static;

2. 그 안에 들어있는 링크(a)에 relative 혹은 absolute 를 주세요.

끗.

Posted by mkyoon

2007/12/03 14:34 2007/12/03 14:34
, , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/79

Trackback URL : http://mkyoon.com/trackback/79

Leave a comment

[ float left ]  [ absolute ]  [ float right ]

요렇게 나란히 DIV 형제가 세개 있는데
IE6 에서만 absolute 가 사라져버리는 현상입니다.
(IE Developer Toolbar 로 찍어봐도 나오지 않습니다)

absolute DIV 를 float left, right 뒤에 놓고
clear: both; 를 주세요.

그럼 나옵니다.
float 사이에 absolute 는 껴두지 않는것이 상책이겠죠.-_-;

하하하 IE6 너 정말 신기하구나~

Posted by mkyoon

2007/11/27 11:13 2007/11/27 11:13
, , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/78

Trackback URL : http://mkyoon.com/trackback/78

Leave a comment