2011 7월 09

앞으론 CSS property만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까?

오로지 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만으로 어떤 형태를 표현하고 있는지 짐작이나 할 수 있을까?(이)란 제목의 글 마저 읽기 →

꼬리표:

2011 7월 07

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가 배포되고 있는 상황.

꼬리표:

2011 6월 26

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를 구현하는데 부딪히게 되는 장벽이 훨씬 낮아진 느낌이다.

꼬리표:

2011 6월 24

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

꼬리표:

2011 6월 03

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가 있는데, 그 용법이 제한적이라 사용될 일은 별로 없다.

꼬리표:

없음.