프로젝트에 적용하기위해 url cursor를 사용하는법을 찾아보았다.
의외로 상당한 크로스브라우징을 지원 
#cursorTest {
cursor: url(example.png), url(example.cur), pointer;
}
작업을 하다보면 png이미지로 처리하고싶은 유혹에 빠질때가 몇번씩은 있다. 배경색이 복잡한 투명 object나 투명도가 들어간 백그라운드는 gif로 작업하려면 상당한 시간과 짜증이 유발되기 때문인데 개인적인 취향으로 ie6 png hack은 보통 아래와같은 AlphaImageLoader를 사용한다.
.pngbg { background-image: url(bg.png); }
* html .pngbg {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png", sizingMethod="crop");
}이 방식은 지금까지 수도없이 사용했던 방식이었고 테스트서버에서도 아무런 문제가 없었는데 본서버로 데이터를 옮기자 ie6에서 png이미지가 아예 로딩되지 않는 문제가 발생했다.
아마 서버상의 캐쉬관련 세팅문제일거라고 추측은 되는데 확인할 재주가 없어 gif노가다로 처리할 수 밖에 없었다.
황금같은 주말이브를 말아먹어주신 ie6 ㄱㅅ
ps. png8을 이용한 크로스브라우저를 지원하는 투명png를 만드는 방법이 있긴하다. (링크수정)
mac용 firefox는 osx의 텍스트 렌더링엔진과의 충돌때문인지 opacity변경을 할때 해당 element만 변하는게 아니라 사이트전체 text의 opacity까지 같이 변한다.
예를 들면 submit버튼을 이미지로 하고 사용성을 주기위해 #submit:active {opacity: .7;}을 준다면 클릭할때 버튼이 살짜쿵 투명해져야되지만 모든 글씨까지 덩달아 투명해진다.
개인적으론 mac용 firefox는 ie6보다 못하다고 생각하는 1인이기에 이런버그는 무시하고 과감히 사용중
Simpltry의 Firefox for Mac and Opacity Problem에 따르면 opacity가 변할때 실제 opacity가 변하는게 아닌 osx의 firefox가 텍스트 안티알리아싱 엔진을 osx – firefox사이에서 왔다갔다 하면서 생기는 안티알리아싱의 변화라고한다.
Mezzoblue의 Opacity Bugs에서 opacity를 1이 아닌 0.9999로 해서 안티알리아싱모드의 변환을 막는(?) 임시꽁수 발견.
언제해도 귀찮은 form디자인을 하는도중 safari에서 문제가 생겼다.
어두운 배경위에 file input이 올라가는 디자인인데 safari의 file input이 워낙 독특하게 생긴지라 텍스트컬러가 배경에 묻혀서 보이질 않는다.
(잘보면 choose file 버튼 뒤에 “no file selected”가 숨어있다. -_-)
구글신이 알려주신 CSS hacks series의 webkit filter로 해결할 수 있었다.
/* webkit only filter */
@media all and (min-width: 0px) {
body:not(:root:root) input[type="file"] {color: #fff;}
}잠시 삼천포 하나:
form요소를 디자인하는것은 시스템차원의 global한 form요소와 디자인이 달라져서 접근성측면에서 안좋다는 의견도 있지만 내 생각은 다르다.
사이트에 녹아드는 동일한 인터페이스를 구축해주는것이 넓은의미에서의 접근성 확보가 아닐까? 게다가 이왕이면 다홍치마라는 속담도 있고 말이지.
ie6에선 :focus를 인식하지 못하고 :active와 동일하게 적용하기 때문에 그걸 이용해서 보통 다음같이 사용한다.
a:focus, a:active {..;}