각 브라우저별 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 많이 사용해 주세요!

이렇게 웹 브라우저 상에서 실제 HTML5 기능을 이용한 멋진 슬라이드를 구경하고 있노라면 눈과 머리에 충분한 자극이 될 것이다.

원래 Google Chrome 브라우저에서 시연할 용도로 제작되었으며, 대부분의 최신 브라우저들에서도 내용을 확인해 볼 수 있지만, 슬라이드에 있는 시연 기능을 100% 사용하려면 다음과 같이 터미널에서 Chrome의 시험적 기능들을 켜준 후에 열어서 보아야 한다.

/PATH_TO_GOOGLE_CHROME_APPLICATION/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -enable-webgl -enable-geolocation -enable-desktop-notifications -allow-file-access-from-files

슬라이드는 code repository에서 내려받을 수 있으며, 앞으로 계속 새로운 내용이 수정/추가될 예정이란다.

IE에서 Google Chrome Frame을 심어놓고 HTML5 슬라이드를 시연한다면, 너무 심술긏은 짓일까? 😮

귀가 너무 얇은 탓일까? WordPress Cache를 위한 plugin으로 여태 잘 쓰고 있던 WP Super Cache에서 Hyper Cache로 갈아탔다.

갈아타게 만든 계기는 여러 WordPress Caching plugin들을 비교한 글에서 보여준 비교적 높은 성능 때문이다.

그런데, 처음 설치하고 나서 설정 페이지를 열어보았더니, 다음과 같은 반갑지 않은 메시지를 맞이하였다.

Hyper Cache was not able to create the folder “cache” in its installation dir. Create it by hand and make it writable.

여기서, cache 디렉토리의 권한을 설정해 주려고 Hyper Cache 공식 페이지에 나와있는대로 /wp-content/hyper-cache/cache 디렉토리를 생성해서 권한을 변경해 주었는데도 경고 메시지가 사라지지 않았다.

확인해 보니 버전이 갱신되면서 기존 캐쉬 디렉토리가 다음과 같은 위치로 바뀌었단다. :
wp-content/plugins/hyper-cache/cache

설치를 마치고 둘러본 바, 워낙 트랙픽이 저조한 곳이라 큰 차이점은 못 느겼지만, 기름칠 한 번 더 해주었다고 생각해야지. 🙂

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로 논쟁이 많은데, 어차피 표준 제정이 마무리 되지 않는 한 불편은 계속되겠지만 시도한 만큼의 결과물 만족감은 더 크다.

2010년이 돼서도 차별대우는 어쩔 수 없다.

var isMSIE = /*@cc_on!@*/false;
 
// or shorter one next 
 
var isMSIE//@cc_on=1 

Dean Edwards씨가 몇 년전 쌀짝 공개했던 코드로 알려지게 되었는데, Internet Explorer에서만 채용된 JavaScript의 짝퉁, JScript의 Conditional Compilation Statements때문이란다.

혹은 더 짧게,

if(!+"\v1") // true only in IE