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, which is applied whenever CSS is disabled or reader more is 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.
Above: Pages like this one could still use default styles
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.
Above: Meanwhile, a site like Bootstrap's one could disable all default CSS, with the exception of minor UI things like browser scroll bars
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.
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.