Quirks 모드

Quirks mode
HTML
비교

컴퓨팅에서 퀴크스 모드는 표준 모드에서 W3C와 IETF 표준을 엄격히 준수하는 대신 오래된 웹 브라우저용으로 설계된 웹 페이지와의 역호환성을 유지하기 위해 일부 웹 브라우저가 사용하는 기법이다.

개요

웹 페이지의 구조와 모양은 두 가지 표준화된 언어를 조합하여 설명한다.

  • HTML, 웹 사용을 위해 설계된 마크업 언어로서 페이지의 구조와 내용을 설명한다.
  • 일반화된 스타일시트 언어인 CSS는 페이지를 다양한 매체에서 렌더링하는 방법(화면 디스플레이를 위한 시각적 스타일, 페이지를 인쇄할 때 사용하는 인쇄 스타일, 화면 리더가 페이지를 소리내어 읽을 때 사용하는 청각적 스타일 등)을 명시한다.

그러나 대부분의 구형 웹브라우저는 이러한 언어에 대한 사양을 완전히 구현하지 않았거나 사양의 최종화에 앞서 개발되었다(예를 들어 2000년에 출시된 Macintosh 플랫폼용 Microsoft Internet Explorer 버전 5.0은 예를 들어 CSS 레벨 1을 완벽하게 지원하는 최초의 주요 웹 브라우저였다).[1]결과적으로, 많은 오래된 웹 페이지는 오래된 브라우저의 불완전하거나 부정확한 구현에 의존하도록 구성되었고, 그러한 브라우저가 처리할 때만 의도한 대로 렌더링된다.

주요 웹브라우저에서 표준화된 HTML과 CSS에 대한 지원은 크게 증가했지만, 표준화된 HTML과 CSS에 대한 지원을 개선하고자 하는 브라우저 개발자들에게는 오래된 브라우저와 CSS에 의존하는 많은 레거시 문서들은 장애물이 되고 있다.장식한 페이지또한, 브라우저 개발자들에 의해 도입된 호환성 해결책은 표준화된 방법에 대한 이해가 엄격하게 필요하지 않다는 것을 의미하기 때문에 많은 새로운 웹 페이지는 이전 방식으로 계속해서 만들어지고 있다.

가능한 가장 많은 수의 웹 페이지와의 호환성을 유지하기 위해, 현대의 웹 브라우저는 일반적으로 다중 렌더링 모드로 개발된다: "표준 모드"에서는 HTML과 CSS 사양에 따라 페이지를 렌더링하고, "Quirks 모드"에서는 구형 브라우저의 동작을 모방하려고 시도한다.일부 브라우저(예를 들어, 모질라의 게코 렌더링 엔진 또는 엄격한 모드의 Internet Explorer 8에 기반한 브라우저)도 "대부분의 표준" 모드를 사용하며, 이 모드에서는 둘 사이의 절충을 시도하여 표 셀 사이징에 대해 하나의 기어를 구현하면서 규격에 부합한다.[2]

모드 차이 및 예제

퀴크와 표준 모드 사이의 두드러진 차이점은 CSS Internet Explorer 박스 모델 버그의 처리다.버전 6 이전에, Internet Explorer는 CSS 규격에 자세히 설명되어 있는 알고리즘과 충돌하는 요소 박스의 폭을 결정하는 알고리즘을 사용했고, Internet Explorer의 인기로 인해 이 비표준 알고리즘에 의존하는 많은 페이지가 생성되었다.버전 6을 기준으로 Internet Explorer는 표준 모드에서 렌더링할 때 CSS 규격의 알고리즘을 사용하고, 퀴르크 모드에서 렌더링할 때는 이전의 비표준 알고리즘을 사용한다.[citation needed]

또 다른 주목할 만한 차이점은 특정 유형의 인라인 콘텐츠의 수직 정렬이다. CSS 규격에 따라 박스 내 텍스트의 기준선에 맞춰 정렬해야 하지만, 많은 오래된 브라우저들은 해당 이미지를 포함하는 상자의 하단 테두리에 정렬했다.표준 모드에서는 게코 기반 브라우저가 기준선에 정렬되고, 퀴크 모드에서는 하단에 정렬된다.[3]

또한, 많은 오래된 브라우저들은 테이블 내에서 글꼴 스타일의 상속을 구현하지 않았다. 그 결과, 글꼴 스타일은 문서 전체에 대해 한 번, 그리고 테이블에는 다시 한 번 명시되어야 했다. CSS 규격에 따라 글꼴 스타일링이 테이블로 이어져야 함에도 불구하고 말이다.글꼴 크기가 상대 단위를 사용하여 지정된 경우, 표준 준수 브라우저가 기본 글꼴 크기를 상속한 다음 표에 상대 글꼴 크기를 적용하십시오. 예를 들어, 기본 글꼴 크기를 80%로 선언하고 테이블 글꼴 크기를 80%로 선언한 페이지(글꼴 크기를 적절하게 상속하지 않는 브라우저에서 80%로 보장).표준 준수 브라우저, 64%(80%의 80%)의 글꼴 크기를 가진 표 표시결과적으로, 브라우저는 일반적으로 폰트 크기를 키르크 모드에서 테이블로 상속하지 않는다.[4]

