| View | Upload your own

IE6의 역사

• Windows와 함께 버전 업.
• Windows 98과 함께 IE5가 거의 쓰이지 않게 됨.
• Windows XP가 쓰이지 않게 되는 시점에 IE6에 대한 지원을 없애게 될 것
• Windows 7의 기본 탑재 브라우저에 귀추가 주목됨

웹 표준의 현재

• 최신 브라우저들에 비해 IE6은 웹 표준의 구현 정도가 상당히 뒤쳐짐.
  • CSS 2.1 지원 부족
  • CSS 3 지원 거의 없음
  • DOM 2, 3 지원 부족
  • HTML 4.01 일부 지원하지 못함(abbr 등)

산 넘어 산, IE7

• 최신 브라우저들에 비해 부족하지만 IE6보다는 나은 IE7
• IE6이 거의 쓰이지 않았을 때 지원해야 할 최고(最古) 브라우저
• Windows Vista에 기본 탑재

우아한 성능저하

• 최신 웹 표준 기술은 현재 자바스크립트로 구현 가능한 것들을 더 짧은 코드로 가볍게 지원할 수 있다.
• 이런 기술들을 지원하지 않는 구 브라우저(IE6, 7 등)는 정보를 얻는데는 불편함이 없지만 디자인은 일부 요소가 표현되지 않는 우아한 성능저하를 도입할 수 있다.
• 전체 사용자들의 사이트 이용비용을 계산했을 때 최소가 되도록 고려.
• IE6 사용자가 과반수인 현재는 아직 무리
• 우리나라 웹 업계의 인식 전환 필요

끊임없는 웹 표준 기술의 발전

• IE6, IE7은 지원하지 않는 SVG, CSS3, HTML5
• 웹 제작자들은 현재 실제로 적용하는 웹 표준 기술 이외에 새로운 기술들을 미리 익혀 시장 변화에 대비해야 한다.

웹 표현 기술의 다음, CSS3

• Firefox, Opera, Safari 등이 점점 지원의 폭을 넓혀가고 있는 CSS3
• 모듈이 세부화되어 W3C에서 표준화를 계속하여 진행중이다.
• IE8은 아직 지원 부족

CSS3, 뭐가 좋을까?

• 표현을 위한 마크업을 걷어낼 수 있다.
• 자바스크립트 등의 외부기술에 의존하지 않은 자체 표현(Native expression) 가능
• RIA의 무분별한 이용 감소

IE6은 아직 살아있지만…

• 곧 시장에서 사라지게 될 것
• IE6에서 사용할 수 없었지만 IE7 등의 브라우저에서는 사용할 수 있는 기술들에 대한 선학습 필요

파이어폭스 3.1의 CSS 지원

2008년 안에 출시될 것으로 알려진 파이어폭스 3.1은 앞서 언급한 CSS 지원의 아쉬움을 많이 해결해줄 것임을 약속하고 있다. 모질라의 Platform/Post1.9Planning 문서를 보면 파이어폭스 3.1에서 새로 지원할 웹 표준 기술들 – 문서 내 1.9.next – 에 대해 정리되어 있는데 아쉬웠던 것들 중 상당수에 대해 지원할 것임을 명시하고 있다.

Downloadable Web Fonts (@font-face)

드디어 파이어폭스에도 웹 폰트를 사용할 수 있게 된다. 웹 폰트 지원을 제일 먼저 주장했던 오페라는 아직도 소식이 없는 게 이상하지만, 10에는 추가되지 않을까? 드디어 IE에는 EOT, 나머지에는 TTF로 쓸 데 없는 img 요소를 제거할 날이 온 걸까? IE의 알리아싱 관련 문제가 걸림돌이겠지만…

text-shadow

text-shadow는 웹 폰트 없이 우리나라의 웹 사이트들에는 별로 유용한 속성은 아니지만… 지금은 사용할 수 없겠지만… – IE, IE, IE…!! 아무튼 IE만 남게 되었다. – 난 이게 큰 의미를 가진다고 생각한다.

