[code:css]
.calendar {
        background: #9B2424;
}
.calendar .header {
        -webkit-border-top-left-radius: 30px;
        -webkit-border-top-right-radius: 30px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEC4C4), to(#521B1C), color-stop(.92,#da3434),color-stop(.1,#ef9fa5));
        height: 50px;
        width: 176px;
        -webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.4);
}

.calendar p.weekday {
        color: #fff;
        font-weight: bold;
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
        width: 176px;
        line-height: 50px;
        font-size: 25px;
        text-align: center;
}

.calendar p.daynumber {
        color: #000;
        font-weight: bold;
        text-shadow: 0px 1px 0px #fff;
        width: 176px;
        line-height: 126px;
        font-size: 130px;
        text-align: center;
}

.calendar .paper {
        -webkit-border-bottom-left-radius: 30px;
        -webkit-border-bottom-right-radius: 30px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#EDEDED), color-stop(.05,#BFBFBF),color-stop(.2,#E3E3E3));
        height: 126px;
        width: 176px;
}

[code:css]
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}
/*
 * Make sure input field won't overlap parent
 */
input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}

/*
 * combine different units!
 */

width: -moz-calc(3px + 50%/3 - 3em + 1rem);

Chris Vanrensburg: “최근의 위치 변경 애니메이션의 연장선 상에서, 저는 객체의 크기가 변함에 따라 곡선이 어떻게 적용되는지 보고 싶었습니다. 예상대로 너비와 높이 CSS 스타일 속성에 여러가지 곡선을 적용해보는 것은 꽤 재미있는 효과를 만들어냈습니다.”

http://www.flickr.com/photos/jasonprini/4104210048/

파이어폭스에서는 docuemnt.write를 사용한 스크립트를 읽어들이면 다른 다운로드를 정지시킵니다. 안타까운 사실이지만, document.write는 이미 만들어졌습니다. 이 문제는 페이지 컨텐트에 document.write를 이용해서 광고를 삽입하려고 할 때 수천억배쯤 더 나빠집니다. 대충 이런 식으로 작성하죠.

[code:js]
document.write('<script src="http://www.adnetwork.com/main.js"><\/script>');

다행히 대부분의 최신 브라우저들은 document.write로 추가된 스크립트까지 병렬로 읽어들입니다. 그러나, 몇 주전 파이어폭스 3.6에서 광고를 삽입할 때 이상한 중단 현상을 발견하고, 추적해보았더니 document.write로 추가된 스크립트가 문제였습니다.

document.write 스크립트 테스트 페이지에서 이 문제점을 보여주고 있습니다. 이 페이지에는 4개의 스크립트가 있는데, 첫번째와 두번째 스크립트는 document.write를 사용해 추가되었습니다. 세번째와 네번째 스크립트는 일반적인 방법(HTML과 SCRIPT SRC)을 사용해서 추가했습니다. 그리고 모든 스크립트는 4초가 걸려야 다운로드 할 수 있도록 했습니다. IE8, 크롬4, 사파리4, 오페라 10.10은 페이지를 전부 다운로드 하는데 ~4초가 걸렸습니다. 모든 스크립트는 document.write까지 포함해서 병렬로 처리되었습니다. 반면 파이어폭스에서는 페이지를 전부 다운로드 하는데 12초가 걸렸습니다(2.0, 3.0, 3.6에서 테스트). 첫번째 document.write 스크립트는 1초부터 4초까지 걸렸고, 두번째 document.write 스크립트에 5초부터 8초까지 걸렸습니다. 그리고 나머지 두 개의 일반적인 스크립트를 9초부터 12초까지 다운로드 했습니다.

