What Is Quirks Mode? 🤔

One of the main themes in the Photics Web Guide, is how the Internet has changed. In many ways, becoming a web developer or web designer today is far more difficult. But in other ways, it’s actually easier. “Quirks Mode” is a prime example. The topic originates with the very start of an HTML document. At the top, the first line should contain… <!DOCTYPE html> …which declares the document as an HTML document. So, what happens if you don’t include that declaration?!

That’s what triggers “Quirks Mode”. It’s an appendage from an earlier time. While this website has been around since the days before Internet Explorer 5, that browser is no longer supported here. Neither is Netscape Navigator 4. Backwards compatibility for those web browsers are not a concern. And since this website uses WordPress, the HTML declaration is automatically managed. It’s basically a nonissue.

But, what if not?! What if the declaration was excluded?

Console Message: Page layout may be unexpected due to Quirks Mode

With the declaration removed, the document is shown in “Quirks Mode”. Since the test page was so basic, I didn’t notice a difference. But when looking at the console, there was a blue alert icon. Having seen many red or yellow alerts, this blue speech bubble icon was a bit of a surprise. The text was informational though.

One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications.

It’s a legacy issue. It’s so old it’s almost a matter for historians or archaeologists, digging up old Macintosh Quadras, running software from the previous century. The next part of the message confirms it.

Quirks Mode exists mostly due to historical reasons. If this is not intentional, you can add or modify the DOCTYPE to be `<!DOCTYPE html>` to render the page in No Quirks Mode.

It is a matter of memorization. Even if you don’t remember the exact characters to use to declare an HTML document, it’s important to know that something specific is supposed to go at the top of an HTML document. Yet, it’s been way less of a hassle in the second quarter of the 21st century. While not perfect, modern web browsers are better at meeting web standards.

“What Is Quirks Mode?” is a related Photics.TV video on this topic.