This question already has answers here:
What is the difference between Normalize.css and Reset CSS?
(10 answers)
Closed 2 months ago.
What is the difference between reset vs normalize CSS?
Reset CSS: CSS resets aim to remove all built-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the same.
Normalize CSS: Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.
A reset CSS file is a set of styles that sets the default values for various elements on a web page to a consistent baseline. The purpose of a reset CSS file is to provide a consistent starting point for styling web pages, so that different browsers display elements consistently and so that you don't have to spend time undoing default browser styles.
Normalize CSS, on the other hand, is a set of styles that makes default styles consistent across different browsers, but does not completely reset all styles to a baseline like a reset CSS file does. The goal of normalize CSS is to make it easier to style web pages consistently across different browsers, without completely eliminating the default styles of those browsers.
In summary, a reset CSS file completely resets the default styles of a web page to a consistent baseline, while normalize CSS makes default styles consistent across different browsers without completely resetting them.
Related
When I add bootsrtap the thing which is made using native css doesn't show on the right place for some unknown reason to me.
Here is what happens with bootstrap and without. The second shall happen on the first too.
Just a note this thing shall be a population pyramid, sorted by womans(red) and males(blue) by age.
Edit: jsfiddle.net/64mjs03f/
I think the problem might be due to Normalization.
Libraries like bootstrap now come with a Normalized CSS. What that does is, reset the styles of the HTML elements that might render differently across browsers.
All browsers have their own CSS for rendering elements. Normalization helps developers create a web app, that looks same across all browsers.
I am troubleshooting performance issues on IE 11 with an existing HTML page which is quite big (table with a few hundred rows containing links).
I noticed with the F12 UI responsiveness tool that the lagging is caused by many "Layout" events generated as soon as I move the mouse anywhere hover the page and which basically recompute the style of all elements (including the table cells) even if the mouse is on the page's header section.
From the documentation:
•Layout: Changes were made to the DOM that required the size and/or position of all affected elements to be computed.
How can I find the cause of this issue?
I guess there is some :hover CSS style somewhere that causes this full style recomputing, but how to find out which one?
Well it seems that the performance issue was caused by the excessive number of CSS rules which was beyond the limit described here: Internet Explorer's CSS rules limits
I just spent an hour troubleshooting an issue I had were all my paragraph elements were shifted down.
This happened after I moved the design from jsfiddle.net to my web host.
I killed an hour before I finally realized I needed to insert
p{margin:0px;}
and all was well...well still off by 1px;
Questions:
Why did this error not occur in jsfiddle.net?
Why does FF CSS Debugger not let me know that there is a margin in there or where it came from. I don't know what is was set to but it was not 0px;
I'm trying to learn from "my mistakes" so I can know what to expect next time.
Web browsers set their own default values for rendering HTML elements. This includes margins, paddings, font sizes etc. When you create a HTML document with no CSS you can see lists, paragraphs and headings are formatted in a default way.
Debuggers tend to show the values that you have applied to the document in your CSS.
To get around these sorts of inconsistencies (browsers use different defaults) some people use a 'reset' CSS file that removes this behaviour by setting as much as possible to 0.
Take a look at http://meyerweb.com/eric/tools/css/reset/
I have been working on a little photo slider. It looks slightly different in Chrome than in FF so I thought a CSS reset would make them both look the same. I used the Yahoo! YUI CSS reset model but nothing changed. It looks good in FF but in Chrome the "Resume" button on the right side sticks up too high and a thin gray line at the bottom of the big pictures gets cut off where the main buttons are located. Here is the URL:
http://www.replayground.com/slider/02.html
You can ignore the stuff below the circles. Just testing stuff down there.
Here is what I added to my 02.html file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
I'd really like advice on how to get CSS Reset working correctly. Not how to fix the specific buttons problem you see. As I add elements to the page I don't want to have to go through this each time.
A CSS reset is not designed to make all the rest of CSS cross-browser. It is designed to set all of the client default rules on all the different browsers to the same thing so that you are always working from a predictable set of CSS rules. How the browsers interpret those rules is still specific to each one.
In your case, you still need to figure out how to write CSS rules that operate the same in both Chrome and FF - the reset simply levels your starting point a little, it doesn't remove the browser rendering differences.
You may find a cross browser CSS framework (e.g. blueprintcss.org or 960.gs) to be more helpful for your current situation. They often use a reset, but also have rules that compensate for the differences in the rendering of the after-reset CSS rules.
jball is very right about the resets. They just allow you to start with a blank page, but you should still write a proper document structure and good CSS to get good and consistent results.
In your case, all elements in your page are loose in the page. This will give you trouble in the end. Some things will shift a few pixels, especially when you don't specify exact height for every item. Fonts are rendered in different heights by each browser. These may be tenths of pixes, but when they get rounded, your website is a little off between browsers.
When you use a little deeper nesting of elements, you can make better use of positioning elements (relative and absolute). If you put in a specific div for the header, and give it a fixed size, you can position each element in there very precisely, which is especially handy for headers and menu's.
I took the liberty of creating a small example, which shows just some basics of positioning. It is not perfect and uses brightly colored borders instead of images for the layout. But it's just for showing the element nesting and absolute and relative positioning, along with a negative margin trick.
http://jsfiddle.net/YwCxQ/3/
From where Computed values comes, is it comes from browser default css?
Is the computed value and browser default styles same thing?
alt text http://shup.com/Shup/360142/11058112245-My-Desktop.png
No, they're not the same thing. Computed values are the current styles of elements. These computed values will contain the defaults if no other value has been set, or the dominating value if one or more has been set.
Computed values are exactly that, the value after the browser has computed all the factors that affect those values.
You can get computed values from script using element.currentStyle (IE) and window.getComputedStyle(element); (W3C):
// Note that Firefox requires the second argument is passed even when null.
var cStyle = element.currentStyle || window.getComputedStyle(element, null);
The browser style is a stylesheet the browser has as the default styling, like adding underlines to links, makes headers larger, strong as bold, etc. (Some developers don't like the inconsistency between browser styles so they apply resets, eg: YUI Reset)
When you visit a website which has its own stylesheet, those styles are added on the website elements after the browser has added its.
Eg. the browser's default styles says that all a elements should have an underline and be blue. You visit a website which uses a css reset, which says for example, that all a elements should be blue without an underline. The computed style at this point for an a element is blue without an underline (since the later applied reset overrides the browser styles). Then the website's master stylesheets are loaded which makes it pretty, and it says that all a elements should have a text-shadow, in addition to a lot of other stuff. The computed style is now blue, without underline and with text-shadow.
The reason there are so many other properties in the computed styles section is because the browser adds a lot of default styling.
As a sidenote, this gets a little more complicated with css selector priorities.
It comes from the browser's CSS engine. so yes, it comes from the browser.
The computed style is the actual style applied to the element after all style rules has been sorted out.
The style rules may come from:
The browser default styles
Optional user defined styles in the browser
Style sheets in the page
Style attribute in the element
All style rules that apply to the element are considered, and the ones that are most specific and specified last for each property is the ones that apply.