Is it a good habit to use in CSS universal selector to set some properies of many elements. I mean, for instance:
* {margin: 0; padding: 0;}
Maybe default values are logical and we shouldn't change them all in the one line.
This issue with the universal selector is that you are going to remove some potentially useful browser defaults on some elements, just to have to explicitly add them back at a later time.
In other words, a user is going to have to download a CSS style to put back padding or margin on an element that already had perfectly acceptable padding or margin without any download.
If you are looking to make elements render the same across all browsers, I would suggest you check out normalize.css, which tries to keep as many browser defaults in place as it can.
The universal selector is good for troubleshooting. If absolutely stumped on elements that are causing overflow issues I'll do * {border:1px solid pink}. Be sure to remove once troubleshooting is complete.
The universal selector does cause a performance issue so try to avoid it.
Related
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.
Would it be good idea to add body {line-height:0} to get more control over elements?
For better cross browser consistency. I can add specific line-height to any element, as needed.
body {line-height:0}
p {line-height:1}
h1 {line-height:2}
or body {line-height:1} is a better idea?
My purpose is to reset the line-height of all elements to 0 or none than add line-height later to elements as needed.
Currently computed line heights create problems.
no, it's not a good idea. First it's not the way people usually do it and so will be confusing, and second it's brittle -- you're liable to forget, either now or in the future. But messing with line height will then mess with the way blocks are laid out, and have all sorts of propogated problems.
It is a good idea to "clean up" the CSS to a known state using a CSS reset file.
I would suggest using line-height: 1 because then you may not need to set a line height for every other element. If you use 0 instead, you've just forced yourself to specify the line-height of any element that contains text, and you end up having to repeat yourself in your CSS.
Rather than manually resetting elements, you might want to try using a pre-made CSS reset file. Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/) is very popular.
Yes, or even:
*{ line-height:0px; }
..to ensure you hit everything. I use Eric Meyer's CSS reset. There's plenty of variations, and I'm sure other SO users have their preferences. http://meyerweb.com/eric/tools/css/reset/
I see the following rules on a webpage:
* {
margin: 0px;
padding: 0px;
border: 0px;
}
Based on my knowledge, the webpage wants the IE browser to reset the margin/padding/border as 0 to avoid some potential problems.
If this rule is useful, why I don't see this rule shown on popular website, such as yahoo, google?
Thank you
That is known as the universal selector. In your case, those rules will be applied to every element on the page.
The most popular use of such a rule is to normalize differences in browser defaults for margin and padding.
* rules match EVERYTHING, but it is not recommended to use them.
The author's intention might have been to do a CSS Reset to remove browser's default CSS rules, but that's not the good way. Try this one
This is an older version of a CSS reset. It will set every element to 0 margin, border and padding to standardize display characteristics across browsers.
Each browser includes it's own default stylesheet, which can cause differences in positioning of elements in different browsers if you have not explicitly specified these attributes for an element.
The universal selector is fairly slow, and it's better to use specific rules targeting certain elements. A more modern way is a stylesheet like this, Eric Meyer's CSS reset. Lots of people use this one as it's complete and relatively efficient. Personally, I remove elements I know I'll never use (acronym, abbr, etc).
I've been working for a guy whose been teaching me css. I made a website based on his designs which I'm pretty proud of, but he got back to me saying that I need to explicitly declare the padding, margin, position, and overflow (specifically every item should have "overflow:hidden") on every item. Is there any basis to this at all? Is there anything I can use to refute this? I thought that declaring something like div,span,h1,[...] {padding:0;margin:0;postion:static;overflow:hidden} would take care of everything due to the cascade.
Another resource, that I think is better for resetting CSS is YUI Reset (from Yahoo!). It has a great reset CSS file with additional files you can add on the end to make everything look consistent cross-browser (including fonts which can get very annoying very fast in CSS)
Here are the links
http://developer.yahoo.com/yui/reset/
http://developer.yahoo.com/yui/base/
http://developer.yahoo.com/yui/fonts/
I use the Reset, Base and Font stylesheets (in that order) in ALL my web projects.
Using a reset stylesheet that consists of "* { margin: 0; padding: 0; }" will create even worse cross-browser issues. You need to reset everything and THEN declare a base that all the browsers can start from (the purpose of reset.css and base.css).s
Except for increasing the CSS file size, there is no reason to explicitly declare common properties down a cascade if already declared on a generic item. The browser should take care of properly rendering the items, taking the cascade structure into account.
Blindly applying styles to every element will surely give you unwanted results, but you could nail everything with
* { margin: 0; padding:0; etc }
I would recommend using a reset stylesheet instead to reduce browser inconcistencies, this one is pretty popular: http://meyerweb.com/eric/tools/css/reset/
Note that reset stylesheets have their own (usually minor) issues with IE7. I usually create a separate IE7 only stylesheet.
I think you should use a CSS reset instead.
He is overly paranoid about cross browser differences. You do not need to do this.
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.