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.
<html>
<head>
<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">
<title>Document</title>
</head>
<body>
</body>
</html>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:
- Quirks mode
- Almost standards mode
- 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…
