IE Conditional Comments 필터링

W3C의 규격에 의거하여 CSS 코드를 작성하더라도, 각각의 웹 브라우저마다 웹 페이지가 다르게 출력되는 문제가 있습니다. 이러한 문제는 브라우저들이 CSS 규격을 조금씩 서로 다르게 해석하고 출력할 뿐더러, 몇몇 규격은 전혀 출력하지 못하기 때문에 발생합니다.

이처럼 브라우저가 CSS를 W3C 규격과 다르게 출력하거나, 전혀 출력하지 못하는 문제를 CSS 출력 버그(CSS Rendering Bug)라고 합니다. CSS 출력 버그는 표준을 준수하여 웹 페이지를 제작할 때 가장 큰 걸림돌이 됩니다. W3C 규격 외에도 각각의 웹 브라우저들의 CSS 출력 현황에 대해서도 이해해야 하며, 이러한 버그들을 잡는 방법까지 파악해야 하기 때문입니다.

IE7, FF1~2, Opera9, Safari처럼 최근에 출시된(morden) 웹 브라우저들은 W3C 규격에 맞춰서 CSS를 출력합니다. 문제는 IE6, NN7 이하의 오래된 브라우저들이죠. 특히 높은 브라우저 시장 점유율을 기록중인 IE6 브라우저의 CSS 출력 버그들이 큰 문제입니다.

이러한 CSS 출력 버그들을 CSS Hack과 Filtering으로 대처할 수 있습니다. 예전에는 CSS Hack을 많이 사용했으나, IE7이 출시된 이후로는 CSS Filtering을 주로 사용합니다. 특히 사용이 간단하고 MS에서 추천하는 방법인 IE Conditional Comments Filtering(IE CC-필터링)을 가장 많이 사용합니다.

IE CC-필터링 소개

IE Conditional Comments은 MS에서 제시한 방법으로 MS IE5 이상의 브라우저에서 사용할 수 있습니다. 이 방법을 이용하면 IE 버전에 따라 HTML 코드를 숨기거나 보일 수 있습니다. 사용자의 IE 버전 별 조건(Condition)을 HTML의 주석(comments)의 구조로 필터링하는 방법기에 IE-CC 필터링이라고 하며, 간단하게 IE-CCF라고 합니다.

아래의 코드를 이용하면 ie7only.css를 IE7에서만 사용할 수 있습니다.

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7only.css">
<![endif]-->

IE CC-필터링을 사용하는 이유

IE6 이하의 브라우저는 CSS 선택자(selector)에 접근하지 못하는 문제가 있습니다. 이 점을 이용해서 IE6 이하의 브라우저에 특정한 CSS를 추가하거나 숨기는 방법이 바로 CSS Hack입니다. 하지만 CSS2 규격에 정의된 대부분의 선택자를 이용할 수 있는 IE7이 출시되면서, 기존에 사용해왔던 대부분의 CSS Hack들 사용할 수 없게 됐습니다. 이 때문에 최근엔 대부분 웹 개발자와 디자이너들이 브라우저의 CSS 출력 버그를 대처하기 위해서 CSS Filer를 사용합니다.

물론, IE CC-필터링은 HTML에 문법에 맞지 않고 불필요한 코드를 추가하는 문제점이 있습니다. 이에 어떤 개발자는 JS를 이용해서 브라우저의 종류와 버전을 판별하는 방법을 이용하기도 합니다. 하지만 JS를 이용한 방법은 IE CC-필터링보다 코드가 길고 복잡할 뿐더러, DOM으로 접근하기엔 브라우저 파싱 순서가 늦어서 출력되는데 문제가 발생합니다. 즉, CSS 출력 버그를 처리하는데 IE CC-필터링이 최선은 아니지만, 현재로써 가장 확실한 차선책입니다.

IE CC-필터링 사용법

IE Conditional Comments은 HTML 주석 구조에, IE의 조건문을 포함합니다. IE 조건문은 IE의 버전과 상하관계, 부정조건 등을 사용할 수 있습니다.

<!--[if 조건]>HTML 코드<![endif]-->

조건문에 사용할 수 있는 요소