• HTML 엘리먼트, HTML 속성, CSS 속성을 검색할 수 있습니다(조합도 가능합니다). 입력과 동시에 검색하므로, 한 두 글자만 입력해도 원하는 결과를 얻을 수 있습니다. 
• 검색 결과에는 브라우저 호환성, 표준 준수, 간략한 사용 설명 등을 포함합니다. 더 많은 정보를 원하시는 분들을 위해 SitePoint 레퍼런스 웹 사이트로 연결하는 링크도 제공합니다.
• 검색 결과에서 마우스 오른쪽 버튼을 클릭하시면 두 가지 기능을 선택할 수 있습니다. 하나는 온라인에서 더 자세한 정보를 찾는 것이고, 다른 하나는 선택한 항목의 예제 코드를 보는 것입니다.
• 예제 코드는 레퍼런스, HTML, CSS 패널의 옆에 열립니다. 그리고, 해당 항목을 사용하는 방법에 대한 실전 예제를 간략한 설명과 함께 보실 수 있습니다. 예제 코드는 편집할 수 있으며, 복사하기도 편합니다(더블클릭하면 전체선택합니다).
• HTML 패널에서 엘리먼트 이름, 속성 이름 혹은 속성 값(편집도 가능)에서 오른쪽 버튼을 클릭하면 두가지 옵션 중 하나를 선택할 수 있습니다. 클릭한 항목을 "Look up"으로 살펴보거나 "Show Code Example"로 항목의 코드 예제를 볼 수 있습니다.
• 마찬가지로 CSS 패널에서도 속성 이름과 값 위에서 오른쪽 마우스 클릭을 할 수 있으며, 옵션도 같습니다.
• HTML 패널에서 현재 선택한 엘리먼트(보통 군청색 배경으로 강조)의 태그 이름 위에서 마우스 오른쪽 버튼을 클릭하면, 컨텍스트 메뉴에는 "Look up selection(선택영역 살펴보기)"사 나타납니다. 이 메뉴를 클릭하면 해당 엘리먼트에 정의된 모든 속성과 현재 적용된 모든 CSS 속성을 볼 수 있습니다. 이 기능은 "Reference" 탭을 클릭하면 자동으로 실행되어 현재 선택한 엘리먼트의 데이터를 보여줍니다.
• 검사기를 사용해 다른 엘리먼트를 선택할 때, HTML 패널 옆의 코드 예제(Code Example)을 열면 선택한 엘리먼트에 대한 예제를 자동으로 보여줍니다.
• 이와 유사하게, DOM 계층(crumbtrail)을 클릭할 때,  코드 예제(Code Exmaple) 패널이 열려있다면 열면 코드 예제를 보여줍니다. 메인 HTML 패널과 같은 컨텍스트 메뉴 항목이 있어 선택한 항목을 살펴보거나 관련한 코드 예제를 볼 수 있습니다.

• IE8은 CSS 2.1에 대한 완전한 전체 스펙 지원을 목표로 하고 있습니다.
• IE8에서 가능한 CSS3는 쓰기 모드뿐입니다(세로 쓰기 지원을 위한 것입니다). IE는 이 기능을 5.x 버전때부터 지원해왔으며, 앞으로도 계속 지원할 것입니다.
• IE8은 CSS의 border-radius을 지원하지 않습니다. 이 속성은 이미지를 사용하지 않고 경계선 모서리를 둥글게 만들 때 사용합니다. Microsoft의 Chris Wilson씨는 border-raduis가 "꽤 높은 순위로 배정되어있다"라고 했지만, IE8이 릴리스 된 후에나 진행될 듯 합니다.
• IE9에 대한 공식적인 로드맵은 없습니다만, 네이티브 SVG 지원에 대한 가능성이 있습니다.
• 새로운 자바스크립트 엔진도 나타날 것 같습니다. 사용자들은 이렇게 요구했습니다. "다른 브라우저들처럼 이제는 자바스크립트 컴파일에 대해서 고려해주세요. 사파리는 SquirrelFish를 도입했고 지난 주 SquirrelFish의 반응 V8에 육박하고 있죠. Mozilla는 ScreamingMonkey에 대한 작업을 시작했고요. IE9도 새 자바스크립트 엔진을 가지게 되나요?". 그에 대한 대답은 이렇습니다. "우리는 IE8과 그 이후 버전부터 자바스크립트 성능을 개선하는 일에 매우 집중하고 있습니다. 이 노력에 대한 뛰어난 앞으로의 결과물을 기대하고 있습니다."

마치 방문객의 PC에 글꼴이 설치된 것처럼 사이트에서 보여주고 싶을 때, 이미지를 만들거나 플래시를 사용하는 대신 typeface.js를 사용하시면 HTML과 CSS만으로 원하는 폰트의 그래픽 텍스트를 보여줄 수 있습니다. 아직 진행중이긴하지만, 사이트에서 그래픽 텍스트를 렌더링할 정도의 기능은 충분합니다. 사용법을 알아보겠습니다. typeface.js 라이브러리와 typeface.js 폰트를 읽어들이면, 무난하게 진행됩니다:

