poly-checked - :checked 의사 클래스 크로스브라우징

:checked 속성은 폼 필드요소들인 checkbox 나 radio 의 선택 상태를 나타내는 속성입니다. 이는 마치 자바스크립트의 클릭 이벤트를 흉내내는 것과 같아서, CSS만을 이용해서 이벤트를 수신하는 효과를 구현할 수 있습니다. 가령 메뉴나 탭등과 같이 전과 후의 디자인을 변경하는 경우가 있습니다.

poly-checked 소개

IE8과 그 이하에서 :checked 의사 클래스를 추가하는 폴리필로서, IE8과 IE7에서 테스트되었다.

HOME

poly-checked

DEMO

라이브 데모

poly-checked 사용법

jQuery 1.7 이상의 버전이 필요하며, IE 조건부 주석을 이용하여 이를 삽입한다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--[if lte IE 8]>
<script src="path/to/poly-checked.min.js"></script>
<![endif]-->

스크립트가 삽입되기 이전에 모든 스타일시트(CSS) 파일이 삽입되어야 한다.

poly-checked 특징

• 따로 CSS에 클래스를 추가할 필요가 없다(예. .checked).
• 동적으로 생성된 체크박스/라디오 요소와 함께 작동된다.
• 자바스크립트와 완벽히 호환된다. 마치 진짜 :checked 의사클래스 처럼 요소의 checked 상태를 자동적으로 업데이트 한다.
• 원래 선택자와 같은 선택자의 특이성을 유지한다.
• 보너스 : 형제 선택자와 함께 :checked가 작동하도록 추가적인 패치가 이루어졌다. 맞춤화된 CSS 체크박스/라디오를 사용할때 유용할 것이다.

알려진 제한사항

• 다른 도메인의 스타일시트에 사용될 수 없다. <link rel="stylesheet"> 요소에서 인식할 수 없는 선택자나 원시 CSS 텍스트를 검색할 CSSOM/DOM API가 없다. 따라서 폴리필은 동일출처(same-origin) 정책의 XHR을 사용한다. 해결방법은 동일한 도메인에 폴리필을 필요로하는 모든 스타일시트를 호스팅하는 것이다.
• 동적으로 추가된 요소를 감지하는 것은 폴링(polling)^[각주:1]을 통해 이루어지며, 이는 간혹 FOUC^[각주:2]의 원인이 된다. FOUC의 밀리초를 피하기 위해 이미 패치된 체크박스/라디오에 jQuery의 .clone(true)을 사용할 수 있다. 모든 폴링을 제거하는 것이 최선의 방법이지만, 새로 생성된 입력요소를 감지할 수 있는 이벤트 방법을 발견하지 못했다(IE<=8).
• 동적으로 추가된 스타일시트를 폴리필하지 않는다. 드문 경우라 DOM 폴링을 추가할 필요가 없었지만, polyCheckedParseNewStylesheets 기능을 구현하는 것은 가능하다.
• option 요소(option: checked)에 :checked 의사 클래스를 폴리필하지 않는다. 옵션 요소는 크로스브라우징 스타일링에 제한되기에 중요 우선 순위가 아니다. 이것을 스타일링 하는 많은 플러그인이 대체 방안이 될 수 있다.

1. 통신에서, "폴링"은 한 프로그램이나 장치에서 다른 프로그램이나 장치들이 어떤 상태에 있는지를 지속적으로 체크하는 전송제어 방식으로서, 대체로 그들이 아직도 접속되어 있는 지와 데이터 전송을 원하는지 등을 확인한다. 쉽게 말해서 Status Bar, Dash Board 등에 쓰이는 실시간처리 방식이다. [본문으로]
2. DOM구조의 변화나 기타 다른 이유로 인해 화면의 로딩 결과물이 변화되는 모습이 표시되는 것. 화면 깜박임이 대표적인 예이다. [본문으로]