2007년 7월 7일 토요일

[잡담]!important와 언더바 핵

한 규칙 안에서 윈도우용 IE 6 이하 버전을 위한 선언과 이외의 다른 브라우저를 위한 선언을 각각 사용하고 싶을 경우가 있습니다. 이를 위해서 속성에 이스케이프 문자를 사용하는 핵을 이용하거나 아니면 !important 또는 언더바 핵을 이용할 수 있습니다.

윈도우용 IE 6 이하 버전에서는 한 규칙안에서 여러 개의 속성을 사용할 수 없기 때문에
 !important 핵을 사용하면 제대로 동작합니다.

#nav {
  position: fixed !important;
  position: static;
}

윈도우용 IE 4~6 버전은 첫 번째 선언을 무시하고 두 번째 선언을 적용합니다. 나머지 브라우저는 
!important 키워드가 사용된 첫 번째 규칙을 적용합니다. !important 키워드를 쓰면 캐스케이드 우선 순위가 높아지기 때문입니다.

 !important 핵과 유사한 방법으로는 언더바 핵이 있습니다. 속성명 앞에 언더바를 붙이면 표준 호환 브라우저에서는 이 선언을 무시하고 해당 속성을 인식하지 않습니다. 하지만 윈도우용 IE 6 이하 버전의 브라우저는 언더바 문자를 무시하고 해당 속성을 인식합니다. 다음 예제 코드의 경우, 최신 브라우저는 포지션을 fixed로 지정하고 두 번째 선언을 건너뛰는 반면, 윈도우용 IE 4-6는 언더바 문자를 무시하고 첫 번째 규칙을 재지정하게 되어 포지션을 static으로 지정하게 됩니다.

#nav {
  position: fixed;
  position: static;
}

css 마스터 전략 책내용 중에서...

css hack 소스를 보실려면 http://www.webmini.net/24918 글을 참조해주세요.

댓글 2개:

  1. 웹마스터 책을 우선 필요한 부분만 읽었더니, 너무 징검다리식 지식이 되어버렸네요. ^^;;

    언더바가 먼지 몰라 이렇게 찾고보니.... ㅎㅎ;;;

    언능 다시 꼼꼼히 읽어서 머리속에 구겨 넣어야 겠네요.

    정보 감사합니다. ^^

    답글삭제
  2. @haksoo - 2007/12/11 11:53
    네 댓글 감사합니다.^^

    답글삭제