[code:js]
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
 
<div class="myclass typeface-js" style="font-family: Helvetiker">
        Text here in Helvetiker font...
</div>

JavaScript와 비슷하게, CSS도 XMLHttpRequest에 영향을 주는 동일출처정책(same-origin policy)의 대상이 아니기 때문에 이 동작이 가능합니다. JSONP와 마찬가지로 CSSHttpRequest도 GET 요청을 만들어야 하는 한계가 있습니다. JSONP와는 다르게, 신뢰할 수 없는 써드파티 자바스크립트는 호출된 페이지 컨텍스트에서 실행할 수 없습니다.

요청은 CSSHttpRequest.get(url, callback) 함수를 이용해서 이루어집니다:

[code:js]
CSSHttpRequest.get(
    "http://www.nb.io/hacks/csshttprequest/hello-world/",
    function(response) { alert(response); }
);

데이터는 서버에서 URI 인코딩된 2KB 조각들로 나누어지고, 수정된 about: URI 스키마를 덧붙여 CSS의 @import 규칙에 직렬화되어 입력됩니다. 응답은 디코딩되어 콜백함수에 문자열로서 전달됩니다:

[code:css]
@import url(about:chr:Hello%20World!);

이 기능은 지정된 오프셋만큼 단순히 엘리먼트를 이동시킵니다. 예를 들어 -moz-transform: translate(100px)가 설정된 텍스트 엘리먼트는 원래의 위치에서 100 픽셀 우측 하단에 나타납니다. 물론, 단순한 변형 이상의 기능들도 있습니다. 예를 들면, 엘리먼트를 지정한 각도의 숫자만큼 회전시키는 회전; 엘리먼트를 각 축의 임의의 선을 기준으로 축소, 확대시키는 스케일; X, Y 축을 따라 기울이는 기울임; 그리고 임의의 매트릭스 변형을 위한 매트릭스 기능 등이 있습니다. 또한 skewx(X축 기울임), skewy(Y축 기울임)과 같이 몇가지 경우에 대해 보다 단순한 문법을 사용할 수 있는 단순한 버전도 있습니다.

CSS변형을 위해 개발자들이 사용한 것이 무엇인지를 보는 것도 재밌을 것입니다. 기능의 대부분들은 플러그인에서 구현될 예정이었지만, 지금은 CSS와 JavaScript에 직접 통합되어 웹 개발자들이 현재의 페이지들을 보다 생생하게 만드는 것에 도움을 줄 것입니다. 우리는 또한 이제 두 개의 구현체가 있게 된 이 속성의 표준화가 빨리 이루어지기를 기대하고 있습니다.

WebKit에 이제 CSS 변수가 시험적으로 구현되었습니다.

WebKit nightly를 사용하면 이 기능을 테스트 해보실 수 있습니다.

Test cases

이 부분은 <h4> 엘리먼트가 앞에 있는 모든 형제 <p> 엘리먼트에 영향을 줍니다. 이는 인접 형제 결합자 (+)가 모든 <p> 형제 대신 직접적으로 인접한 형제에만 영향을 미친다는 점에서 다릅니다. 이 부분은 IE7+, FF2+, Opera 9.5+, Safari 3+, 심지어는 Konqueror 에서도 잘 작동합니다.

저는 YUI Grids를 아주 좋아합니다. 저는 CSS를 알고 있고, 브라우저마다 일어나는 다른 문제를 처리할 방법도 알고 있습니다. 하지만, 동시에 이런 처리들을 계속 해가면서 고치고 작성하는 일에 무척 짜증이 나기도 합니다. YUI Grids가 모든 경우의 웹 개발에 완벽히 맞지 않다해도, 그것들을 이용해 실용적인 접근을 하고 사이트를 만드는 일이 매우 좋습니다(아시다시피 저는 디자이너가 아니거든요).

YUI 기반 사이트를 만들면서 계속 가지고 있던 한가지 문제는 정확한 화면 해상도 혹은 가시영역 크기 예측에 대한 사람들의 불평이었습니다. YUI Grids는 고 해상도에서는 조금 멍청해보일 수 있는 100% 너비도 되고 800x600이나 1024x768 등의 해상도에 최적화된 것도 가능합니다. 여러분이 800 픽셀에 최적화하면, 보다 높은 해상도를 사용하는 사람들은 페이지의 길이에 대해 불평할 것입니다. 여러분이 1024에 최적화한다면, 800x600을 사용하는 사람들은 가로 스크롤을 해야하는 것에 대해 뭐라고 할것입니다. 모두다 만족시킬 수 없는거죠.