거의 표준 모드

CSS2 규격에 따라 테이블 셀의 "전통적인" 수직 사이징을 유지하는 "거의 표준 모드" 또는 "엄격한 모드"[2]로 알려진 세 번째 호환성 모드가 사파리, 오페라 7.5(이상), 1.0.1(Firefox 등) 이후 모든 게코 기반 브라우저에서 구현되었다.

"대부분의 표준" 모드 렌더링은 하나를 제외한 모든 세부사항에서 "표준" 모드와 일치한다.테이블 셀 내부의 이미지 레이아웃은 대신 "quirks" 모드가 작동하는 것과 동일한 방식으로 처리되며, 이는 Internet Explorer 7(이하 이전)과 같은 기존 브라우저와 상당히 일치한다.즉, "표준" 모드가 아닌 "쿼드" 모드 또는 "대부분의 표준" 모드일 때 브라우저에서 축소 이미지 레이아웃이 분리될 가능성이 낮다는 것을 의미한다.[5]

다양한 렌더링 모드 트리거

대부분의 경우 브라우저는 페이지의 문서 유형 선언의 존재에 따라 사용할 렌더링 모드를 결정한다. 전체 DOCTYPE이 있으면 브라우저가 표준 모드를 사용하고 브라우저가 없는 경우 쿼크 모드를 사용한다.예를 들어, 다음의 DOCTYPE으로 시작한 웹 페이지는 표준 모드를 트리거한다.

<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd>

다음 DOCTYPE은 공용 식별자 키워드 "PLOCAL"을 포함하지만 공용 식별자(사용 중인 HTML 버전의 이름을 나타냄)는 포함하지 않고 HTML 문서 유형 정의의 시스템 식별자 URL은 포함하지 않는 구문적으로 유효하지 않다.이렇게 하면 퀴크 모드가 트리거된다.

<!DOCTYPE html Public>

또한 DOCTYPE을 전혀 포함하지 않는 웹 페이지는 퀴크 모드로 렌더링된다.

이에 대한 한 가지 주목할 만한 예외는 마이크로소프트의 Internet Explorer 6 브라우저로, 전체 DOCTYPE의 지정 여부와 관계없이 XML 프롤로그가 선행되는 경우 페이지를 특이한 모드로 렌더링한다.따라서 다음 코드로 시작하는 XHTML 페이지는 IE 6에 의해 퀴크 모드로 렌더링될 것이다.

<?xml 버전="1.0" 인코딩="utf-8"?> <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strong//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>

위 내용은 IE 6에서만 퀴크 모드를 트리거하는 데 사용할 수 있기 때문에 어느 정도 유용하다.

예를 들어, 하이퍼텍스트 문서에 DOCTYPE 선언 전에 주석, 공백 또는 태그가 포함된 경우 IE는 다음과 같은 Quirks 모드를 사용한다.

<!-- 이 코멘트는 IE 6, 7, 8, 9를 퀴크스 모드로 만들 것이다. --> <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01/EN" http://www.w3.org/TR/html4/strict.dtd>

XML 선언의 문제는 단순히 XML 프롤로그가 무시되는 Internet Explorer 버전 7에서 수정되었다.[6]그러나 XHTML 규격을 유지하는 World Wide Web Consortium은 기존 및 이전 웹 브라우저와의 최대 호환성을 위해 XHTML 문서의 작성자들이 XML 선언의 생략을 고려할 수 있다고 제안한다.[7]

문서 유형 비교

앙리 시보넨은 페이지가 Quirks, Standards 또는 Bear Standards 모드로 렌더링되는지 여부를 보여 주는 다양한 문서 유형과 가장 일반적인 브라우저에서 처리되는 방법의 목록을 작성했다."대부분 표준 모드"에 사용되는 기준은 비표준 테이블 셀 높이 렌더링이다.이 표는 Content-Type 텍스트/html과 함께 제공되는 콘텐츠에 적용된다.Content-Type 애플리케이션/xhtml+xml과 함께 제공되는 콘텐츠는 Chrome, Firefox, Internet Explorer 9, Safari 및 Opera에서 Standards 모드로 렌더링된다.Internet Explorer 6, 7, 8은 Content-Type 응용 프로그램/xhtml+xml을 지원하지 않는다.[2]