@media queries

자바스크립트 없이 CSS가 사용자들을 조금 더 구체적으로 파악할 수 있게 해주는 @media queries도 이제 IE만 남았다.

그 다음, 파이어폭스 4는?

파이어폭스 4 – 모질라 2 – 에는 Webkit이 제안한 CSS Animations and Transition, calculated values가 예고되고 있다. 현재 자바스크립트와 DOM이 복잡하게 지지고 볶고 있는 RIA 어플리케이션이 좀 더 간단해지고 완성도 높아지고 고품격이 될 수 있다는 것이다!!

그 밖에…

HTML5의 audio와 video 요소, SVG fonts - background-image에 사용될 수 있어야 크게 와닿을 것이라고 생각되는데 그게 빠졌다! – 등 많은 유용한 향상이 예고되고 있다. Multiple Backgrounds의 언급이 없는 것은 꽤나 아쉬운 부분이지만…

참고 문서

• Platform/Post1.9Planning – MozillaWiki
• David Baron’s weblog: Some new CSS features in Firefox 3
• New features in Firefox 3.1 & beyond
• Mozilla to release Firefox 3.1 this year

Web Fonts

간략한 배경

웹 폰트는 상당히 오래된 기술입니다. 브라우저 전쟁 시절 IE와 넷스케이프가 각자의 독자적인 기술로 사용했고 IE에는 그 때의 웹 폰트가 아직도 남아있습니다. 그런 과정에서 MS는 웹 폰트에 대한 표준 제정을 제안했고 현재 CSS3의 한 부분이 되었습니다.

진행상황

오페라의 CTO인 Håkon Wium Lie가 A List Apart에 기고한 CSS @ Ten: The Next Big Thing이 웹 브라우저에서의 웹 폰트 지원과 그 필요성에 대해 설명하였고 현재 사파리 3.1 버전이 이를 지원하고 있습니다. 오페라는 아직 지원하지 않습니다만, 정황 상 곧 지원하겠죠?

파이어폭스의 경우 버그질라의 글을 통해 지켜보고 있습니다만, 파이어폭스3의 일정에는 웹 폰트의 지원이 빠져있습니다. 그러나 브레인 스토밍에 언급된 것은 고무적인 일이고 곧 추가될 것이라는 기대를 갖게 하는군요.

IE의 경우 현재 출시된 IE8 베타에서도 Embedded OpenType만을 지원하고 있습니다. 늘 그렇듯 앞으로의 판도를 예상할 수 있는 정보를 찾을 수 없었죠.

몇 개의 테스트

CSS @ Ten: The Next Big Thing에서 쓰인 예제 중 한 개를 사파리 3.1을 통해 보았습니다. 트루타입 폰트를 사용한 예제입니다. 그리고 해당 트루타입 폰트들을 Embedded OpenType으로 변환 후 IE에서 실험해보았습니다.

제법 비슷합니다. 하지만 다릅니다.

다음으로 HY견명조라는 한글 폰트를 본 블로그에 포함시켜서 테스트 해보았습니다. IE에서는 위와 마찬가지로 변환 후 테스트 하였습니다.

XP와 비스타의 윈도우의 폰트 렌더링 기술인 클리어 타입을 적용한 결과입니다. IE에서 사용할 수 없을만큼 투박하게 표시됩니다. 운영체제의 문제라고 생각됩니다만 결론은 비스타의 IE에서도 웹 폰트용으로 특수하게 가공되지 않은 폰트들은 사용할 수 없다는 것입니다. 그다지 좋은 결과는 아니군요. 제가 폰트에 관한 지식이 부족한 관계로 테스트를 잘못 수행한 것은 아닌지 약간은 염려됩니다. 혹시 그런 부분이 있으면 지적 부탁드립니다.

결론