Item Example Comment
IE [if IE] The only currently supported feature is the string "IE", corresponding to Internet Explorer.
value [if IE 7] An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more information, see Version Vectors.
! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or expression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if (IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

IE CC-필터링 예제

IE7일 경우 ie7only.css를 사용

<!--[if IE 7]>
  <link rel="stylesheet" type="text/css"  href="ie7only.css">
<![endif]-->

IE이 아닐 경우 non-IE.css를 사용

<![if !IE]>
  <link rel="stylesheet" type="text/css"  href="non-ie.css">
<![endif]>

IE7 이하일 경우 ieOld.css를 사용

<!--[if lt IE7]>
  <link rel="stylesheet" type="text/css" href="ieOld.css">
<![endif]-->

IE일 경우 IE.js를 사용하고, IE7 이하일 경우 IE-old.css를 사용

<![if IE]>
	<script type="text/JavaScript" src="http://hooney.net/js/ie.js"></script>
	<!--[if lt IE7]>
		<link rel="stylesheet" type="text/css" href="ie-old.css">
	<![endif]-->
<![endif]-->

위에서 소개한 IE CC-필터링 외에도, 다양한 방법의 필터링 방법이 있습니다. Communis에서 CSS만을 이용하거나, HTML을 함께 이용하거나, 또는 JS를 이용하여 필터링하는 방법을 확인할 수 있습니다.

참고 URI

Internet Exploer 5.5만 사용할 수 있는 환경

올해 초 MS에서 Internet Exploer7 버전이 정식 출시되면서, 파이어폭스2, 오페라9, 사파리와 함께 2차 브라우저 전쟁의 서막을 올렸습니다. 이번 전쟁은 자사 비표준 확장을 중심으로 진행된 지난 1차 전쟁과 달리 모두 웹표준을 준수하였기에 화면출력에서 차이점은 찾기 힘듭니다. 대신 탭, 빠른검색, 보안 강화, 확장가능 등을 내세운 UI/UX 측면의 전쟁이라고 할 수 있습니다. 이처럼 새로운 브라우저들은 새로운 사용자 경험을 창출하고 이를 혁신시켜주고 있음에도 불구하고, 구식의 브라우저만 사용할 수 밖에 환경도 있습니다.

인터넷 익스플러 5.5

저는 게임방이나 연구실 등 즉흥적으로 서핑을 할 경우에는 10mb 미만의 작은 크기로 설치해서 사용할 수 있는 오페라9 브라우저를 사용하곤 합니다. 문제는 새로운 브라우저를 설치할 수 없는 환경에 처할 때입니다. 제가 지금 블로그에 글을 작성하고 있는 부산의 동아대학교 전산실도 그렇습니다. 이곳의 컴퓨터는 MS 윈도우98을 운영체제로 탑재하고 있으며, Internet Exploer 5.5가 설치되어 있습니다. 그런데 컴퓨터에 새로운 프로그램을 설치할 수 없더군요. 설치까지는 가능하지만, 컴퓨터를 리붓하면 모든 프로그램/데이타가 리셋됩니다.

많은 사람들이 사용하는 공공기관이나 공공장소, 대학 전산실 등의 컴퓨터는 이처럼 프로그램을 설치하고 사용하는데 어려움이 있습니다. 컴퓨터 관리자가 꾸준히 업데이트해주면 좋겠지만, 그렇지 않은 경우가 대부분이죠. 어떤 분들은 “국민 대다수가 얼리어답터인 우리나라에서 무려 7년 전인 2000년에 출시된 IE5를 사용하는 게 말이나 되냐? 사이트 리퍼러나 방문객 UA(User Agent)의 기록들은 모두 검색로봇(search-bot, crawler)이다”라고 섯부른 판단을 하곤 합니다. 하지만 현실은 제 옆에 대학생들 모두 IE5를 사용한다는 점이죠.

웹호환성 관점에서 IE5는 결코 관과할 수 없는 브라우저입니다. 수많은 CSS 랜더링 버그가 있어서, 웹디자인을 하는데 신경 쓸 일이 많기 때문입니다. 최근에 해외나 국내의 포털 사이트들이 IE5에 대한 호환성을 포기하는 상태까지 온 것도 이 때문입니다.

윈도우98 문제가 많습니다. USB 인식도 안되네요. 어떤 환경에서도 접근 가능한 웹을 만드는 것도 중요하지만, 구시대의 유물을 몰아내는 것도 중요한 일입니다. 앞으로 가야할 깅이 먼데, 언제까지 발목만 잡힐 수 없기 때문입니다. 공공기관/장소, 대학을 포함한 교육기관에 배치된 컴퓨터에 대한 업그레이드 또는 업데이트에 신경 좀 썼으면 좋겠습니다.

Virtual PC를 이용한 IE6, IE7 함께 사용하기

현석님의 글에서 Virtual PC를 이용한 IE6, IE7 함께 사용할 수 있다기에 바로 설치해봤습니다. MS가 제공하는 IE가 들어 있는 가상 이미지는 ie6을 구동하기 위해 최소화된 window xp professinal sp2를 OS로 사용하고 있습니다.

파일 다운로드에서 설치, 구동까지 너무 쉽게 되는 것 같더니만, 역시나 문제가 발생하더군요. 바로 한글이 제대로 출력되지 않는 문제가 있더군요. 혹시나 해서 IE 설정에서 글꼴을 확인해보니, 영문을 제외하고는 한글/일본어 글꼴/중국어 글꼴 등 비영어권에서 사용하는 글꼴이 설치되어 있지 않더군요.

Virtual PC를 이용한 IE6

Virtual PC를 첨으로 사용하는지라, 구글신의 도움으로 여러 방법들을 시도했지만 결국 좌절입니다. 아무래도 Virtual PC용 이미지 파일에 한글 폰트를 추가하는 건 쉽지 않아보입니다. MS도 이 VPC 이미지 파일을 2007년 4월 1일부로 파기시킨다니, MS에 한글 폰트(굴림/돋움/바탕/궁서체)를 추가해 달라고 요청하기도 어려울 것 같습니다.

이로써 한글 폰트의 중요성을 다시 한번 깨닫게 됐지만, 결과적으로는 토요일 오전을 쓸 데 없는 짓을 하느라 허비한 것 같네요. 이제 슬슬 아침먹고 24시 2부나 봐야 할듯…

(추가) 한글 폰트를 설치하는 과정을 포함하여, VPC를 통해 IE6를 설치하는 과정 전반을 Nosyu님 글에서 확인하실 수 있습니다.

Internet Explorer 7 한글판 출시 기념 이벤트

기다리고 기다리던 인터넷 익스플러(Internet Explorer : 이하 IE) 7 한글판이 예상보다 훨씬 빨리 출시됐습니다. 제가 IE 7을 그토록 기다렸던 건, 웹 표준을 준수하여 올바르게 화면을 출력해주는 브라우저를 기다렸을 뿐이지, 그이상도 그이하도 아닙니다. 저야 Firefox와 Opera만 있으면 충분하답니다.

하지만 분명한 것은 IE 7 한글판의 출시가 국내 사용자는 물론이며, 웹 개발자 모두에게 여러 이점을 준다는 것 입니다. 탭 브라우정과 RSS, 올바른 CSS 랜더링 등은 향후 국내 웹 판도에 막대한 영향을 줄 것임에 틀림없습니다.

마이크로소프트 Internet Explorer 페이지에서 IE 7를 다운받을 수 있습니다. 기왕이면 아래 이벤트에 참가하셔서 X-box를 노려보세요~ ㅎㅎ

인터넷 익스플러 7 출시

덧. MS의 사용자 인터페이스(User Interface)는 왜 이런식인지.. 이번에도 예외가 아니군요. ㅠ.ㅠ

파이어폭스 세계 브라우저 시장 점유율 13.71%

“IE 게 섰거라”…파이어폭스 시장 점유율 급상승 (출처 : 아이뉴스24). 몇일 전엔 파이어폭스의 다운로드 횟수가 2억번을 넘었다는 기사 내용이 있었는데, 정말 기쁜 소식입니다.

인터넷익스플러가 사람 여럿 바보 만드는구나..

업무 관계로 MSN으로 대화를 나누던 중, 상대가 이미지 버튼에 알트(alt)값을 넣어주라고 요청을 했다. 나는 배경이미지를 사용했기 때문에 알트값을 넣을 수 없을 뿐더러, 알트값을 넣지 않아도 전혀 문제가 없다고 했다.

하지만 상대방은 계속 요구를 했고, 그 이유가 이미지 버튼만으로 링크의 의미를 파악하기 힘들기 때문이라고 한다. 여기에 사용된 이미지 버튼은 아이콘으로만 만들어져 있는데, 크기가 작고 명확하지 않아서 쉽게 그 의미를 파악하기 힘들다.

이미지 버튼이 여러군데에 사용됐기에 수정할 엄두를 못낸 나였지만, 상대방도 막무가내였기 때문에 대화의 합의점은 쉽게 찾을 수 없었다. 대화가 자꾸 겉도는 느낌에 이전 대화 내용을 다시 한번 확인해보니, 알트값을 넣어주라는 목적이 툴팁(tooltip)을 위해서임을 알 수 있었다.

원래 툴팁은 링크를 보충설명하기 위한 것으로, 보통 title 태그로 표현된다. 문제는 빌어먹을 IE(인터넷 익스플러)가 alt 값을 툴팁으로 표현하는 버그가 있는데, 많은 사람들(소위 IT 직군의 웹개발자)이 이를 잘못 알고 있는 점이다.

알트값 좀 넣어주세요. 꼭 넣어줘야 해요… 무슨 텍스트 링크에 알트값인가.. title 태그를 이용한 tooltip이지.. 오늘 나는 완전 바보되버렸다.

Internet Explorer 7 Beta 2 Preview

인터넷 익스플러 7의 2번째 베타버전이 유출됐다. (via JWC 블로그) 윈도우 XP sp2 이상에서만 설치할 수 있는 것으로 알고 있는데, 나는 윈도우2003를 사용함으로 대략 난감..

작년 여름에 IE7 beta1이 유출됐을때(그후 공개 테스트), 일몰님과 지윤님 등 몇몇 CDK(CSS Design Korea 포럼)의 회원분들이 테스트했던 기억이 난다. 이번에도 시간이 좀 지나면 여러 사용기들을 볼 수 있겠지? ㅎㅎ

지난 IE7 beta1 테스트 결과, position is everything에 기록된 수많은 IE 버그들이 전혀 개선되지 못했었다. 그후 MS와 WaSP가 함께 IE7의 개선을 위해 업무 공유를 한다고 했었고, 그후 IE 블로그에서 공식적으로 position is everything의 버그 및 기타 많은 버그들을 수정한다고 밝혔다.

올해부터는 IE6 아하 버전의 CSS랜더링 버그를 위한 대표적 Tantek핵을 사용하지 말라는 경고(via Tantek, Molly)도 있던데, 얼머나, 어떻게 개선됐는지 궁금하다.

IE6은 구식 브라우저라니깐!

오늘 새벽에 쿠키님이 Hooney.net 블로그의 font-family를 지적해줘서 열심히 CSS 수정을 했는데, 내컴퓨터에 깔려 있는 IE 6, FF 1, Opera 8 중에서 유독 IE 6만 다른 브라우저와 다르게 보여주고 있다.

CSS의 font-family에 대한 문법이 틀린 것도 아닌데, IE 6만 제대로 해석하지 못하는 이유를 곰곰히 고민해보다가 IE 6이 구식 부라우저라는 점에서 그 원인을 찾아보기로 했다.

IE 6은 CSS에서 font-family에 굴림, 돋음, 바탕과 같은 한글폰트 외에 숫자나 영문을 표현할 폰트를 따로 설정하는 경우 어이없는 결과를 보여주고 있다.

예를 들어 블로그 본문에 보여지는 영문은 Arial 폰트를 사용하고, 한글은 돋음 폰트를 사용하려면, Arial 폰트가 한글을 지원하지 않기 때문에,

font-family : Arial, 돋움, sans-serif ; 이렇게 설정해서 영문은 Arial이 한글은 돋움이 보여지게 하면된다.

물론, FF 1과 Opera 8에서는 원하는 결과가 나온다. 하지만 IE 6에서는 쌩뚱맞게도 Arial이 한글을 지원하지 않기 때문에 다음으로 나오는 글꼴들을 읽지 않고 웹브라우저에서 설정한 기본 글꼴(내 경우는 굴림)으로만 보여진다. 이런 OTL…

또한, 최근에 업데이트된 FF 1과 Opera 8은 웹브라우저의 기본 폰트를 serif(명조), sans-serif(고딕) 2가지로 각각 설정할 수 있지만, IE6은 기본 폰트를 1가지 밖에 설정할 수 없다. 이러한 IE6은 font-family에 serif나 sans-serif라고 알려줘봤자 읽지 못하는 글꼴은 웹브라우저의 기본 글꼴 1가지만을 따른다. 도대체가 개념이 없어도 너무 없는 브라우저다. ㅜ.ㅜ

굳이 탭브라우징도 안되고, 확장기능도 빈약하며, CSS2 랜더링 버그와 PNG 알파채널을 지원하지 않는 점을 일일이 들지 않더라도 IE는 구식 브라우저다.

현석님 블로그에 가면, 첫페이지에

Use Modern Browser!! Mozilla, FireFox, Opera, Safari

라는 문구를 볼 수 있다. 최근에 업데이트된 웹브라우저의 사용을 권하면서, IE6은 빠져있다.

그렇다. IE 6은 구식이다. 윈도우 XP과 함께 세상의 빛을 봤으니 5년 전에 나온 넘이다. 최신과 유행에 민감한 한국인들의 거의 99%가 이런 구식 웹브라우저를 사용하고 있는지 의문일 뿐이다.

주변 친구들만 봐도 핸드폰의 교체주기는 2년은 커녕 1년도 되지 않을 정도로 짧지 않은가?

다른 브라우저를 사용하기 전까진 IE 6의 불편함을 몰랐지만, 요즘은 IE 6으로 웹서핑을 해본 기억이 잘 안난다. 이 불편한 웹브라우저를 지난 몇년 동안 사용했다는 게 웃길 뿐이다.

아.. 웹브라우저의 업그레이드 주기가 짧아질 방법은 없을까?
핸드폰의 교체 주기는 언론이나 방송에 비춰지는 광고보단 주변의 얼리어답터(돈 많은 친구 -_-;;)들의 간접 광고에 영향을 많이 받지만, 웹브라우저는 IT 종사자나 리더들의 권유나 홍보활동에 거의 영향을 받지 않는 것 같다.

그래도 일단은 최근 브라우저로 업데이트할 것을 권하는 배너나 만들어 블로그에 붙여야 겠다. :)

