작성자:
이 글은 데이비드 바론(David Baron)의 블로그에 있던 포스팅을 가져온 것이다. 이 기능은 모질라 센트럴 (trunk) 에 적용됐고 아직 파이어폭스 나이틀리 빌드(Nightly Build)에서만 쓸 수 있다.
지난밤 나는 :-moz-any() 선택자 그룹핑(grouping) 지원 기능을 넣었다. 이것은 결합된 선택자(combinators)가 전체적으로 비슷한데 일부분만 다르게 사용되는 경우 일일이 반복하는 대신 짧게 줄여서 쓰게 해준다. 예를 들어 이 기능으로 브라우저(user-agent) 스타일 시트 규칙을 다음과 같이 바꿀 수 있다:
/* 3단계 (또는 그 이상) 네모기호 순서없는 목록(unordered lists) 만들기 */ ol ol ul, ol ul ul, ol menu ul, ol dir ul, ol ol menu, ol ul menu, ol menu menu, ol dir menu, ol ol dir, ol ul dir, ol menu dir, ol dir dir, ul ol ul, ul ul ul, ul menu ul, ul dir ul, ul ol menu, ul ul menu, ul menu menu, ul dir menu, ul ol dir, ul ul dir, ul menu dir, ul dir dir, menu ol ul, menu ul ul, menu menu ul, menu dir ul, menu ol menu, menu ul menu, menu menu menu, menu dir menu, menu ol dir, menu ul dir, menu menu dir, menu dir dir, dir ol ul, dir ul ul, dir menu ul, dir dir ul, dir ol menu, dir ul menu, dir menu menu, dir dir menu, dir ol dir, dir ul dir, dir menu dir, dir dir dir { list-style-type: square; }
이것을 고치면:
/* 3단계 (또는 그 이상) 네모기호 순서없는 목록(unordered lists) 만들기 */ :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { list-style-type: square; }
이론적으로는 다음과 같이 쓸 수도 있는데:
/* 3단계 (또는 그 이상) 네모기호 순서없는 목록(unordered lists) 만들기 */ :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { list-style-type: square; }
그러나 이렇게하면 태그 버킷(tag bucket)에 더이상 들어가지 않기 때문에 더 느려지게 된다. (만일 :-moz-any()가 앞으로 많이 쓰이게 되면, 우리가 코드를 수정해서 빠르게 만들 수도 있지만, 아직 그렇게 하지 않았다.)
:-moz-any()는 (CSS 2.1이 아니라 단순 선택자(simple selectors)의 css3-선택자 정의를 따르는) 다중 단순 선택자(multiple simple selector)를 선택자에 포함하는 것이 허용되지만, 결합된 선택자 또는 의사-요소(pseudo-elements)를 포함하는 것은 허용되지 않는다. 그래서 :-moz-any(p.warning.new, p.error, div#topnotice)라든지 :-moz-any(:link, :visited).external:-moz-any(:active, :focus) 처럼 쓸 수는 있지만, :-moz-any() 안에 “div p” 라든지 “div > p 또는 “:first-letter”를 집어넣을 수는 없다.
두가지 이유로 -moz- 접두사(prefix)를 붙여놓았다. 첫째, 이건 단순한 제안(proposal)일 뿐이고 어떤 기술적 구현방법을 명세화하지 않았다. 둘째, 아직 이 특성을 올바르게 다루지(handle specificity correctly) 않았기 때문에 prime-time을 위해 잘 준비되지 않았다.
참조(Note): 이 방식이 HTML5 기반 환경(context)에서 sections 과 headings 위치에 쓰일 경우 매우 중요해질 것이다. section, article, aside, 그리고 nav는 중첩될 수 있기 때문에 깊이가 다른 단계에서 모든 h1요소에 스타일을 지정하는 것은 극히 복잡해질 수 있다.
/* 단계(Level) 0 */ h1 { font-size: 30px; } /* 단계 1 */ section h1, article h1, aside h1, nav h1 { font-size: 25px; } /* 단계 2 */ section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1, { font-size: 20px; } /* 단계 3 */ /* ... 꿈도 꾸지 마라 */
-moz-any(): 를 쓰면
/* 단계 0 */ h1 { font-size: 30px; } /* 단계 1 */ -moz-any(section, article, aside, nav) h1 { font-size: 25px; } /* 단계 2 */ -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 20px; } /* 단계 3 */ -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 15px; }
원저자: Paul Rouget – 원문으로 가기
작성자: Mincheol Im
https://twitter.com/mincheolim
댓글이 없습니다.