각 브라우저별 CSS3 properties의 사용 용법이 서로 다르고, 그래서 모두한테 적용하기가 번거롭다는 점 때문에 CSS3 사용을 주저할 이유가 없어졌다. CSS3 Please TextMate bundle만 설치해놓고, tab trigger만 당기면 너무나 간단할 일이 되어버렸기 때문이다.

snippets은 CSS3, Please! The Cross-Browser CSS3 Rule Generator에서 따온 것으로, 현재 다음과 같은 CSS3 snippets을 제공한다:

• border-radius (borderrad)
• box-shadow (boxshadow)
• rgba (rgba)
• background-gradient (bggradient)
• transition (transition)
• rotate (rotate)
• font-face (fontface)

앞으로, background-gradient에 방향 옵션(linear/radial)을 지정할 수 있는 기능도 추가될 예정.

CSS3 Please!

아무래도, 이렇게 놓고 보면 WebKit 엔진을 사용하고 있는 브라우저들(Safari, Google Chrome)에서 보는 것이 제일 예쁘고 CSS3 지원도 가장 앞서 있음을 알 수 있다. 다른 브라우저들의 지원 상황에도 가속도가 붙길 바라며, CSS3 많이 사용해 주세요!

WebKit에서 먼저 CSS Gradients가 소개된 이후 CSS 3의 Gradients 표준 용법은 아직 Draft 상태이나, 현재 Safari 4, Firefox 3.6, Google Chrome에 바로 적용해서 사용할 수 있다.

따로 이미지를 쓸 필요가 없는 이점에도 불구하고 통일되지 못한 사용법과 IE 미지원으로 아직은 많이 사용되지 않고 있는데, 그나마 CSS3 Gradient Generator가 있어서 적용에는 큰 어려움이 없다.

아래는 이 곳에 적용한 예.