독타입 NS6 모질라 0.9.5-1.0 IE 8+
파이어폭스
크롬
사파리
오페라 7.5+
넷스케이프 7+
모질라 1.0.1+
콘크 3.5+
HTML5 사양		 IE 7
오페라 7.10		 IE 6
오페라 7.0		 맥 IE 5 콘크 3.2
없음 Q Q Q Q Q Q Q
HTML 2
<!DOCTYPE HTML Public "-/IETF//DTD HTML 2.0//EN" >
Q Q Q Q Q Q Q
HTML 3
<!DOCTYPE HTML Public "-//IETF//DTD HTML 3.0//EN/">
Q Q Q Q Q Q Q
HTML 3.2
<!DOCTYPE HTML Public "-//W3C//DTD HTML 3.2 Final/EN" >
Q Q Q Q Q Q Q
HTML 4.01
엄격한 시스템 식별자 포함
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
S S S A A A A
시스템 식별자 미포함
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01/EN">
S S S A A Q A
과도기 시스템 식별자 포함
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transition//EN" "http://www.w3.org/TR/html4/loose.dtd">
S S A A A A Q
시스템 식별자 미포함
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transition//EN" >
Q Q Q Q Q Q Q
HTML5 
<!DOCTYPE html>
Q S S A A A ?
XHTML 기본
XML 선언 없이 시스템 식별자 포함
<!DOCTYPE html Public "-//W3C//DTD XHTML Basic 1.0//EN "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
S S S A A A A
XHTML 1.0
엄격한 시스템 식별자 및 XML 선언 포함
<?xml 버전="1.0" 인코딩="UTF-8"?> <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strong//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
S S S A Q A Q
XML 선언 없이 시스템 식별자 포함
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strong//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
S S S A A A A
시스템 식별자 및 XML 선언이 없는 경우
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strong//EN">
S S S A A A ?
과도기 시스템 식별자 및 XML 선언 포함
<?xml 버전="1.0" 인코딩="UTF-8"?> <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Transition//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
S S A A Q A Q
XML 선언 없이 시스템 식별자 포함
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Transition//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
S S A A A A Q
시스템 식별자 및 XML 선언이 없는 경우
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Transition//EN">
S S A A A A ?
XHTML 1.1
시스템 식별자 및 XML 선언 포함
<?xml 버전="1.0" 인코딩="UTF-8"?> <!DOCTYPE html Public "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
S S S A Q A Q
XML 선언 없이 시스템 식별자 포함
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
S S S A A A A
독타입 NS6 모질라 0.9.5-1.0 IE 8+
파이어폭스
크롬
사파리
오페라 7.5+
넷스케이프 7+
모질라 1.0.1+
콘크 3.5+
HTML5 사양		 IE 7
오페라 7.10		 IE 6
오페라 7.0		 맥 IE 5 콘크 3.2

모드확인

대부분의 브라우저에서 Document Object Model 확장document.compatMode는 현재 페이지의 렌더링 모드를 나타낸다.표준 모드와 거의 표준 모드에서는 document.compatMode가 "CSS1Compat" 값을 포함하지만, quirks 모드에서는 "BackCompat"[8]과 같다.

또한 Mozilla Firefox 및 Opera에서는 주어진 페이지에 사용 중인 렌더링 모드가 '페이지 정보' 정보 상자에 표시된다.

참조

  1. ^ "Cascading Style Sheets: CSS Browsers". World Wide Web Consortium. 19 December 2001. Retrieved 27 May 2007.
  2. ^ a b c Sivonen, Henri. "Activating Browser Modes with Doctype". Retrieved 15 March 2011.
  3. ^ "Images, Tables, and Mysterious Gaps". Mozilla Developer Center. Archived from the original on 22 May 2017. Retrieved 27 May 2007.
  4. ^ "Fixing Table Inheritance in Quirks Mode". Mozilla Developer Center. Archived from the original on 3 March 2016. Retrieved 27 May 2007.
  5. ^ "Gecko's "Almost Standards" Mode". Mozilla Developer Center. Archived from the original on 3 June 2004. Retrieved 27 May 2007.
  6. ^ Wilson, Chris (15 August 2005). "The <?xml> prolog, strict mode, and XHTML in IE". IEBlog. MSDN. Retrieved 27 May 2007.
  7. ^ "HTML Compatibility Guidelines". XHTML 1.0 The Extensible HyperText Markup Language (Second Edition). World Wide Web Consortium. 1 August 2002. Retrieved 14 February 2009.
  8. ^ Koch, Peter-Paul (2 February 2009). "Miscellaneous". W3C DOM Compatibility - HTML. QuirksMode. Retrieved 14 February 2009.

외부 링크