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.
Related
I am simply wondering if there exists a global CSS reset for CSS3. Something along the lines of the commonly-used versions created by Eric Meyer or YUI, but for CSS3 specifically. I've queried channels such as Google, Github and here on SO, but haven't come across a comprehensive solution.
Edit:
The term "reset" is probably misleading since it deals mainly with resetting browser default settings. "Recalibration" may be better suited.
I should clarify and put forth a use case.
This would work in tandem with the normal CSS reset yet also handle any styling caused by rotation, box shadow, animation, border radius, etc. For example, as mentioned before on this post:
-webkit-transform:none; /* Safari and Chrome */
-moz-transform:none; /* Firefox */
-ms-transform:none; /* IE 9 */
-o-transform:none; /* Opera */
transform:none;
The above snippet, and others like it, would be associated with any HTML tags that might get affected by them, as it is with current CSS resets.
The implementation need for this would probably not be too common if you are in control of your properties. However if you are, for example, creating an app or plug-in that will be used across different domains, where the styling of the pages the plug-in script is invoked on can influence that of the plug-in itself, then something like this would be very useful.
I realize there are other ways to tame CSS inheritance and handle cross-domain issues, but this question is put forth regarding the CSS3 reset directly.
Much thanks.
The real way to solve your problem is either to use the scoped attribute, or to create your widget using the Shadow DOM.
This way, you can insulate yourself from external CSS. Unfortunately, neither are really ready for use, so yes, you'll have to manually protect yourself.
The alternative is to set everything (transform, font-size, padding, etc) in your code with !important, rather than resetting it to 0/none, then setting it anew.
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)
In some articles that I've read, the use of * {margin:0; padding:0;} is discouraged as it would affect the web site's performance. So I turned to a reset.css stylesheet.
But I'm wondering, how does it affect the performance?
The reasoning behind this was discussed in this Eric Meyer post.
This is why so many people zero out
their padding and margins on
everything by way of the universal
selector. That’s a good start, but it
does unfortunately mean that all
elements will have their padding and
margin zeroed, including form elements
like textareas and text inputs. In
some browsers, these styles will be
ignored. In others, there will be no
apparent effect. Still others might
have the look of their inputs altered.
Unfortunately, there’s just no way to
know, and it’s an area where things
are likely to change quite a bit over
the next few years.
So that’s why I don’t want to use the
universal selector, but instead
explicitly list out elements to be
reset. In this way, I don’t have to
worry about munging form elements. (I
really should write about the
weirdnesses inherent in form elements,
but that’s for another day.)
That said, the following chart from this Steve Souders post shows the difference in load times for a test page using universal selectors compared with a page using descendant selectors.
it is effect the performance because the browsers engine have to apply this style to every element on the page this will lead to heavy rendering specially in the big pages with a lot of elements and this method is a bad practice too because it may remove a good default styles for some elements
you may optimize this code by reduce the scope of it like using it on just some elements that make the problems like this
h1,ul
{ margin:0;
padding:0;}
Using *{margin:0;padding:0;} in your stylesheet will not affect performance and is helpful in tackling various formatting issues.
Using a separate reset.css does have some performance issues, as you are forcing the user to requested one more file from the server. In the grand scheme of things, a few kb on a high speed line is nothing. But another file for someone on a mobile browser can be too much.
I think the website you read that on needs its head checked, a reset style sheet is the way to go to level the playing field. The overhead is so marginal it won't make a difference especially with modern browsers.
body {padding:0;margin:0;}
It effects the webpage display because without its use we have to
margin-left:-7px;
margin-top:-7px;
etc. like substitutions to avoid a narrow white strip on the left and top of the webpage.
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.