가령, CSS3 애니메이션 효과를 적용할 때 미지원 브라우저한테는 대신에 JavaScript를 써서 애니메이션 효과를 대체하려고 할 때 유용한 gist로 jQuery plugin 형태로 다음과 같은 것이 있다.

$.support.cssProperty = (function() {
  function cssProperty(p, rp) {
    var b = document.body || document.documentElement,
    s = b.style;
 
    // No css support detected
    if(typeof s == 'undefined') { return false; }
 
    // Tests for standard prop
    if(typeof s[p] == 'string') { return rp ? p : true; }
 
    // Tests for vendor specific prop
    v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms', 'Icab'],
    p = p.charAt(0).toUpperCase() + p.substr(1);
    for(var i=0; i<v.length; i++) {
      if(typeof s[v[i] + p] == 'string') { return rp ? (v[i] + p) : true; }
    }
  }
 
  return cssProperty;
})();

출처 – Extends the jQuery.support object to CSS Properties

처음부터 무조건 JavaScript를 써서 애니메이션 효과를 주지 않는 이유는, 당연 CSS3 애니메이션 효과를 지원하는 브라우저에선 더 매끄러울 테니까 그렇다.
사용 예: CSS3 Dropdown Menu – CodePen

과거 Ajax를 필두로 웹 기술이 진화하면서 많은 웹 애플리케이션이 개발돼서 공개되고 있는데, 이런 곳엔 소위 'Loading spinner (Activity indicator)'를 쓸 일도 많아졌다. 이는 요청한 작업이 정상적으로 처리 중임을 알려주는 것으로 사용자 경험 측면에서 아주 중요한 요소 중의 하나이다.

이런 효과를 나타내려고 과거엔 animated gif 이미지를 주로 썼지만, 브라우저의 CSS3 Animation과 Transforms 지원 상황이 호전되면서 지금은 더 효과적인 대체수단으로서 선택적으로 CSS가 사용되고 있다. 이런 추세에 맞춰 CSS spinners를 만들어주는 도구도 생겨났는데 대표적으로 CSS load.net이 있다.

CSS에서 제공하고 있는 다양한 효과와 함께 개발자의 상상력만 더하면 아주 멋진 효과를 구현할 수가 있는데, 아래는 CSS3 Animation, Transforms와 함께 중첩된 text-shadow 효과를 써서 구현해 본 예 (animated GIF 이미지).

현재 최신 버전의 Firefox, Chrome 그리고 Safari만이 CSS3 Animation과 Transforms 모두를 지원하기 때문에, 그 외 브라우저에선 아직 대체 이미지의 사용이 불가피하다. (차기 버전인 IE 10과 Opera 12에선 모두 지원 예정.)

CSS3 Loading Spinner 데모 페이지

이미 널리 쓰이고 있는 CSS3 Gradients의 용법이 이번에 또 바뀌었는데, 관련 CSS Image Values and Replaced Content Module Level 3가 지난 1월 12일에 “Last Call” draft 상태로 진입한 것을 보면 어떤 커다란 용법의 변경은 더는 없으리라 예상(기대)된다.

우선 Linear Gradient 용법의 달라진 점.

Linear Gradient의 가장 단순한 사용 예로 다름과 같은 것이 있다. (vendor prefix는 생략함)

div { background: linear-gradient(white, black); }

적용하면 위에서 아래 방향으로 흰색을 시작으로 점점 짙어지면서 마지막은 검은색으로 표시된다.

linear gradient function의 첫 번째 argument는 gradient의 시작점과 끝점을 잇는 기준 축인 gradient-line을 지정하게 되는데, 위의 예에서처럼 생략되면 위에서 아래방향을 가리킨다. 그리고 gradient-line은 deg 단위를 써서 각도를 지정해 주거나, 혹은 몇몇 정의된 keywords를 쓸 수도 있다. 거의 막바지에 바뀐 CSS3 Gradients 용법 제목의 글 마저 읽기 »

