Modifying doctype breaks CSS styles

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2024-11-21

I was working on a template for a website and thought the DOCTYPE declaraction was noise so I removed it.

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
  ...
</html>

Later, I noticed that the text in a table's color changed. The DevTools showed "color: -internal-quirk-inherit", causing it to behave differently than without the DOCTYPE.

This DOCTYPE declaraction is in fact necessary if you want to use standards vs. quirks mode - the declaraction tells the browser the version of HTML used in the page. The one below simply means "use HTML5"

<!DOCTYPE html>