Quirks mode vs IDE - how to lose all day by Live Templates

Jul 16, 2022 2 minutes read
Photo by Yan Krukov - pexels.com

Everyone uses some IDE. Many developers use the facilities offered by advanced text editors. One of the advantage is Live Templates which comes by default in Jetbrains IDE, VSC and others. Live Templates save our time and support fast code writing. And because of them, I lost a day looking for bugs in the code.

Doc template

The matter is simple, in JetBrains and VSC there is a template called doc. It generates html document skeleton, so when you create a new web app you probably have used that. Below there is a code generated by this template.

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


And what's wrong here? At first glace it looks fine. But… the missing part is <! DOCTYPE html>. It means that browser will trigger the Quirks mode. In MDN docs you can find that you should always avoid quirks mode, and the only way to prevent it is to declare the HTML doctype. If you check your website with the Google Lighthouse it will probably suggest you that the HTML doctype is missing, but while you developing app locally you might miss that.

Browser modes

There are 3 different modes supported in a browser:

  1. Quirks mode
  2. Almost standards mode
  3. Full standards mode

Quirks mode effects

Well, most modern browsers could handle that, but not for all css rules. Once you are in quirks mode you can feel like everything is going well, but some parts of your styled structure could not work as intended and you will try to find out by adding more css rules to fix an issue. It can cause you play with CSS over and over again…

Disclaimer: The opinions expressed here are my own and do not necessarily represent those of current or past employers.
Comments (0)