오로지 CSS만으로 어떤 사물을 그럴듯하게 표현해 놓은 것을 보면 항상 신기해하는데 이번에 목격한 것(WWDC 2011 Session Video 중)은 오직 CSS의 Linear Gradient property를 써서 리본(ribbon)을 그려낸 것으로 다음과 같이 쓰였다.

.ribbon {
  background-image: 
    -webkit-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -webkit-linear-gradient(135deg, transparent 25%, red 25%); /* Chrome 10+, Saf5.1+ */
  background-image: 
    -moz-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -moz-linear-gradient(135deg, transparent 25%, red 25%); /* FF3.6 */
  background-image: 
    -ms-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -ms-linear-gradient(135deg, transparent 25%, red 25%); /* IE10 */
  background-image: 
    -o-linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    -o-linear-gradient(135deg, transparent 25%, red 25%); /* Opera 11.10+ */
  background-image: 
    linear-gradient(left, #900, #f33 10px, rgba(255, 0, 0, 0) 50px),
    linear-gradient(135deg, transparent 25%, red 25%);
}

앞으론 CSS property만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까? 제목의 글 마저 읽기 »

스마트 폰 사용자가 증가하면서 덩달아 급격히 늘고 있는 모바일 브라우징으로 말미암아 다양한 화면 크기에 적절히 대처하려는 시도로 최근 주목받고 있는 웹 디자인 패턴이 Responsive Web Design이다.

CSS3 Media Queries를 써서 서로 다른 디바이스의 화면 크기에 맞춰 적당한 layout을 구현해서 최적화된 브라우징 경험을 제공하려는 것인데, 오래전부터 이곳 블로그도 모바일 기기만을 위한 링크를 따로 제공하고 있지만 별로 만족스럽지는 않았는데, 최근 올라온 CSS3 media queries를 사용한 웹 디자인 소개 글을 참고해서 "반응형 웹 디자인"을 구현해 보았다.

윗글에 설명된 내용 중 중요한 것 몇 가지를 간추리면, 우선 Internet Explorer 8 이하 버전에선 CSS3 media queries를 알아듣지 못하기 때문에 JavaScript의 도움이 필요하다. 대표적으로 아래 두 가지가 있다.

• Respond
• css3-mediaqueries-js

여러 media types와 더불어 min-width와 max-width의 media queries만 쓴다며 크기도 작고 실행속도도 빠른 Respond가 안성맞춤.

다음에 웹 페이지에 포함된 그림은 화면 크기에 맞게 그 크기도 줄어들고 늘어나야 하는데 다음과 같이 지정해준다.

img {
  max-width: 100%;
  height: auto;
}
.ie8 img {
  width: auto; /* for IE8 only */
}

Viewport 정의는 다음과 같이.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이미 viewport에 맞게 디자인하였다면 iOS의 Text 크기 자동 조절 기능은 필요 없을 것이다.

html {
  -webkit-text-size-adjust: 100%;
}

덤으로, jQuery plugin인 FitText를 쓰면 header와 같은 곳에 사용된 큼지막한 글자도 화면 크기에 맞게 자동으로 그 크기를 조절해줄 수 있다.

이젠 Responsive Web Design이 선택이 아닌 필수가 되면서, 작은 화면에 보일 'content'가 더 돋보이게 되는 순간이다.

기타 참고 사이트:

• Media Queries – Responsive Web Design을 적용한 사이트를 모아놓았다.
• 320 and up – A ‘tiny screen first’ boilerplate extension.
• tinySrc – 작은 화면의 휴대용 기기를 위한 그림 크기 자동 조절/전달 서비스.
• imgsizer.js – 작은 크기로 축소된 그림이 구 버전 IE(IE7 이하)에서도 흉하게 보이지 않도록 해주는 스크립트.
• Detect Mobile Browser – Open source mobile phone detection.