#page {
  background-color: #160B37;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#271362), to(#160B37));
  background-image: -webkit-linear-gradient(top, #271362, #160B37);
  background-image: -moz-linear-gradient(top, #271362, #160B37);
  background-image: -o-linear-gradient(top, #271362, #160B37);
  background-image: -ms-linear-gradient(top, #271362, #160B37);
}

미적용 브라우저들엔 전처럼 그냥 이미지로 대체해주면 될 것이다.

요즘 CSS 작성할 때 점차 그 사용이 늘어나는 vendor specific extensions로 논쟁이 많은데, 어차피 표준 제정이 마무리 되지 않는 한 불편은 계속되겠지만 시도한 만큼의 결과물 만족감은 더 크다.

물론, 이미 TextMate에는 내장된 훌륭한 HTML과 CSS snippets을 사용해서 효율적으로 코딩할 수 있는 여건이 제공되고 있지만, 456 Berea Street의 소개 기사로 알게된 zen-coding은 여기에 엄청난 효율의 상승 효과를 더해준다.

사용 예를 보면 한 눈에 그 막강함을 눈치챌 수 있다.

div#main-menu>ul.menu>li#item-$*5{This is an item $}*5

에디터에서 위 코드를 입력하고 Zen Coding 명령(command+E)을 실행하면 다음과 같은 snippet을 돌려준다.

<div id="main-menu">
  <ul class="menu">
    <li id="item-1">This is an item 1</li>
    <li id="item-2">This is an item 2</li>
    <li id="item-3">This is an item 3</li>
    <li id="item-4">This is an item 4</li>
    <li id="item-5">This is an item 5</li>
  </ul>
</div>

말 그대로, HTML and CSS hi-speed coding 주장에 걸맞는 plugin으로, CSS selectors를 써서 HTML DOM을 효과적으로 생성/코딩할 수 있다는 점은, 과거 Ruby gem plugin으로 유명한 Haml의 장점을 그대로 따와서 바로 HTML과 CSS 파일에 사용할 수 있게 된 것이나 마찮가지다.

현재, Zen Coding은 TextMate 말고도, Aptana, Coda, NetBeans 그리고 Expresso를 지원한다고 나와있으며, 홈 페이지에서 데모용 스크린케스트도 제공하고 있다.

참고로, Zen Coding은 러시아 개발자들이 주축이 되어 개발되고 있기 때문에, HTML Root element에 속해있는 html의 lang 속성을 기본 ru에서 ko로 바꾸어주는 수정이 필요하다. TextMate의 경우, Zen-HTML bundle은 Bundle Editor를 열어서 수정하고, Zen Coding bundle은 번들 패키지 속 /Support/zencoding/settings.py 파일을 열어서 수정해주면 된다.

이제, 이런 코딩 작업 향상이 받쳐줄 만한 좋은 아이디어만 쏟아져 나와주면 좋을 텐데, 역시 어렵군. 😮

디자인에 민감한 사람들의 이야기를 듣다보면 많은 이들이 일반 링크나 대체 이미지로 치장된 링크를 눌렀을 경우 보여지는 링크 둘레의 점선을 없애달라는 요구를 많이 한다. 하지만, 이는 키보드 접근성을 해치는 경우라서, 그대로 놔두거나 적어도 링크 옆으로 삐져 보이는 점선을 없애는 조치 – a {overflow: hidden;} – 만을 권하고 있다.

요 점선의 목을 쥐고 있는 놈이 바로 outline이란 놈인데, 민감한 디자이너와 접근성 우선 옹호자 모두가 만족할 수 있는 문제의 해결 방법이 공개되었다. Opera에 속해 있는 Patrick씨가 future of web design tour 2009에서 행한 키보드 접근성에 관한 프리젠테이션에 있는 내용인데, 핵심은 적절한 상황(키보드 focus를 방해하지 않는 마우스 클릭)에서만 이 outline을 없애서 키보드 접근성을 해치지 않으면서도 링크 선택시 보여지는 점선의 둘레를 없애라는 것이다.

코드로 보면 너무나 간단하다.

a:active { outline: none; }

물론, 여기서 일반 a 태크의 outline property는 건드리지 않는 것이 중요하다.

너무나 단순하지만, 잠시라도 깊이 생각해보질 않아서 이렇게 쉬운 해결책을 그 동안 그냥 지나쳐 버렸던 것일까?
이미지 대체 링크를 마우스나 키보드를 사용해서 선택했을 때 여러 경우의 수를 조합해서 비교해 놓은 실험 페이지에서 최적의 결과를 직접 확인할 수 있다.

마지막으로, Patrick씨 행한 프리젠테이션 슬라이드(pdf)에 나와있는 맺음말을 옮겨놓는다.

if you style :hover, also :focus and :active
don’t suppress outline completely (reintroduce :focus and suppress :active)
leave tabindex alone – source order
JavaScript on hover (mouseover/mouseout) also on focus/blur (if focusable element)
lightboxes and their problems
only attach behaviour to focusable elements

웹 최적화 덕목 중에 Front-End User Interface 단에서 손볼 수 있는 항목에는 대표적으로 HTTP Requests의 수를 줄여주는 것이 있다. 물론, 여기에 CSS Sprite 기술을 써서 여러 배경 이미지들을 하나로 묶어 상당한 양의 서버 부담을 덜어줄 수 있지만, 문제는 그 적용에 만만치 않은 수작업이 필요하다는 것이다.
그래서, 이런 작업에 손을 덜어주는 여러 CSS Sprite Generator들이 존재하지만, 일일이 한데 묶을 수 있는 알맞은 배경 이미지를 찾아내고, 또 실제 적용될 background position을 계산하는 일은 여전히 개발자의 몫.

하지만, SpriteMe 덕분에 이것도 옛말이고 귀찮음 때문에 실제 적용을 미루는 것도 이젠 핑곗거리밖에 안 될 듯.

SpriteMe의 소개와 사용법은 개발자인 Steve Souders씨의 블로그 글에도 잘 설명되어 있는데, SpriteMe bookmarklet을 웹 브라우저 책갈피에 저장해놓고 필요할 때마다 선택해서 쓰면 된다.

SpriteMe가 기존 CSS Sprite Generator들보다 한 단계 더 진화된 놈이라고 부를 수 있는 이유는, 웹 페이지에 사용된 배경 이미지를 자동으로 찾아서 하나의 sprite 이미지로 사용될 수 있는 놈들을 따로 묶어주고, 이렇게 생성된 sprite 이미지를 시험 삼아 현재 웹 페이지에 바로 적용해서 보여준다는 점이다. 덤으로 각 배경 이미지에 적용될 background position도 함께 계산해서 보여주니, 아주 똑똑한 놈이다.

그런데, 사용하면서 한 가지 주의해야 할 것이, 하나의 CSS Sprite 이미지로 추천된 여러 배경 이미지 중에 서로 그 크기가 많이 차이 나는 배경 이미지들이 한데 묶여있을 경우, 나중에 이 배경 이미지들을 sprite 이미지로 묶어 생성하게 되면 그 크기 만큼의 불필요한 공백도 함께 포함되기 때문에 차이가 크게 나는 배경 이미지는 추천된 배경 그림 묶음들에서 drag out해서 끄집어낼 필요가 있다.

덕분에, 또 간단하게 4개의 requests를 더 줄일 수 있어서 고맙고, 앞으로 실제 바로 적용될 수 있는 CSS까지 함께 보여준다면 더 바랄 게 없겠군.