IE7 beta 1이 지원하는 내용 일부 공개

인터넷익스플러 7 올해 여름에 출시될 예정인 인터넷익스플러 v7 베타 버전에서 지원될 내용들의 일부가 공개됐네요.

어제 날자로 올라온 The Microsoft Internet Explorer Weblog의 글에 의하면, PNG 파일의 알파채널을 지원하며 positioniseverything.net 에 소개된 IE CSS 랜더링 버그들의 일부가 수정될 것으로 보입니다.

PNG 알파채널 지원을 통하여 웹디자이너들은 더욱 다양한 기술로 페이지를 장식할 수 있을 것입니다. 또한 더욱 견고해질 IE의 CSS 지원은 기존에 사용되던 CSS HACK을 사용하지 않고 규정에 의한 코딩이 가능하게 하여, CSS 접근이 더욱 쉬워질 것이며, 결과적으로 CSS 기반 웹페이지의 개발이 가속화될 것입니다.

무척 기뻐할 일입니다. IE 공식 블로그에는 답글을 통하여 많은 웹디자이너가 환호하고 있네요.

윈도우 XP 서비스팩2의 환경에서만 인터넷익스플러7이 구동된다는 사실이 아쉬울 뿐입니다. ㅜ.ㅜ


Be Friend~! Be Friend~!