I have read this Stack Overflow question on differences between Normalize.css vs Reset CSS, but it doesn't mention when which approach should be used. To me, it seems like normalize.css has way more advantages over Reset CSS.
I can't think of a situation where I would use Reset CSS over normalize.css. Does anyone know of any reason or use case where using Reset CSS is more suitable?
A reset should be more durable when browsers change their default styles. Useful if you're going for complete control over the look
And if you're going for a minimalist style, a reset might be closer to your final style than normalize is
But I mostly agree: if you want a non-ugly website with less effort (and nicer debugging), normalize is a better starting point
Related
So I'm making a website using Middleman, which I'm trying out for the first time, and just getting my teeth into Susy and Compass, which I plan on using with it. I am not familiar with these tools and was curious if anyone knew whether the reset utilities Compass provides cascade over any of the CSS rules from HTML5 Boilerplate (mainly those from normalize.css). Does anyone know?
You choose whether to use compass/reset or normalize.css. Using both at the same time does not make sense. The reset basically sets the same properties on all elements, then you add your styles on top. What normalize does is that it only sets the properties that vary between browsers to one common set. The difference becomes obvious with elements like <strong>, <em> or <ul>: Using reset, they will just be “plain” text. No list indicators, no paddings, no margins, no bold, no italics. Using normalize, they will look as you would expect them to look: bold, italicized, like a list, etc.
When using normalize.css, you can either use the compass normalize plugin or just download normalize.css and #include it at the top of your SCSS/Sass file. Then, don’t include compass/reset.
The reset included in Compass style is the Eric Meyer's one (version 2.0).
I'm not familiar with HTML5 Boilerplate. Although I know they are a set of good practices, I've never seen myself on need of using it. I like to build my own boilerplates.
After reading the source code of normalize.css and the Eric Meyer's reset I found you will have some colliding rules.
I'd say that if you're interested on keeping normalize.css over the reset mixin just include normalize.css after it.
I'm using meyerweb css reset. It works fine, but it resets all default styles, which is in the body and template structure (<body>, sidebars, etc...) or in the main content (articles)
It's a big problem! because I've styled my text in the editor (TinyMCE), but on the main page, it loses all of the styles, such as strong, italic or (un)ordered lists.
How can I solve it? Can I tell the browser to reset all except elements which are in a table or div with a specific class or ID (such as #content)?
Thanks.
You ran across one of the downsides of using reset sheets, in that they reset everything.
You may want to consider using an alternative to full resets, such as normalize.css. The idea behind this is that instead of having all browsers start off at a clean slate, get all of them to the same baseline. From the website:
What does it do?
Preserves useful defaults, unlike many CSS resets.
Normalizes styles for a wide range of HTML elements.
Corrects bugs and common browser inconsistencies.
Improves usability with subtle improvements.
Explains what code does using detailed comments.
This may (or may not) work better for you than the Meyer reset.
The best way to go about this, in my opinion, would be to re-define the styles after the reset as opposed to removing them from the reset. While you shouldn't see any issues with the elements defined above, removing things like ul and li definitions can result in very inconsistent behavior across browsers. Redefining these elements post-reset will ensure uniformity across browsers.
Use http://CSSesta.tk
[It's influenced by YUI, Eric Meyer & Boilerplate but it doesn't interfear with any typical styling aspects]
It has 6 options commented out. (You only need to amend at least opt 3) you can leave change the others if necessary, the rest should be as expected (in general) unless you're making a website that turns into a car.(Things like forcing vertical scroll, line height, font-size are to your discretion)
The HTML5 elements in CSSesta are more up-to date "currently" than Eric Meyers & will probably become the most frequently maintained reset sheet, I know this because I will be updating it.
(Try it, & if you get any problems let me know I'll look at your default one and meet it in between)
I'm not too sure if it is refered to as "Master Reset" but you'll know what I mean.
Ive been using
*{
padding: 0;
margin: 0;
}
With no real problems that I have noticed but ive heard people say that its bad practice to use something like that. So ive looked into reset stylesheets and found this which seems good. But im not sure if its worth using that if there are no problems with using *{foo:bar;}
I hear some people say that in some browsers it messes up with the styling of form inputs. I used to use this, until I stumbled across the meyer reset, which just seemed like a safer, proven approach.
There are arguments for and against CSS resets. The general idea is that by "zeroing-out" all properties you're given a consistently blank canvas across all browsers to which you can apply your custom styles.
The problem with using a reset is that everything will be reset - so, you need to specify custom styles for everything, or at least everything you're going to be utilising within your site.
Read Snook's view: http://snook.ca/archives/html_and_css/no_css_reset/
I often see sites with odd styles applied in commenting systems. For example, I might leave a comment with a <code> tag and because the site uses a css-reset the code tag has no special styling, making it visually pointless. This is only a problem with those full-on resets, like Meyers or Yahoos. Developers forget to apply styles to reset elements... Your flat-reset, while simple, has other ramifications.
In my opinion it's better to have no reset and just style each element on top of default styles offered by the browser.
I think this is just personal preference, the more complex your styles get the more it matters and a more specific reset style sheet may matter. All that matters is that your sites look like they should across all reasonable browsers (and by reasonable at this point I'm not including anything IE6 or prior).
I've switched to only a handful of resets to handle negative margins in extreme cases, otherwise most current browsers seem to be pretty consistent, a very different ecosystem than a few years ago.
I am trying to figure out the most efficient way to ensure cross-browser compatibility. I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number. Is there a way to make a CSS work for any browser or is it better to just develop multiple CSS and add code to choose which to use based on the browser being used?
You might consider using a CSS Framework such as Blueprint. It includes a CSS reset that should help.
Also, you might want to look at Yahoo's CSS reset
An aside to clarify a point:
... I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number....
Sorry, but that's not a Mozilla limitation, it's in the CSS spec: class names must not start with a number. Any browser that allows them to isn't enforcing the rules properly.
Answered here on StackOverFlow. The relevant part of the spec is at http://www.w3.org/TR/CSS21/syndata.html#characters (see the 2nd paragraph).
To answer your question: There is no way to make a page using just one universal css and have it displayed equally in all browsers, unless you only use an extremely small sub-set of all available css (selectors, values, etc.).
The way I work is:
Use a css reset
Develop for a browser that adheres to the standards pretty well (Firefox, Chrome, Safari, Opera)
Patch things up for IE using conditional comments (because you'll probably need things that don't validate)
A good starting point would be to use CSS reset such as: http://developer.yahoo.com/yui/reset/
Your goal should be CSS that works on all browsers. If you start out with a CSS file per browser, where do you stop? Mobile Safari? Flock? Konqueror? Every version of every supported browser?
Eventually, you might need to compromise, but you can cross that road when you get there.
Regardless of your infrastructure/framework/etc you should test your code on all major browsers. If possible avoid using style sheets for browser specific problems. Browsers will change and adapt which means you might get stuck having to update a bunch of websites when new browsers come out.
CSS is a fickle beast and I haven't found any solution that covers all the quirks except for a lot of due-diligence and testing.
You might use a framework that does this for you, such as GWT, but keep in mind that you will still have some issues.
Should the following be shunned, or praised for its simplicity?
For the record, I use it in every site I build, but I've noticed it's not present in many main-stream CSS-reset frameworks — is there a reason they don't use it too?
* { margin: 0; padding: 0; }
Its best NOT to use it as it causes issues with form elements, especially input buttons and select boxes.
See christianmontoya.com
The universal selector can slow things down quite a bit, especially on some WAP browsers. Just think about it for a second: it matches every single element in the document tree.
Besides, for most elements, you'll go on and specify a margin/padding that is different from 0 anyway. As in, there's no point in resetting them for all elements to begin with.
Something you definitely don't want to do is use relative sizes with the universal selector. Things get weird really quick if you do. ;-)
For a good baseline to work from, I'd recommend a tried and tested reset stylesheet.
I once did some performance testing between the * {margin:0;padding:0}, Eric Meyer's reset, the YUI reset and no CSS at all. The performance difference was negligible.
That said, I now use Eric Meyer's reset so I don't lose the formatting on input buttons which actually makes buttons easier to style cross-browser.
If your intent is to set the padding and margin of every single element, then there should be no problem with that selector.
There's nothing particularly wrong with it. * is referred to as the "universal selector", and browser support for it is generally considered to be good, though IE does have some obscure bugs, as usual:http://reference.sitepoint.com/css/universalselector#compatibilitysection
I consider it an important first step in building my CSS layouts. It removes a lot of the troublesome default styling of different browsers and allows me to get more browser-independent results.
Of course I couple it with IE's conditional comments to write IE-version-specific divs around my whole page, and use those to work with IE's bugs (as FF et. al. tend to be more accurate to CSS spec).
EDIT - and I've never noticed any performance problems with it.