쿼크 모드

1. 소개

1.1. 연혁

브라우저는 HTML 문서를 렌더링할 때 여러 렌더링 모드를 가지고 있습니다. 이는 기본적으로 역사적 우연의 결과입니다. CSS 명세는 기존 웹 콘텐츠가 의존하던 기존 브라우저의 동작과 호환되지 않았습니다. 명세를 준수하면서도 기존 콘텐츠를 깨뜨리지 않기 위해 브라우저들은 새로운 렌더링 모드(비-쿼크 모드, no-quirks mode)를 도입했습니다. 일부 브라우저는 비-쿼크 모드에서도 테이블 셀 안 이미지의 shrink-wrapping 동작을 유지했으며, 사이트들이 이에 의존하기 시작하자 명세의 동작을 구현한 브라우저들은 세 번째 모드(제한적 쿼크 모드, limited-quirks mode)를 도입했습니다. 돌이켜 보면, 기본 CSS 동작을 기존 콘텐츠가 의존하던 방식에 맞추고, 다른 동작에 opt-in하는 것이 더 나았을 것입니다. 이후 서로 다른 모드는 CSS 외의 몇 가지 차이점도 생기게 되었습니다.

1.2. 목표

• 오래된(또는 특정 프라그마가 있는 경우 새로운) HTML 문서의 렌더링 명세를 작성합니다.

  HTML 명세는 정의하고 있으며, 문서가 쿼크 모드, 제한적 쿼크 모드 또는 노 쿼크 모드로 설정되는 시점을 다룹니다. [HTML]

• 웹 호환성에 필요하지 않은 쿼크를 구현에서 제거합니다.

  예를 들어, Gecko는 리스트 항목 불릿 크기에 관한 쿼크를 제거했고, Chromium은 table 요소에서 display가 table 또는 inline-table로 강제되던 쿼크를 제거했습니다.

• 웹 호환성에 필요한 쿼크에 대해서는 상호운용성을 확보합니다.

  예를 들어, Gecko는 :active 및 :hover 쿼크의 구현을 이 명세에 맞추어 다른 브라우저들과의 상호운용성을 높였습니다.

• 가능하다면, 쿼크가 새로운 기능에 전파되지 않도록 고정된 레거시 기능 집합으로 제한합니다.

  예를 들어, § 3.1 해시 없는 16진수 색상 쿼크는 쿼크가 SVG의 색상 속성이나 문법이 애매해질 수 있는 CSS 그라디언트에 적용되지 않도록 고정된 CSS 속성 집합에만 한정되어 있습니다.

이 명세는 현재 브라우저에 존재하는 모든 쿼크를 나열하지 않습니다. 여러 쿼크는 HTML, DOM, CSSOM, CSSOM View에서 명세화되어 있습니다. [HTML] [DOM] [CSSOM] [CSSOM-VIEW] 명세화되어 있지 않은 쿼크는 위 두 번째 항목 때문일 가능성이 높습니다.

2. 공통 인프라스트럭처

2.1. 적합성

이 명세서의 모든 다이어그램, 예시, 주석은 비규범적(non-normative)이며, 명시적으로 비규범적으로 표시된 모든 섹션도 마찬가지입니다. 이 외의 모든 내용은 규범적입니다.

이 명세서의 규범적인 부분에서 "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", "OPTIONAL"이라는 키워드는 RFC2119에 설명된 대로 해석해야 합니다. 가독성을 위해 이 단어들은 모두 대문자로 표기되어 있지 않습니다. [RFC2119]

2.2. 용어

이 명세서에서 "foo 요소"라고 할 때, 이는 지역 이름이 foo이고 네임스페이스가 http://www.w3.org/1999/xhtml인 요소를 의미합니다.

이 명세서에서 "foo 속성"이라고 할 때, 이는 지역 이름이 foo이고 네임스페이스가 없는 속성을 의미합니다.

문서의 body 요소는 문서 요소가 html 요소인 경우 문서 요소의 자식 중 첫 번째 body 요소입니다(존재하는 경우). 그렇지 않으면 null입니다.

문서의 body 요소는 HTML의 the body element와 다릅니다. 후자는 frameset 요소일 수도 있기 때문입니다.

3. CSS

3.1. 해시 없는 16진수 색상 쿼크

CSS Color 4 § B Deprecated Quirky Hex Colors를 참고하세요.

3.2. 단위 없는 길이 쿼크

CSS Values 4 § C Quirky Lengths를 참고하세요.

3.3. 줄 높이 계산 쿼크

쿼크 모드 및 제한적 쿼크 모드에서, 다음 조건을 모두 만족하는 인라인 박스는 줄 높이 계산 시 박스의 line-height가 0인 것처럼 동작해야 합니다.

