a태그 점선 없애기

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

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

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

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

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

a, input { outline:none; }      ie8/그외 타 브라우저 제거 가능

하지만 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 을 쓰면서 찜찜한 기분이 들던 사람이 있다면 위와 같은 방법을 쓰면 좀 기분이 깔끔해 지시리라.

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