When a browser renders an HTML page, it applies basic styles before you’ve even written a single style.
While all browsers apply their basic styles, each browser has its specific styles different from other browsers, and that, of course, causes an inconsistency problem.
Which approaches do you use to tackle this problem?
Do you try to provide cross-browser consistency in the default styling by using some libraries like Normalize CSS?
Do you reset all the default browser styles completely using something like Reset CSS and then style everything from scratch?
Or do you write your own set of rules by using some kind of combination of rules from both approaches?
Top comments (5)
I am not even sure if not normalizing at all is safe in the latest browsers...
normalize.cssis more safe for Markdown as well, and I think it is much less invasive and opinionated than classless CSS.CSS resets might be better and smaller, as well as make CSS more manageable, if you don't work with Markdown.
I am currently not sure if I need normalize.css or CSS resets in shadow DOMs.
For simpler projects I always do simple resets like resetting padding, border, box-sizing before doing anything.. for more complex layouts I would mostly bring in some extended css reset rules ;)
With bigger projects I greatly prefer Normalize. For smaller projects I "normalize" as needed.
I've never liked resets as they often feel like they force you to do more work with some basic stuff such as setting up how regular content should be styled which is where I find defaults to work just fine. In general this how I think about normalizing: with normalize you define the main content styles and all the other styles are the exceptions for UI components.
In the other kind of viewpoint global resets are also the lazy way to go: instead of learning where you need to override the defaults you instead avoid learning the stuff you should know as a web dev. Such as what styles list elements have by default so you can know how to deal with them if you need to.
Related to resets (in my opinion) is also the "avoid semantic elements" mindset. In that case you see devs using mostly just divs and spans, maybe some other elements with no default styles such as header and main. This is like resets but you re-implement the web and end up using tons of ARIA attributes to redo native functionality like buttons or lists. This results into some good native features missing. Great example of this: Twitter and middle clicks not working to open a tweet into a new tab. Their use of semantic HTML is minimal. On initial page you have about 1000 divs, 200 spans, 80 svgs, 60 links, 8 articles, 5 h2 elements, 3 h1 elements, 0 buttons, 0 lists of any type, 0 h3 - h6 elements, 0 sections...
One of the things that might interest me in the future is the use of custom CSS properties, because you could use them to define context based normalization via simple utility classes for example. And I think this would happen without specificity issues. Haven't had much time to work with CSS stuff in the recent years but I guess that'll change soon :)
As for actual differences between browsers... well, these days the issues are kinda minimal. The worst special kid around is iOS Safari. And IE11 if you still support it, but it is becoming rather dead by now.
Thanks for your insight, Vesa :)
I always aim to use the smallest CSS footprint I can. I only normalise delicately and minimally. Reset??!? ask Sugar Brown - Ain't nobody got time for that!
Each browser has it's own eco-system - and appearance, and quirks, and your users chose their (current!) browser (by accident, carefully, because they wanted a change, because it was mandated, for a (insert special reason) we cannot imagine...)
If you want your app/website/opinion to appeal to these different eco-systems of users, then let them have their bigger fonts, brighter colours, higher contrast, accessibility...
I used to be a detective in the Pixel Police, obsessed with single pixel alignment... and the mathematical relationships between colours - but I've learnt that change is inevitable, and trying to coerce the world into a single specific vision for all time is futile.
:) $0.02