• border-top-width, border-bottom-width, padding-top 및 padding-bottom 속성의 used value가 0이고 박스가 수직 쓰기 모드를 가지고 있거나, border-right-width, border-left-width, padding-right 및 padding-left 속성의 used value가 0이고 박스가 수평 쓰기 모드를 가지고 있음.

• 텍스트가 없거나, 오직 축소된 공백만 포함함.

3.4. 블록이 line-height를 무시하는 쿼크

쿼크 모드 및 제한적 쿼크 모드에서, 내용이 인라인 레벨 요소로 구성된 블록 컨테이너 요소의 경우, 해당 요소의 line-height는 요소 내에서 최소 줄 상자 높이를 계산할 때 무시해야 합니다.

이로 인해 "strut"이 생성되지 않습니다.

3.5. 백분율 높이 계산 쿼크

쿼크 모드에서 height를 계산하기 위해 element 요소에 대해, element의 계산된 값인 position 속성이 relative, static 또는 sticky이고, element의 height 속성의 지정된 값이 <percentage>이며, element의 계산된 값인 display 속성이 table-row, table-row-group, table-header-group, table-footer-group, table-cell 또는 table-caption이 아닌 경우, element의 컨테이닝 블록은 값을 반환하는 첫 번째 단계에서 중단하면서 다음 알고리즘을 사용하여 계산해야 합니다:

1. element를 element의 가장 가까운 조상 containing block으로 둡니다(존재하는 경우). 그렇지 않으면 초기 containing block을 반환합니다.

2. element가 computed value의 display 속성이 table-cell이면, UA 정의 값을 반환합니다.

3. element가 computed value의 height 속성이 auto가 아니면, element를 반환합니다.

4. element가 computed value의 position 속성이 absolute이거나, element가 블록 컨테이너 또는 테이블 래퍼 박스가 아니면, element를 반환합니다.

5. 첫 번째 단계로 이동합니다.

작성 시점에는 표 내부의 백분율 높이가 CSS에서 어떻게 동작하는지 정의되어 있지 않습니다. 이 명세는 표에서 백분율 높이를 계산하기 위한 컨테이닝 블록으로 무엇을 사용할지 지정하려고 하지 않습니다. 행운을 빕니다!

이 쿼크는 writing mode를 고려해야 합니다.

3.6. html 요소가 뷰포트를 채우는 쿼크

쿼크 모드에서, document element element가 다음 조건을 모두 만족하는 경우:

• element가 html 요소임.

• element의 computed value의 width 속성이 auto이고 element가 수직 쓰기 모드를 가지거나, computed value의 height 속성이 auto이고 element가 수평 쓰기 모드를 가짐. [CSS-WRITING-MODES-3]

...그렇다면 element는 border box 크기를 block flow 방향에 대해 다음 알고리즘을 사용하여 설정해야 합니다:

1. element가 수직 쓰기 모드라면, margins를 used values인 margin-left와 margin-right의 합으로 둡니다. 그렇지 않으면 margins를 used values인 margin-top과 margin-bottom의 합으로 둡니다.

2. size를 초기 containing block의 block flow 방향 크기에서 margins를 뺀 값으로 둡니다.

3. size와 해당 요소가 CSS 명세에 따라 원래 가지는 border box 크기 중 더 큰 값을 반환합니다.

3.7. body 요소가 html 요소를 채우는 쿼크

쿼크 모드에서, 문서의 body 요소 body가 null이 아니고 다음 조건을 모두 만족하는 경우:

• body의 computed value의 width 속성이 auto이고 body가 수직 쓰기 모드를 가지거나, computed value의 height 속성이 auto이고 body가 수평 쓰기 모드를 가짐. [CSS-WRITING-MODES-3]

• body의 computed value의 position 속성이 absolute 또는 fixed가 아님.

• body의 computed value의 float 속성이 none임.

• body는 인라인 레벨 요소가 아님.

• body는 멀티 컬럼 spanning 요소가 아님. [CSS3-MULTICOL]

...그렇다면 body는 border box 크기를 block flow 방향에 대해 다음 알고리즘을 사용하여 설정해야 합니다:

1. body가 수직 쓰기 모드라면, margins를 used values인 margin-left와 margin-right의 합으로 둡니다. 그렇지 않으면 margins를 used values인 margin-top과 margin-bottom의 합으로 둡니다.

2. size를 body의 부모 요소 content box의 block flow 방향 크기에서 margins를 뺀 값으로 둡니다.

3. size와 해당 요소가 CSS 명세에 따라 원래 가지는 border box 크기 중 더 큰 값을 반환합니다.

html 요소와 body 요소의 쓰기 모드가 다를 때 어떻게 동작해야 하는지?

3.8. 테이블 셀 너비 계산 쿼크