할 수 있을까요? CSS는 동적이지 않습니다 —고정된 상태를 가지고 있으며 브라우저가 여러분이 작성한 대로 제대로 보여주기만 바랄 수 밖에 없습니다(음, IE를 위한 조건절이 있긴 합니다만 기술적으로 그것들은 HTML의 영역입니다. 물론, CSS3의 미디어 퀴리도 있고 다른 것들도 있지만, 이 글의 목적은 기본적으로 IE6 지원을 위한 것입니다). 한편, JavaScript는 매우 동적이라서 그것을 사용하고 반응할 때 브라우저에서 지금 무슨 일이 일어나고 있는지 읽고 확인할 수 있습니다.

JavaScript의 이 기능을 잘 사용하면 여백의 폭을 필요에 따라 조절할 수 있는 YUI Grids 기반의 레이아웃을 만들 수 있습니다. 여러분이 해야할 것은 약간의 YUI Dom 마법과 ID와 class를 바꾸어 주는 것뿐입니다.

이 편리하고 매력있는 css 기능은 커스텀 CSS 태그를  이용해 페이지의 어느 엘리먼트에서도 모든 종류의 2d 변환을 실행할 수 있도록 합니다. 이것은 DOM 엘리먼트를 회전하거나 변형할 수 있을 뿐 아니라, 여러분이 원하는 것을 위해 일반적인 매트릭스 함수를 사용할 수도 있다는 의미입니다.

CSS 변환은 nightly build 뿐 아니라 Safari 3.1과 iPhone에서도 가능합니다. 따라서, 현재의 사용자들을 목표로 삼는 것도 가능합니다.

CSS Namespace 모듈은 CSS에서 네임스페이스 사용 문법을 정의합니다. 기본 네임스페이스 선언과 네임스페이스와 네임스페이스 접두어를 바인딩하는 @namespace 규칙을 정의합니다. 또한 네임스페이스 자격이 있는 이름에서 이러한 접두어를 사용하기 위해 다른 명세를 적용할 수 있는 문법도 정의합니다.

네임스페이스 선언:

[code:css]
@namespace toto "http://toto.example.org";
@namespace "http://example.com/foo";

컨텍스트에서는 기본 네임스페이스가 적용됩니다:

• toto|A:
  http://toto.example.org 네임스페이스에 있는 이름 A를 표시
• |B:
  네임스페이스가 없는 이름 B를 표시
• *|C:
  네임스페이스가 없는 것을 포함한 모든 네임스페이스의 이름 C를 표시
• D:
  http://example.com/foo 네임스페이스의 D를 표시

우리 모두는 input[type=text] 과 같이 쓰고 싶어하지만 브라우저에서 지원을 제대로 못합니다.
그것이 James Cogian 씨가 classy_inputs이라는 이름의 작은 플러그인을 만들게 된 이유입니다:

아, 제가 얼마나 input 태그를 싫어했던지요(YUI도 그들을 싫어합니다만, 그 얘기는 나중에 하겠습니다). 타입이 다르면 다른 태그 이름을 사용했어야 하는데, 그렇지 못하니까 CSS로 input 태그를 다루는 것이 완전히 힘들어졌습니다. 그래서, 저는 Rails 템플릿을 작성할 때 모든 form 엘리먼트에 a :class 옵션을 추가하는 짜증나는 방법을 사용하는 것으로 해결하곤 했습니다. 잠깐 돌아가자면, 저는 이 작업을 자동으로 하기 위해 Rails를 패치하려고 해봤습니다. 하지만 몇몇 곳에 클래스를 적용할수록 테스트는 저를 좌절하게 했습니다.

그래서, 이런 반복작업을 없애기 위한 플러그인을 만들었습니다:

script/plugin install
http://svn.jcoglan.com/classyinputs/trunk/classy_inputs

설치가 되면, Rails view method를 사용해 작성된 모든 input 태그는 자신의 type 속성에 알맞은 클래스 이름을 가지게 됩니다. Dion씨도 아마 다른 방식으로 Rails를 패치할 것 같다고는 하는데, 장담할 수는 없다고 합니다.