The Opera 7 DOCTYPE Switches

While Opera is well capable of showing standards-compliant pages correctly, not all web pages are compliant. To be able to both display all standards-compliant pages and the other pages as well, two different display modes have been added in Opera 7.0: Standards Mode (with IE known as Standards-compliance Mode) and Quirks Mode (essentially an Internet Explorer compatible mode). Which of the two modes is selected depends on which Document Type Declaration (DOCTYPE) the page is using.

Internet Explorer (from 6.0 on for Windows and 5.0 on for Mac) and Mozilla/Netscape (from versions 0.6 and 6.0 respectively) also use DOCTYPE switches. Recent Netscapes have a third mode, an "Almost Standards Mode" that is almost a Standards Mode. Opera 7 uses the same set of rules as IE6 for Windows to determine whether to enter Standards Mode or Quirks Mode.

DOCTYPEs that will trigger standards compliant behavior in Opera 7, IE6 for Windows, and Netscape 7
Document type Example Document Type Declaration URL present URL absent
No DOCTYPE Quirks Quirks
HTML (No version) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML//EN" "http://www.w3.org/TR/html/loose.dtd"> Quirks Quirks
HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> Quirks Quirks
HTML 3.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN//"> Quirks Quirks
HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Quirks Quirks
HTML 4.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> Standards Standards
HTML 4.0 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> Standards [1] Quirks
HTML 4.0 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> Standards [1] Quirks
HTML 4.0 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> Standards Standards
XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "xhtml-basic10.dtd"> Standards [2] Standards [2]
WML 2.0 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD WML 2.0//EN" "http://www.wapforum.org/DTD/wml20.dtd"> Standards [3] Standards [3]
XML Standards Standards
Unrecognized DOCTYPE Standards Standards

[1] Triggers Quirks mode for Netscape
[2] When XHTML is delivered as text/html and includes the XML declaration, Quirks mode is triggered for IE and Opera 7.0-7.03. From Opera 7.1 on, the XML declaration, PIs, and comments are ignored for determining display mode. When delivered as XML, both Opera and IE use Standards mode.
[3] Only Opera recognizes the WML doctypes

Determining Current Mode with JavaScript

Like IE 6.0 and Netscape 6+, Opera supports the JavaScript property document.compatMode. When a page is rendered according to Quirks Mode, this property is set to "QuirksMode" ("BackCompat" for the other browsers), in Standards Mode it is set to "CSS1Compat".

Designing for Quirks and Standards Mode

Quirks Mode enables Opera to display existing invalid pages. If you make pages from scratch, your best option is to make them standards-compliant and use a DOCTYPE to ensure Standards Mode, but see "Incompatible renderings" below. You may have to add workarounds.

If you have existing pages and they are only tested with Netscape 4 and IE, going for Quirks Mode may be a safer bet initially. If after testing a page looks good in these browsers and in Opera 7 in Standards Mode as well, you may safely change to Standards Mode.

There will not be a complete list of rendering differences of Opera in Quirks Mode and in Standards Mode. This will continously change with whatever standards divergences are common at any given time. The rendering in Standards Mode will always follow the standards. Below are some of the most important differences. They are mostly in one of two categories:

Authoring error corrections
The two modes are unlikely to cause problems. As long as you avoid making these errors, there won't be any difference in either mode, or with any browser.
Incompatible renderings
These you should be aware of. The Quirk mode and legacy browser rendering is different from the standards-compliant rendering. There are cross-browser workarounds for all of these incompatibilities. Without them a page Netscape 4 and/or IE 4.0-5.5 for Windows will display pages in Standards Mode differently from Opera and newer versions of NS and IE. In Quirks Mode all of these browsers will have the same behavior, but other standards-compliant browsers without DOCTYPE swiching will render them according to the standards.

CSS size and position properties specified without a unit

Unit-less numbers in CSS (e.g. "width: 300") are interpreted as pixels in Quirks Mode and ignored in Standards Mode.

CSS size and position properties with a space between the number and the unit

Spaces between the number and unit (e.g. "width: 45 em") is not valid CSS. Opera 7 allows this in Quirks Mode and ignores properties with invalid lengths in Standards Mode.

CSS class and ID selectors starting with a number

A class or id must begin with a letter or an underscore, not with a number (e.g. <div class="2">). Opera 7 ignores such selectors in Standards Mode, but allows class names starting with a number in Quirks Mode.

The 'height' attribute in table rows (7.0-7.11)

The HTML 'tr' element doesn't have a 'height' attribute. Opera 7.0-7.11 only allowed this attribute in Quirks Mode, Opera 7.2 and later also allows 'height' in Standards Mode.

Vertical overflow in block elements with a specified height

In Quirks Mode, Opera will expand the block element to fit the content. In Standards Mode, Opera 7 honours the height and applies the style overflow:visible if nothing else is specified.

CSS properties are inherited into tables in Standards Mode

A bug IE/Win and Netscape 4 share is that CSS properties aren't inherited into tables. Opera emulates this bug in Quirks Mode, but not in Standards Mode.

Inline elements with a specified width are replaced by an inline block in Quirks Mode

The CSS 'width' property should be ignored for inline elements. In Quirks Mode assigning a width to an inline element changes the display type to inline-block.

CSS font sizes are increased by one in quirks mode compared to Standards mode

In Internet Explorer/Windows (except IE6 in standards compliant mode) font-size: small is interpreted as the initial font size. Opera in Quirks Mode emulates this behavior, but uses font-size: medium in Standards Mode. This means that the absolute font size keywords are "one size larger" in Quirks Mode.

Opera 7.0 is case-sensitive for CSS class and ID selectors in Standards mode

In Strict mode, class="CLASS" is different from class="class", and the CSS selector *.CLASS will only select the former. In Quirks Mode, case doesn't matter and *.CLASS will match both. Likewise, id="id" is different from id="ID" in Standards Mode, but not in Quirks Mode.

Box-sizing is based on the IE/Windows border-box model in quirks mode

The CSS 'width' property specifies content width. In IE/Win 3.0-5.5 it specifies content width + padding width + border. The same applies to the 'height' property. Opera in Quirks Mode emulates this behavior. Opera 7 and IE/Mac, but unfortunately not IE/Win, support the box-sizing CSS property proposed for CSS 3. Netscape and Mozilla supports the equivalent -moz-box-sizing property.

The margins of the containing box are subtracted when computing percentage widths

In quirks mode, the CSS properties 'margin-left' and 'margin-right' is subtracted from the width of containing box when computing percentage widths, not so in Standards Mode.

Overriding the DOCTYPE Switch

Normally the DOCTYPE Switch determines which mode is used, but you can set Opera to always use Standards Mode or always use Quirks Mode by setting one of these lines in the opera6.ini file:

Always Quirks Mode:
CompatMode Override=1
Always Standards Mode:
CompatMode Override=2

If you design Web pages, setting Opera to always using Standards Mode will help you see how a page will look like in a browser not supporting DOCTYPE switching.

WML 2.0 and DOCTYPE Switching

WML 2.0 uses a special form for DOCTYPE switching. In most respects WML 2.0 is XHTML Basic with some WML extensions and it uses the same namespace as XHTML Basic. In a few cases the WML behavior differs from XHTML, such as the handling of WML variables and $ escaping. See the WML 2.0 Specification for details.

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.