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).
Related
I'm working on a browser extension that adds it's UI to the pages DOM. On some pages I have the problem certain styles affect my UI. To counter this I keep my UI underneath a common root which resets most of the styles to the default value.
Sometimes I missed things which causes visual glitches in my UI. (i.e. the pages CSS file sets form { width: 80%; } so I need to add form { width: auto; } to my reset styles.
Is there a collection of styles that reset every CSS attribute to the value that is declared as default by the standard for every element?
I have come across the same problem. The usual CSS normalizers listed by the other answers does not answer the question because it is made to cancel the differences across the browser's default styles.
In the context of an extension, I needed to cancel every specific style that may exist on a random website.
I have come across this solution (I am not sure if it was possible at the time of the question, 7 years ago).
.your-container-class,
.your-container-class *,
.your-container-class *::before,
.your-container-class *::after {
all: initial;
}
So far it seems to achieve the goal by removing the differences across websites. The downside is that it resets even some default styles (ol, ul, li not behaving like lists for example).
Eric Meyer’s “Reset CSS” 2.0
(the original one)
HTML5 Doctor CSS Reset
(extends the Eric Meyer's one to improve HTML5 tags reset)
Yahoo! (YUI 3) Reset CSS
(based on Normalize.css)
Universal Selector ‘*’ Reset
Normalize.css 1.0 2.1.3
("…as used by Twitter Bootstrap, HTML5 Boilerplate, YUI 3, Pure, TweetDeck, Soundcloud, Medium, NASA, GOV.UK, Guardian, Rdio, Favstar, iA, and many others.")
There are others, but this were (and still are) the 2012’s most popular CSS Reset scripts.
I recommend using a quick Google search to find something like so: http://meyerweb.com/eric/tools/css/reset/
You can implement the reset in as-is and then if any problems arise down the road, simply add to it as needed.
Be aware that some pre-made CSS resets require a shout-out to using them.
Yes, absolutely.
There are two schools of thought to this. One is the zeroing style reset sheets, which basically remove all margin, padding and other such settings from the css. A good example of this is Eric Meyer's Reset CSS
The other approach is to set everything to roughly what you'd sensibly expect it to be, setting a reasonably looking margin to paragraphs and headings, indenting lists etc. A good example of this is Normalize.css
Some browsers also support the initial value, which sets the value of a property back to what it intially was. It's not widely supported enough to use in production, IMO.
Html5 boilerplate has an normalize.css which sets al lot of css styles to a default.
http://html5boilerplate.com/
As you are applying your styles to different pages with different unique styles, its hard to say if you will get success on removing all styles from all pages with some CSS reset.
But maybe these can help:
Normalize.css (used by many CSS frameworks)
CSS Reset by Meyer
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.
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'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.