애석하게도 CSS3의 웹 폰트 모듈은 마지막 업데이트가 6년전(2002년)이었고 아직도 Working Draft 상태입니다. 또한 IE는 Embedded OpenType만을 지원하고 있으며, 폰트의 렌더링 또한 우리가 원하는 모양새가 아닙니다.

오페라 진영의 제안과 사파리의 지원이 있었지만 IE와 파이어폭스에서 매끄럽게 사용할 수 있기 전까지는 마냥 기다릴 수 밖에 없을 것 같습니다.

대안을 통한 조금 나은 결론

True Font Family에서는 웹 폰트 속성을 대체하는 자바스크립트 라이브러리를 제공하고 있습니다. 자세히 살펴보지는 않았지만 웹 폰트가 점점 정착되어 가는 동안 하위 호환성을 보장할 수 있는 대안이 될 수 있을 것 같습니다. 국내에서는 우리글닷컴이 확대·축소 가능한 웹 폰트를 제공하고 있습니다. 윈도우에서 깨져보이지 않도록 가공된 폰트이죠. (싸이월드나 네이버 등에서 사용하는 가독성 떨어지는 고정 사이즈의 비트맵 웹 폰트랑은 많이 다릅니다.)

조만간 마크업에서 텍스트를 미려하게 표현하기 위한 <img> 태그를 곧 거둬낼 수 있지 않을까 하는 기대를 해봅니다.

Multiple Backgrounds

라운딩된 가로와 세로 길이가 유동적인 박스 제작해보신 경험이 있으신가요? 이 박스를 CSS2의 Background 속성만으로 제작하려면 많은 고통이 따릅니다. 예를 들어 어떤 <div> 태그로 마크업한 박스를 앞에 쓴 것과 같이 만들려면 추가로 의미없는 마크업을 잔뜩 집어넣거나 자바스크립트를 사용해야 합니다. – 이 경우에도 자바스크립트가 의미없는 마크업을 집어넣는 것은 마찬가지입니다. 대체로 다음과 같은 형식의 마크업이 필요합니다.

<style type="text/css">
div { background: url("left-top.png") no-repeat left top; }
div div { background: url("right-top.png") no-repeat right top; }
div div div { background: url("left-bottom.png") no-repeat left bottom; }
div div div div { background: url("right-bottom.png") no-repeat right bottom; }
</style>

<div>
    <div>
        <div>
            <div>내용</div>
        </div>
    </div>
</div>

이게 뭡니까? (ㅠㅠ)

Multiple Backgrounds가 지원되면 하나의 <div> 태그만으로도 이것을 지원할 수 있습니다. 아무리 복잡한 박스라도 말이죠. 배경 이미지를 몇 십개도 깔 수 있으니까요(실제로 몇 십개를 만들면 안되겠지만요.;;).

<style type="text/css">
div {
    background:
        url("left-top.png") no-repeat left top,
        url("right-top.png") no-repeat right top,
        url("left-bottom.png") no-repeat left bottom,
        url("right-bottom.png") no-repeat right bottom;
}
</style>

<div>내용</div>

아, 얼마나 간결하고 아름다운 코드입니까?

그럼 현재 브라우저들의 Multiple Backgrounds 지원 현황을 알아볼까요?

IE (인터넷 익스플로러)

IE8의 CSS3 지원은 다른 최신 브라우저들에 비해 상당히 열악합니다. CSS Improvements in Internet Explorer 8에서도, IEBlog에서도 언제 지원하겠다는 내용은 찾을 수 없었습니다.

파이어폭스

파이어폭스 개발의 핵심 인물 중 하나인 David Baron은 Multiple Backgrounds에 관해 다른 견해를 가지고 있는 것 같습니다. 좀 난감하지요.

처음 글 쓸 때에서 상당히 많은 변화가 있었습니다. 결국 David Baron이 Multiple Backgrounds를 지원하기로 결정하였고 현재의 Nightly Build인 3.2pre1에서는 실제로 동작합니다.

오페라

