tags:

views:

41

answers:

4

From where Computed values comes, is it comes from browser default css?

Is the computed value and browser default styles same thing?

alt text

+2  A: 

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); 
Andy E
but where it is set? that current style? What is the difference between current style and browser default style?
metal-gear-solid
@metal-gear-solid: I thought I'd explained that. The difference is that the current style is the current style exactly as it has been calculated, taking style attributes and CSS rules into account. If no value is set by those methods for a particular style, then the value for that style would be the default.
Andy E
@Andy E's head - and i think every browser will have different computed style for each element
metal-gear-solid
@metal-gear-solid: That pretty much goes without saying. Browsers differ on default values, the format of default values and some values might be invalid in certain browsers. For instance for a url value, some browsers will format the computed style with quotes (`url("blah.png")`), whilst others won't. Styles with rgba values set will be computed correctly in browsers that support them, and the defaults will be computed for browsers that don't.
Andy E
A: 

It comes from the browser's CSS engine. so yes, it comes from the browser.

this. __curious_geek
then what is the purpose of browser stylesheet?
metal-gear-solid
+2  A: 

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.

mqchen
A: 

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.

Guffa