[CSS Expression] 보다 적절한 링크와 버튼등의 점선 없애기


작성자 : 김민석 ( lemonfish at g m a i l dot com )

!!! 아래의 글에서 소개하는 방식은 남용될 경우 브라우저가 무지하게 느려진다. !!!

CSS Expression
이 나왔으니 당연히 IE 에만 해당되는 내용이다. 망할 IE 는 outline 스타일속성이 지원이 되지 않기 때문에 굳이 이런 hack 을 써야 하니 좀 짜증날 노릇이다. 

링크나 버튼등에 나타나는 접근성을 위한 점선표시는 사실 보기에는 그리 좋지 않다. 국내 포털들은 그냥 두고 있지만 그래도 명색이 개발자인지라 보기싫은게 있으면 당장 제거하고자 하는 욕구가 마구 솟는다.

그래서 많은 곳에서 점선을 없애는 여러가지 방법을 사용하는데. 이번 포스팅에서는 그간에 나온 방법의 단점을 보완해 보고자 하는 차원에서 잠깐 끄적거리다 만든 코드를 소개한다.

일단 IE 가 아닌 정상적인(?) 브라우저라면 아래의 스타일로 제거가 가능하다.

a, input { outline:none; }

하지만 IE 에서는 보통 아래와 같은 hack 을 쓴다.

onfocus="this.blur();"

그런데 이건 솔직히 요즘같은 세상에 누가 일일이 넣어 주고있겠는가? 당장 욕이 나올 지경이다. 그래서 나온 hack 이 IE 에서만 통용되는 Expression 을 사용한 방법이다.

a, input { selector-dummy:expression(this.hideFocus = true); }

보통 위와 같은 식으로 쓰는데 다들 selector-dummy 라는게 특별한 속성인줄 알더라. 특별한 속성아니니 이름은 맘대로 지어도 상관없다. 즉 아래와 같은 방식도 가능하다는 말삼.

a, input { z:expression(this.hideFocus = true); }

그런데! 문제는 expression 을 사용할 경우 실시간으로 속성값이 평가 되기 때문에 브라우저에 알게 모르게 부하가 간다. 위와 같은 식으로 사용했을때 화면상에서 마우스만 슬쩍 움직여도 몇백번씩 expression 이 실행된다. 아~ 이런 끔찍한 일이.... 그러면 어떻해야 하나?

본인이 끄적거리면서 고민하던 것들은 다 집어치우고 결론 부터 말하면, expression 이 수행되고 나면 제거하는 것이다. 켈켈켈.. 어쩌면 당연한 소린데 그렇게 하는 사람은 별로 못본것 같다. 점선을 없애는 코드는 사실상 한번만 수행되면 되는 코드라는데 핵심이 있다. 그러면 어떻게 없애야 하나? 일부에서는 CSS 로딩후 cssText 파싱해서 처리하는 방법도 본적이 있으나, 굳이 그럴 필요는 없다. 쉬운길로 가자.

일단 더미 속성을 사용하는 경우 expression 의 제거가 정상적으로 되지 않기 때문에 실제 있는 속성을 사용해야 한다. 그러면 a 태그와 input 태그의 수많은 CSS 속성중에 안쓰는 놈 하나만 골라서 그놈을 쓰도록 하자. 예를 들어 word-wrap 같은걸 쓰면 좋다. 그 놈에다가 expression 을 넣는데 그 expression 이 하는 기능은 일단 hideFocus 를 해주고, word-wrap 의 값을 덮어 써서 expression 을 제거하는 것이다. 아래와 같은 식이다.

a, input {
    word-wrap:expression( this.style.wordWrap="normal",this.hideFocus=true);
}


행여나 expression 을 쓰면서 찜찜한 기분이 들던 사람이 있다면 위와 같은 방법을 쓰면 좀 기분이 깔끔해 지시리라.

by killy | 2008/08/14 03:28 | 스크립트 | 트랙백 | 덧글(5)