오페라는 아마 곧 Multiple Backgrounds를 지원하리라 생각합니다. 오페라의 개발자 David Storey의 글 Selectors complete, what next?에서 짐작해볼 수 있었습니다.

사파리

이미 지원합니다. 2005년부터요. :D

슬픈 얘기지만 아마도 IE8에 추가되지는 못할 것 같습니다. 파이어폭스의 경우 David Baron의 결정이 나면 바로 추가되지 않을까 하고요. 결국 IE9일까요? IE9라면 4~5년 정도만 삽질하면 되는 걸까요? 하하하;; 그래도 IE9에서라도 추가된다면 3년쯤 후에는 기본적으로 Multiple Backgrounds를 사용하여 마크업을 구성하고 IE8 같은 하위 브라우저를 위해 자바스크립트로 의미없는 마크업을 추가하는 라이브러리를 사용할 수 있겠네요. 이거 뭐 기뻐해야 하는건지 슬퍼해야 하는건지 모르겠습니다.

다음 글에 Web Fonts에 관한 내용이 이어집니다. 기대해주세요. :D

Conditional selector depends on child nodes

ul(a:hover) {property:value;}

Code means select ul element that contains a element with hover statement.

Example

<style type="text/css">
    ul { background-color: #999; }
    ul a:link { color: blue; }
    ul a:hover { color: red; }
    </style>
    
    <ul>
        <li><a href="/products">products</a>
        <li><a href="/store">store</a>
        <li><a href="/products">blog</a>
        <li><a href="/support">support</a>
        <li><a href="/community">community</a>
    </ul>

This code may render like following image.

And I want to change background color of ul element. So how? With javascript? See next code.

<style type="text/css">
    ul { background-color: #999; }
    ul(a:hover) { background-color: yellow; }
    ul a:link { color: blue; }
    ul a:hover { color: red; }
    </style>
    
    <ul>
        <li><a href="/products">products</a>
        <li><a href="/store">store</a>
        <li><a href="/products">blog</a>
        <li><a href="/support">support</a>
        <li><a href="/community">community</a>
    </ul>

This code may render like following image.

Mask (foreground)

Mask is properties like Background property. Background stands behind of contents, but Mask stands front of contents. Mask has 6 properties like Background’s and opacity property.

Mask must not influence on handling of contents. For Example, drag, right click on mouse, and so on.

Mask Properties

mask-color

same with background-color property.

mask-image

same with background-image property.

mask-repeat

same with background-repeat property.

mask-attachment

same with background-attachment property.

mask-position

same with background-position property.

mask

same with background property. But mask property can have mask-opacity property additionally.

mask-opacity

Like opacity property, mask-opacity property set opacity of mask. This doesn’t influence except mask, like contents, child nodes, and so on.

Example

There are one picture and one image for mask.

With the mask image, make decoration for the picture!

<style type="text/css">
    #miya {
        mask-image: url(mask.gif);
        mask-attachment: repeat;
    }
    </style>
    
    <img src="picture.jpg" id="miya" />

This code may render like following image.

Finally, make it better with mask-opacity property.

<style type="text/css">
    #miya {
        mask-image: url(mask.gif);
        mask-attachment: repeat;
        mask-opacity: .3;
    }
    </style>
    
    <img src="picture.jpg" id="miya" />

Follwing image is the final result.

hsize (horizontal size), vsize (vertical size)

New size mechanism of CSS Box Model. width means space except padding, border, margin. But hsize means space except margin but include padding, border.

See the next image.

If I want to set this 2 box with 100% width of browser, hsize property will useful!

<style type="text/css">
    #box1 {
        float: left;
        hsize: 80%;
        padding: 1em;
        border: 1px solid red;
        background-color: gray;
    }
    #box2 {
        float: right;
        hsize: 20%;
        padding: .5em;
        border: 1px solid black;
    }
    </style>
    
    <div id="box1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
    </div>
    <div id="box2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
    </div>

rotation

#test { rotation: 15; margin: 10px; border: solid #000 1px; padding: 10px; }

