IE10부턴 Conditional Comments는 그냥 무시할 거라는 소식

Notes, Web Development 댓글이 없음 »

→ HTML5 Parsing in IE10 – IEBlog – Site Home – MSDN Blogs
그래서 종전처럼 아래와 같은 Conditional comments로는 IE10만을 위한 처방을 내릴 수가 없게 되었다.

<!--[if IE]>
  This content is ignored in IE10 and other browsers.
  In older versions of IE it renders as part of the page.
<![endif]-->

특별한 처방이 딱히 필요 없어지면 좋겠지만, 과거 병력으로 보면 진짜 그렇게 되길 간절히 바라는 소망으로 바뀌지. 지금은 두 번째 IE10 Platform Preview가 배포되고 있는 상황.

꼬리표:

iOS 5 Beta 2부터 관성 스크롤링을 지원하기 시작했다는 소식

Apple, Mac & iOS, CSS 2개의 댓글 »

Johan Brook 씨가 blog에 올린 글에 의하면 다음 버전의 iOS에선 새로운 CSS property를 써서 완벽한 기본 iOS의 관성 스크롤링 동작을 구현할 수 있게 되었다고 한다. 그것도 손가락 하나만으로 스크롤링이 가능해졌다.

div {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

그동안 Web Apps를 개발할 때 native iOS apps에서 보여주는 관성 스크롤링 동작을 구현하기 위해 몇몇 JavaScript 라이브러리를 사용해야 했는데, 아무래도 부족한 면이 없지 않았다.

이미 이전 iOS 5 Beta에선 position:fixed와 overflow:scroll 등 아쉬웠던 여러 웹 기술을 지원하기 시작했으며, 여기에다 관성 스크롤링까지 지원하면서 native Apps 못지않은 Web Apps를 구현하는데 부딪히게 되는 장벽이 훨씬 낮아진 느낌이다.

꼬리표:

IE 6 사용자에게 Chrome Frame을 설치하도록 하는 권고 창 띄우기

Web Development 댓글이 없음 »

최근 HTML5 boilerplate 소스 코드 commits 중에 눈에 띈 내용으로, 도큐먼트 body 맨 아래에 다름과 같이 삽입해 주면 된다.

<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
     chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
  <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
  <script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
</body>

물론, 서버에서 header 설정을 해주거나(권장 사항) 혹은 아래처럼 도큐먼트의 head에다 IE에게 무조건 최신 렌더링 엔진 혹은 Chrome Frame을 사용하도록 하는 meta 정보를 심어줘야 한다.

<head>
  <meta charset="utf-8">
 
  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

조만간 Admin 권한이 없는 사용자도 Chrome Frame을 설치할 수 있게 된다니까, IE 6에 대한 또 하나의 대처 방법으로 큰 부담 없이 고려해 볼 수 있는 좋은 처방이 될 수 있을 것이다.

IE6의 끈질긴 생명력을 지탱해 주는 마지막 끈이 되어줄 Chrome Frame의 개발자 문서 – Chrome Frame: Developer Guide

꼬리표:

JavaScript의 String.link method

JavaScript 댓글이 없음 »

자주 있는 일은 아니지만, 웹 페이지에 삽입될 링크를 JavaScript에서 생성해서 추가할 일이 있다면 다음과 같이 string-concatenating을 쓴 용법이 사용될 텐데,

var anchor = '<a href="' + url + '">' + text + '</a>';

String.link method를 쓰면 아래와 같이 깔끔하게 짤 수 있다.

var anchor = 'This is a link.'.link('http://appletree.or.kr');
// "<a href="http://appletree.or.kr">This is a link.</a>" 

ECMAScript 표준에는 정의되어 있지는 않지만, 오래전부터 모든 브라우저에서 지원하고 있단다.

이 밖에도 여러 특이한 JavaScript의 HTML wrapper methods가 있는데, 그 용법이 제한적이라 사용될 일은 별로 없다.

꼬리표:

 없음.

Responsive Web Design

CSS 댓글이 없음 »

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

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

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

여러 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.
꼬리표: