Rev. 2.73

윈도 비스타의 기본 서체인 "맑은 고딕"은 가독성이 높은 것으로 평가받고 있다. 윈도XP 사용자들 사이에서는 이 폰트를 손수 다운로드하여 설치하기도 하며, 웹 페이지의 기본 폰트로 지정하는 등 맑은 고딕 폰트의 인기는 식을 줄 모른다. 하지만 이 폰트는 윈도 XP를 사용하는 경우 ClearType모드를 활성화 하기 전에는 글씨가 흐릿하게 보여 오히려 가독성이 떨어진다. 그렇다고 방문객에게 일일이 ClearType모드를 활성화 하라고 알릴 수도 없는 노릇이다. 그래서 헤더에 아래와 같은 자바스크립트를 삽입하여 사용중인 운영체제를 분석하고 윈도XP 전용 스타일시트를 로드하는 꼼수를 생각하게 되었다.

// include file for stylesheets
var includeCSS = function(href) {
  document.write(
    '<link href="' + href + '" type="text/css" rel="stylesheet" media="screen" />'
  );
};

// detect Window XP
if (!!navigator.userAgent.match(/Windows\sNT\s5/)) {
  includeCSS('/stylesheets/winxp.css');
}
else
// detect Mobile Safari
if (!!navigator.userAgent.match(/Apple.*Mobile.*Safari/)) {
  includeCSS('/stylesheets/mobilesafari.css');
}

아래는 스타일시트의 내용이다.

.blackout {
  font-family: Tahoma, Gulim, Verdana, Sans-serif; padding: 2px 20px 1px 30px;
}
.article {
  font: 10pt/1.84 Tahoma, Gulim, Verdana, Sans-serif;
}

이 방법을 응용하면 위 문제처럼 환경별로 스타일시트를 로드함으로써 서로 다른 플랫폼의 특징에 최적화된 스타일링이 가능하다. 추가로 아이팟과 아이폰의 브라우저인 모바일 사파리용 스타일시트도 불러오도록 해 보았다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar