Default Browser Styles Should be the new Quirks Mode

As virtually every web developer knows, default CSS styles vary widely between browsers. Whether it’s the rounded, gradient based looks present in Safari or the more blocky one used by IE and Firefox, these differences end up leaving developers stuck using resets to get everything back to normal.

Which makes me wonder:

Would it work better if we just… disabled the default browser styles in many circumstances?

Because at the end of the day, they’re not relevant for most websites. They’re just there in case the site doesn’t have any styles of its own. As a way to make an unstyled page look better than a giant block of grey text.

All they do for styled websites is add more lines of unneeded CSS and give authors grief over browser compatibility issues.

So perhaps the solution would be for browsers to have two modes. One mode is for unstyled pages, and is applied whenever CSS is disabled or reader more activated on a page. This one uses the default stylesheet, and provides a nice looking fall-back for those who don’t want custom styles interfering with the content.

Image for post
Image for post
Sites like this one could then use default browser styles as normal

However, when a style element or stylesheet link is present, the page should then go to ‘no default CSS’ mode, similar to how quirks and standards mode worked in IE. In this view, all default styles are non-existent, and it’s up to the author to style every element on the page, bar maybe a few UI features like scrollbars and select box arrows.

Image for post
Image for post
Meanwhile, sites using frameworks like Bootstrap could simply use the framework as the base, without any defaults to override

And it could go even further than that. Maybe another attribute or meta tag could activate ‘blank canvas UI’ mode, which nukes all styles for UI elements too. Select areas, date pickers, range bars, scroll bars and mouse cursors… literally every aspect of the screen is left unstyled for the author to do what they like with. That way, websites can compete with native apps in terms of style, and authors won’t be stuck fighting over what’s part of the page and what’s part of the browser UI.

Image for post
Image for post
Web apps like Photopea could control every little aspect of the page and browser UI design, for a more native app esque look

It’d be more efficient, easier to work with, and provide a solution that works for everyone, whether they be browser developers or users.

But what do you think? Would it work better if browsers let you disable the default stylesheet applied to each page? Or had it set up so it only ran if a CSS file wasn’t loaded/styles were disabled in the browser?

Tell me your thoughts on the matter in a comment below.

Gamer, writer and journalist working on Gaming Reinvented.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store