CSS Specificity는 CSS 규칙들이 어떤 하나의 특정 요소에 적용되면서 CSS 규칙들 간의 두 개 이상의 충돌이 생길 경우, 브라우져가 더 한정적으로 선언되어 있는 특정 규칙을 따르게 되는 몇 가지 정해진 기본 적용 순위를 말한다.

대개의 경우, 아주 복잡한 CSS 파일들을 한꺼번에 적용할 경우 이런 충돌이 일어나는데, 이럴 때 웹 디자이너들이 주로 간편하게 선택하는 방법은 더 우선순위를 갖는 규칙에 불필요할지도 모르는 !important 속성을 적용하는 것이다. 이렇게 하면 개발자들로 하여금 어떤 한 요소를 손쉽게 변경할 수도 있게 할 것을 더 복잡하게 만는다. 그래서, CSS Specificity의 올바른 이해와 적용은 모든 웹 개발팀원들에게 바람직할 것이다.

먼저 선택자(selector)의 specificity는 다음과 같이 계산된다:

  • 선택자에 있는 ID 속성에 있는 갯수를 계산 (=a)
  • 선택자에 있는 기타 다른 속성들과 pseudo-class들의 갯수를 계산 (=b)
  • 선택자에 있는 요소 이름들의 갯수를 계산 (=c)
  • pseudo-element들은 무시

이것들의 계산법은 다음과 같다:

*              {}  /* a=0 b=0 c=0 -> specificity =   0 */
li             {}  /* a=0 b=0 c=1 -> specificity =   1 */
ul li          {}  /* a=0 b=0 c=2 -> specificity =   2 */
ul li a        {}  /* a=0 b=0 c=3 -> specificity =   3 */
a:hover        {}  /* a=0 b=1 c=1 -> specificity =  11 */
ul li a.red    {}  /* a=0 b=1 c=3 -> specificity =  13 */
li a.red:hover {}  /* a=0 b=2 c=2 -> specificity =  22 */
#candy         {}  /* a=1 b=0 c=0 -> specificity = 100 */

물론, 여기에는 빠져있지만 inline style 속성이 또 따로 지정되어 있다면 ID 속성보다도 더 높은 우선순위를 갖게 된다.

더 자세한 내용은, Eric씨Molly씨가 specificity에 관해 올려놓은 글을 참고.

Particletree · A Designer’s Guide to Prototyping Ajax의 글에서 따옴.

웹의 정신 중에는, 모든 이들에게 공평한 지식의 전달에 가치를 두고 있으며, 여기에는 어떠한 접근의 차별도 없어야 한다.
그렇다면, 혹시라도 있을 수 있는 정보 접근의 장애물들을 없애기 위해 자신이 사용하고 있는 블로그(blog)에는 어떠한 것들을 점검해 볼 수 있을까?

여기서는 참고를 위해서 American Foundation for the Blind(AFB)에 계시된 글들 중에서, 시각 장애인들에게도 접근이 용이한 블로그 만들기라는 제목의 글을 옮겨놓는다.
시각 장애인들에게도 접근이 용이한 블로그(이)란 제목의 글 마저 읽기 →

오랜만에 IEBlog에 IE7에 적용될 CSS 변화들에 관한 환영할 만한 글이 올라와 있다.

여기에는 <!DOCTYPE> 전환에 의한 strick 모드 하에서만 적용되는, CSS2.1와의 호환성을 높이기 위한 거의 200 개 이상의 변화들과 개선된 사항들이 있을 예정이라고 한다.

물론 예전의 잘 못된 습관들에 의해서 개발된 사이트들은 이에 따른 수정도 불가피하게 되었지만, 수정에 필요한 도구들도 마련해 두었다고 하니 지켜볼 일이다.

웹 2.0 시대의 웹 접근성 평가 이벤트라며 최근 정보통신부의 웹 접근성 표준안에 맞추어 다시 지어진 부산시 홈페이지를 대상으로, 웹 접근성 항목들을 준수하지 않은 페이지의 오류들을 접수하고 경품을 주는 행사를 하고 있다.

그런데 행사 소개 페이지하며 새로 고쳤다는 부산시 홈페이지는 왜 저 모양인지… 🙁
뜯어고치면 시간낭비고 처음부터 다시 짓는 것이 더 수월할 것이다.

신경을 쓰려는 노력이라도 보여서 다행스럽다고 해야겠지만, 또 한편 웹 표준의 이해가 부족한 우리나라 웹 개발자들의 현실을 드러내는 것 같아서 안타깝다.
개발자의 무지는 결국 사용자의 불편으로 돌아온다.