*출처 : CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY
레프트21의 지난 한 달(2013-04-02~05-02) 간 방문 통계를 보면, IE6 방문수는 0.58%, IE7 방문수는 6%다. 아직 IE7은 지원해야 하고, IE6는 최소한의 레이아웃만 볼 수 있게 하면 되겠다는 생각이다.
IE7을 최소 지원선으로 삼게 되면서, 달라진 게 생겼다. IE6에서는 거의 사용할 수 없었던 것들 중 꽤 많은 것들이 사용가능해졌다는 것이다. 늘 IE6를 기준으로 퍼블리싱했기 때문에 갇혀 있었다. IE6로부터 해방되고 얼마쯤이 지나고 나서야 IE7에서 의외로 지원하는 선택자가 많다는 것을 깨달았다. 그래서 한 번 정리를 하는 것이다.
CSS 1
E:first-line, E:first-letter는 IE7, IE8에서 모두 작동한다. 첫 줄 장식이야 별 쓸 일 없겠지만, 첫 문자 장식을 폼나니까 써 보는 것도 나쁘지 않을 것 같다.
CSS 2.1
E > F: 7/8 지원. 바로 밑에 있는 자식을 고르는 선택자인데, 7/8 모두에서 작동한다.E:first-child: 7/8 지원. 세상에 이게 작동했다니. 앞으론 내비와 푸터 요소들에 좌측 선 넣고 맨 앞이나 맨 뒤의 선을 지울 때 이 선택자를 사용해서 지우면 되겠다. (E:last-child는 7/8 모두 지원하지 않는다.)E:hover: 7/8 지원. IE6는a엘리먼트에서만 이놈이 작동했다. 7/8에서는 아니다. 일반 엘리먼트에서 모두 작동한다고 한다. 나이스! 그럼 UI를 만드는 게 더 자유로워진다.E:focus: 8만 지원. IE8만 지원한다. focus될 때 특정한 스타일을 넣을 수도 있고, 접근성을 위해 넣어 둔 1px짜리 링크에 focus가 오면 확 키우는 경우에도 사용할 수 있다.E + F: 7/8 지원. 형제 선택자를 사용할 수 있었다니. 정말 몰랐다.E[attr]: 7/8 지원. 어트리뷰트 선택자를 7/8이 모두 지원했다니 세상에.E[attr="value"]: 7/8 지원. 어트리뷰트와 값을 이용한 선택자도 7/8이 모두 지원했다고. OTL;;E[attr~="value"]: 7/8 지원. 공백으로 끊어져 있는 여러 값들 중에 하나가 맞는다면 선택하는 놈이라고 한다. 링크 걸어 둔 예제를 보면 대충 이해갈 거다. 이건 왜 있는 건지 잘 이해는 안 가는데, 뭐 클래스랑 비슷한 어트리뷰트가 있으면 사용하라고 만든 건가.E:before: 8만 지원.content: '♣';하는 식으로 사용하는:before가상 선택자를 IE8부터 사용할 수 있었다!E:after: 8만 지원.content: '▼';하는 식으로 사용하는:after가상 선택자를 IE8부터 사용할 수 있었다!
CSS 3
E ~ F: 7/8 지원. 헉. 이건 정말 의외다. 이건 E부터 F까지 싸그리 선택하는 놈이다. 물론 동급이어야 한다. 자손이나 조상끼리는 해당되지 않는다.E[attr^="value"]: 7/8 지원. 어트리뷰트의 값이 특정 값으로 시작하는 경우 엘리먼트를 선택한다.[class^="my_"]이런 식으로 접두어를 바탕으로 관련된 놈들을 한꺼번에 선택할 수 있는 거다.E[attr$="value"]: 7/8 지원. 어트리뷰트의 값이 특정 값으로 끝나는 경우 엘리먼트를 선택한다.[class$="_box"]이런 식으로 접미사를 바탕으로 관련된 놈들을 한꺼번에 선택할 수 있는 거다.E[attr*="value"]: 7/8 지원. 어트리뷰트의 값에 특정 값이 포함돼 있는 경우 그 엘리먼트를 선택한다.[style*="block"]요소 스타일로block이란 글자가 들어간 엘리먼트를 전부 고르기 위해 이런 식으로 써먹을 수 있을 지도 모르겠다.E[attr|="value"]: 7/8 지원. 이 생소한 선택자는 정말 한 번도 안 써 본 건데, 특정 어트리뷰트의 값이 하이픈(-)으로 연결된 단어들 중의 하나인 경우 선택한다.E[attr*="value"]와 뭐가 다르냐?! 하고 생각할 지도 모르겠지만, 다르다.class="myphonedesktop"과class="my-phone-desktop"이렇게 있을 때, 후자만 고르고 싶다면 이 선택자가 필요할 거다. (물론E[attr^="phone-"], E[attr*="-phone-"], E[attr$="-phone"]이렇게 세 개의 선택자를 겹쳐 쓰면 이 선택자와 같은 의미가 되긴 할 거다.)
소감
세상에 IE7/8이 모두 지원하는 괜찮은 선택자가 상당히 많다는 걸 이제야 알게 됐다. 물론 문제는 아니었다고 생각한다. IE6에서 똑같이 제대로 보이는 퍼블리싱을 하려면 CSS의 상한선을 IE6에 맞추고 하는 게 가장 편했고 그건 나쁘지 않은 선택이었다고 생각한다. 묘기를 부리면 당연히 이런 것들을 사용할 수 있었겠지만, 묘기를 부릴 정도의 여유를 갖고 살지는 못했다.
여튼간에, IE6의 시대는 갔으니 이제 IE7에서 사용할 수 있는 선택자를 마음껏 사용해 줄 테다!!!
댓글 남기기