트랙백 주소 : http://lemonfish.egloos.com/tb/4550683
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Commented by dyp at 2009/02/24 11:22
o o o o - -;; goood
Commented by seye2 at 2009/03/26 02:10
혹시 해결 방법을 알고 계시겠지만 야후에서는 CSS Expression 사용을 피하라고
명시를 해놓고 있습니다. One-time Expression이라는 방법으로 반복적인 Expression 호출을 감소(reduce)시킬 수 있다고 해놓았습니다.
저 단어로 볼때 완벽한 반복을 막는 방법은 아니라는것 같습니다.
그리고 점선은 많은 기획자, 디자이너, 개발자분들께서 요청하시고 저도 항상 말씀드리면서
해결방법을 내놓지 못해 죄송하게 생각하는 부분인데요.
저 방식으로 점선을 없앨 경우 키보드(탭키)로 저부분을 선택하지 못하게 되어버립니다. 저시력자나 장애가 있으신 분들은 전혀 사용할 수 없는 문제가 생겨서...
현재 웹접근성 가이드에서는 사용하지 못하도록 하는 부분입니다.
혹시 이미 알고 계신 내용이시라면 그냥 편하게 읽어주셨으면 좋겠습니다.
그럼 수고하세요!!
(http://developer.yahoo.com/performance/rules.html 야후의 웹사이트를 빠르게 하는 법이라는 문서입니다.)
Commented by killy at 2009/03/26 09:04
맞는 말씀입니다. One-time Expression 을 사용하더라도 완전히 한번만 실행하고 끝나지는 않습니다. 그때 그때 다른데 보통 1~4번 정도는 실행되고 멈추더군요. 맨위에 빨간색 경고 문구를 달아놓은것도 제가 막상 쓰다보니 Expression (One-time Expression 이라 하더라도) 때문에 페이지 하나뜨는데 20분이 걸렸던 경험이 있어서 였습니다.
사실상 저도 포스팅을 하면서 고민을 했는데요. 내용이 상당히 웹접근성에 반(反) 하는 내용인지라 얼마없는 방문자들에게 돌팔매질이라도 당할까봐 조마조마 했었지요. 꼭 집어서 지적하시니 땀나네요. 하지만 제 개인의 연구목적(?) 으로만 활용할 뿐 실무에서는 절대사용하지 않으니 행여라도 질 나쁜 개발자로 오해하지 마세요~ ^-^

PS - 야후의 Performance Best Practice 는 저도 읽은 적이 있고, 지켜 보려고 노력하는 편입니다. 사실 저는 의외로 YSlow 에서 A 를 잘받는 편입니다. 으흣으흣 -ㅅ-)b 친절히 덧글달아 주셔서 감사합니다.
Commented by 에취취 at 2011/04/09 18:14
이상하게 인터넷익스플로러9에서 selector-dummy:expression(this.hideFocus = true); 을 사용하게 되면 어느 순간부터 홈페이지가 엄청나게 느려지는 현상이 있습니다. (익스9만 그렇습니다. 버그인듯 하군요.) 사이트 특성상 점선을 꼭 없애야 해서 고민 중이였는데 word-wrap:expression( this.style.wordWrap="normal",this.hideFocus=true); 이방법을 사용하니 점선도 사라지고 속도도 찾았습니다. 정말 감사합니다 ^^
Commented by killy at 2011/04/11 02:36
어익후. 도움이 되었다니 정말 기쁜일이네요. 방문해 주셔서 감사합니다. 사이트 특성상 점선을 꼭 없애야 했다니 정말 안타까운 일이네요. 아마도 미관상의 이유였나 보군요. 아시다시피 점선표시를 없애는건 접근성에는 좋지 못한데 말이죠.

저는 웹개발을 할 일이 있을 때 마다 제가 몸이 불편한 사람이라면 어떨까? 라는 생각을 한답니다. 그래서 가끔씩 이용하는 사이트에서 스크립트도 끄고 써보고, 스타일도 없애고 써보고 그러지요. 그 상태에서 이용에 큰 지장이 없는 사이트는 흔치 않더군요. 그래도 요즘은 몇년전에 비해 정말 많이 좋아졌지요~

:         :

:

비공개 덧글

◀ 이전 페이지          다음 페이지 ▶


rss

skin by FreeCssTemplates