rotation property rotate element clockwise with given angle (number). margin must not influence on rotation, but padding, border must calculate with rotated element. child nodes of rotated element must positioned depend on rotated statement of parent element.

If rotation property is given, width and height cannot declare with percent.

Unfortunately, when we revised CSS level 2, we discovered that many browsers imposed a limit on what could be centered. In particular, centering something that was wider than its containing block didn’t work. The reason, probably, was that the browsers’ scrollbars were programmed to grow to the right, but never to the left.

요약하자면, 현재 많은 브라우저들이 블럭 요소를 중앙정렬 하는데 제한이 있다는 것입니다. 예를 들어, 어떤 블럭 요소가 그 상위(부모) 블럭 요소보다 넓으면 margin: auto; 는 아무런 동작을 하지 않게 됩니다. 마찬가지로 스크롤바가 오른쪽으로만 늘어나는 브라우저의 특성 상 정확히 사용자의 화면에서 중앙 정렬되어 보이지 않는다는 것입니다. (이런 경우 넓은 자식 요소는 부모 요소와 같은 좌측점을 갖게 됩니다.)

가로 스크롤바가 생겼을 때 margin: auto;를 사용하여 정확히 중앙에 표시되지 않는 예제를 한 번 보세요.

위와 같은 문제를 해결하는 3가지 방안이 제시되었습니다.

• center, auto라는 키워드를 갖는 alignment 속성의 추가
• center, auto, left, right 키워드를 갖는 위와 같은 alignment 속성의 추가
• auto 속성과 비슷하지만 중앙 정렬 문제를 해결하는 any 키워드를 margin 속성에 추가

alignment 속성은 위에 언급한 문제를 해결한 것 – center 키워드 – 으로 기존의 margin: auto; 의 기능과 별도로 구현되며, 2번째 방안인 left, right 키워드는 직관적이지 않았던 margin-left: auto; – 블럭 요소를 우측으로 정렬 – 과 같은 블럭 요소의 정렬도 alignment: left;와 같은 식으로 처리할 수 있도록 하는 속성입니다.

아마도 이 셋 중 하나가 CSS3의 박스 모델에 추가될 것으로 보입니다. 여러분은 셋 중에 어떤 게 나아보이시나요? 저는 2번째 방안이 좋아보이네요. 위의 어떤 방안이든 하위 호환성을 위해 두 개의 중앙정렬 속성을 해결해야 하는데 기왕이면 말끔하게 margin 속성의 정렬 기능을 alignment 속성으로 분리했으면 좋겠네요.

<

p class=”attach-image”> Acid3을 100% 통과한 웹 브라우저의 화면 스크린샷

Ian Hickson has been working hard on the acid3 test. The new test will focus mostly on ECMAScript and Dom through Selectors Level3, Media queries and data URIs. The new acid3 test isn’t quite ready yet but it should become ready within the coming months.

dustin brewer의 Developers are working on ACID3 test이라는 글에 따르면 새로운 Acid3 테스트는 ECMAScript와 DOM3, CSS3의 Media Queries, data URIs에 초점을 둔 것이라고 한다. Acid2 테스트가 나온지 3년 가까이 지난만큼 그 동안 나온 새로운 웹 표준 기술들에 대한 검증의 필요성이 대두되어 Acid3 테스트가 작성중인 듯 하다.

글을 쓰며 IE8의 Acid2 테스트 통과에 환호하는 현실이 조금 씁쓸한 기분이 든다. 하지만 IE 역시 웹 표준을 적극 수용하려는 자세를 보이고 있는 만큼 Acid3 테스트는 Acid2의 그것보다 훨씬 빠르게 웹 브라우저에 반영될 것으로 기대한다.

아래는 재미로 최신 웹 브라우저들의 Acid3 테스트를 해본 결과이다. IE8의 점수가 궁금해진다. Acid3 테스트는 아직 완료된 테스트가 아니므로 참고만 하자.