따라쟁이

media query에 -webkit-min-device-pixel-ratio:0 요게 들어가 있으면 된다는데…

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .myClass { background-color: #FF0000; }
     #myId {color: #0000FF;}
     p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
}

각 브라우저별 지원 버전 확인해 봐야겠음.
참조: http://www.evotech.net/blog/2010/04/hack-for-webkit-filter-for-chrome-and-safari/

IE8부터는 CSS expression의 지원을 중단한다고 합니다. 여기서 말하는 IE8이라는 것은 페이지가 IE8 Standard mode로 렌더링되었을때를 의미하며, quirks mode나 IE7 모드에서는 여전히 사용할 수 있다고 하네요.

IE8 개발팀도 번거롭겠습니다. 두 가지 렌더링 모드를 모두 포함한 브라우저를 만드려니… 그들도 이젠 크로스 브라우징의 짜증남은 몸소 깨닫고 있을 듯. ㅋㅋ

IEBlog의 해당 기사에 따르면 지원이 중단되는 이유는 첫째 표준이 아니며, 둘째 성능 향상을 위해, 마지막으로는 browser attack surface를 줄이기 위해서라고 합니다. 첫째 이유는 당연한 것일테고 두번째 이유는 CSS expression이 특정 이벤트가 발생할때마다 계속해서 실행되도록 되어 있어(테스트) 성능상 문제가 발생할 여지가 있습니다. 세번째는 CSS에도 JavaScript를 포함할 수 있으니 이를 막음으로써 구멍을 하나로 줄일 수 있으므로 효과가 있을듯 합니다.

부탁하는건 IE8이 나오면 웹브라우저를 IE8로 강제 업데이트되도록 했으면 좋겠다는… ㅋㅋ IE6땜에 발생하는 리소스 낭비가 엄청난데 … 쩝

불,천둥,태양 블로그에 브라우저 별 CSS font-family 속성 처리(출력) 방법에 대한 포스팅을 했습니다. 여기다 올려도 괜찮을 거 같았지만… 뭐 저쪽에서 적기 시작해버려서.

참고하세요.

2008. 5. 7
본 포스트는 전반적으로 잘못 이해된 사항을 기반으로 작성되었습니다. 제목에서 IE에서의 오류라고 되어 있는데, 오류인지는 잘 모르겠지만 일단 모든(IE, FF, Safari)에서 동일하게 동작합니다. 제 생각에는 정상적인 동작이라고는 생각되지 않습니다. 브라우저는 response type이 text/css인 경우에만 css로 해석해야 올바르지 않을까요? 그리고 redirect시에만 발생하는 것처럼 글 이 작성되었는데 redirect와 무관하게 발생합니다.

어쨌든 결론은 “존재하지 않는 css를 link로 참조하면 의도하지 않은 스타일이 적용될 수 있다” 입니다.

최근 스킨을 적용하기 위해 css를 dynamic하게 생성하도록 하는 페이지를 만들다 발견된 현상입니다.

IE에서 <link>로 요청된 css가 redirect된 경우 redirect된 resource가 css(mime type이 text/css)가 아닌 경우에도 해당 resource를 해석하여 css로 처리하는 현상이 있는 것으로 보입니다.

Daum 사이트에서는 파일이 존재하지 않는 경우 http://status.daum.net/error/error404.html 로 redirect 되는데, 다음 코드와 같이 존재하지 않는 css 파일을 요청할 경우 위에서 언급한 문제가 발생합니다.

[source:html]

[/source]

http://status.daum.net/error/error404.html 페이지의 코드를 보면 style이 페이지에 포함되어 있는데, 위 코드에서 div의 id로 지정한 #B_C selector 가 존재합니다. 따라서 위 페이지를 Internet Explorer에서 볼 경우 color와 font-size가 error404.html에서 정의한데로 출력되는 것을 볼 수 있습니다.

[source:html]

[/source]

위 코드는 error404.html에 포함된 #B_C selector 관련 스타일이며, 다음 그림은 ie7에서 위 html 페이지의 출력 결과입니다.

의문사항

• redirect된 대상이 html인 경우에만 발생하는지?
• html인 경우에만 발생한다면, redirect된 html에서 또 다른 스타일시트를 link로 참조한 경우에는 어떻게 될것인지?

처음 회사에 출근하던 날 오전에 회사와 관련된 오리엔테이션과 업무에 필요한 비품(소모품)들을 나눠 주었는데, 그 중에 계산기가 들어 있습니다. 흔히 멍텅구리 계산기라고 하는 기능이 아주 단순한 거죠. 전 직장에서야 금액 산출과 관련된 업무들이 종종 있어 계산기를 요긴하게 썼었는데, 여기서는 이 계산기를 무슨 일로 사용할까 궁금했었습니다. 더군다나 한 포장으로 되어 있는 가방에 계산기가 들어 있었으니, 입사자들한테 모두 공통으로 나눠줄텐데 말이죠…

서랍속에 계속 묵혀 있다가 최근 계산기의 사용 용도를 발견했습니다. 예전에는 동일한 작업을 하면서도 계산기가 있다는 걸 인지하지 못하고 습관데로 윈도우에 있는 계산기를 썼었는데… 아무래도 직접 손으로 눌러가며 사용하는 것 보다는 불편하죠. 그 용도는 CSS 코딩 시 길이 계산입니다. CSS의 box 모델에서는 요소의 너비와 패딩, 마진, 보더를 모두 합친 값이 해당 요소가 차지하는 공간이 되기 때문에 디자이너가 주는 헬프만 봐서 바로 이러한 속성들을 계산하기가 힘듭니다. 그리고 float을 이용해 레이아웃을 잡을 때 너비가 맞지 않으면 깨져(?) 버리게 되므로 길이를 정확히 입력하는게 중요합니다.

저번주 부터 계산기를 사용하기 시작했는데… ㅋㅋ 엄청 요긴합니다. 혹시 직접 계산기 두드리지 않고도 편하게 계산할 수 있는 방법이 있을까요?