쿼크 모드에서, 테이블 셀 cell이 containing block인 inline formatting context의 min-content width를 계산할 때, cell의 computed value의 width 속성이 auto인 경우, 해당 inline formatting context의 img 요소가 인라인 레벨 대체 요소라면, 그 앞뒤에 소프트 줄바꿈 기회가 존재해서는 안 됩니다. [CSS-TEXT-3] [INTRINSIC]

3.9. 테이블 셀 nowrap 최소 너비 계산 쿼크

쿼크 모드에서, 아래 조건을 모두 만족하는 요소 cell은 자동 테이블 레이아웃 알고리즘에서 테이블 셀의 outer min-content width가 cell의 computed value의 width 속성과 테이블 셀의 outer min-content width 중 더 큰 값인 것처럼 동작해야 합니다. [INTRINSIC]

• cell은 td 요소 또는 th 요소임.

• cell에 nowrap 속성이 있음.

• cell의 computed value의 width 속성이 0이 아닌 <length>임.

3.10. 테이블 셀 병합 쿼크

쿼크 모드에서, 아래 조건을 모두 만족하는 요소 table은 used value의 height 속성은 0, used value의 border-style 속성은 none이어야 합니다.

• table의 computed value의 display 속성이 table임.

• table에 자식 table-row-group, table-header-group, table-footer-group 또는 table-caption 박스가 없음.

• table에 자식 table-column-group 박스가 있는데, 그 자식으로 table-column 박스가 없는 경우.

3.11. text-decoration이 테이블에 전파되지 않는 쿼크

쿼크 모드에서, table 요소 내로 텍스트 데코레이션이 전파되어서는 안 됩니다.

3.12. 테이블이 body로부터 색상을 상속받는 쿼크

쿼크 모드에서, color 속성의 초기값은 quirk-inherit여야 하며, 이는 키워드 매핑이 없는 특수값입니다.

요소 element의 computed value의 color 속성은 다음 알고리즘을 사용해 계산해야 합니다:

1. element의 color 속성의 지정값이 quirk-inherit이 아니라면 마지막 단계로 이동합니다.

2. element가 table 요소가 아니라면 마지막 단계로 이동합니다.

3. 문서의 body 요소가 null이라면 마지막 단계로 이동합니다.

4. used value의 color 속성을 문서의 body 요소에서 반환하고, 이 단계에서 종료합니다.

5. element의 color 속성의 지정값이 quirk-inherit이면, element의 color 속성의 지정값을 CSS 명세에 따른 color 속성의 초기값으로 둡니다. computed value의 color 속성을 CSS 명세에서 정의한 대로 반환합니다.

3.13. 테이블 셀 높이 box-sizing 쿼크

쿼크 모드에서, computed value의 display 속성이 table-cell인 요소는, used value의 box-sizing 속성이 border-box인 것처럼 동작해야 하지만, 이는 height, min-height, max-height 속성에 한해서만 적용됩니다.

4. 셀렉터

4.1. :active 및 :hover 쿼크

쿼크 모드에서, 아래 조건을 모두 만족하는 복합 셀렉터 selector는 :any-link 셀렉터에도 일치하지 않는 요소에는 일치해서는 안 됩니다. [SELECTORS4]

• selector가 :active 또는 :hover 의사 클래스를 사용함.

• selector가 타입 셀렉터를 사용하지 않음.

• selector가 속성 셀렉터를 사용하지 않음.

• selector가 ID 셀렉터를 사용하지 않음.

• selector가 클래스 셀렉터를 사용하지 않음.

• selector가 :active 및 :hover 외의 의사 클래스 셀렉터를 사용하지 않음.

• selector가 의사 요소 셀렉터를 사용하지 않음.

• selector가 함수형 의사 클래스나 의사 요소의 인자로 사용되지 않음.

보안 및 프라이버시 고려사항

이 명세에서 알려진 보안 또는 프라이버시 영향은 없습니다.

감사의 글

Anne van Kesteren, Boris Zbarsky, Chris Rebert, Dan Mulvey, David Baron, Kang-Hao Lu, Ms2ger, Simon Sapin, 그리고 Tab Atkins 에게 유용한 의견을 주셔서 감사합니다.

Boris Zbarsky와 David Baron께서는 MDN에서 Mozilla 쿼크를 문서화해주셔서 특별히 감사드립니다.

이 현행 표준은 Simon Pieters (Mozilla, zcorpan@gmail.com)가 작성하였습니다.

지적 재산권

Copyright © WHATWG (Apple, Google, Mozilla, Microsoft). 본 저작물은 Creative Commons Attribution 4.0 International License로 라이선스됩니다. 일부가 소스 코드로 포함되는 경우, 해당 부분의 소스 코드는 BSD 3-Clause License로 라이선스됩니다.

이는 현행 표준입니다. 특허 검토 버전에 관심이 있는 경우 현행 표준 검토 초안을 참조하세요.