CODEWITHSUNDEEP
css
user10727236
user10727236

Reputation:

what are specified value, computed value, and actual value?

English isn't my first language so I find it hard to learn from MDN.

I think from what i read a specified value is a style that was specified in a style sheet or a style that was inherited from a parent element.

I dont really know what a computed value is

An actual value is the value that is actually used

Upvotes: 3

Views: 1449

Answers (3)

Mr Lister
Mr Lister

Reputation: 46569

It can look as if those values are all the same; i.e. specified, computed and actual values all being 1px, and you can't see any differences and you wonder why there are so many phrases to describe the same thing!
So maybe some examples will make it clear.

The specified value is whatever you specify. For instance, if you write p {font-size:2rem; in your stylesheet, then the specified value for p is 2rem, obviously.

Then the browser computes what that is in pixels, which is (at least if 1rem is 16px) 32px. That is the computed value, which is used for display (so it's also the used value, and in most cases also the actual value).

However, there are some circumstances where 32px is not possible. For example if this particular font is a bitmapped font, and a 32px version is not available. If there is only a 30px version, then that is what is actually put on the display as the actual value.

The used value can also differ from the computed value. For example, if you have p {width:600px; max-width:400px;} in your stylesheet, then the computed value will be still be 600px, but the used value (and therefore the actual value) will be 400px.

Hope this helps. If you need more examples, just ask.

Upvotes: 7

ellipsis
ellipsis

Reputation: 12152

Specified value:

Specified values are values which are provided and not generated. For example Inheriting from external css file

Inheriting the value of the parent element

Using the initial value of property

Computed Value: Computed values are the values which are calculated when relative positioning or values are used. For ex width:20% is to be calculated in reference to the parent .

Actual Value: Ready to be used values are actual values.Absolute values like font:10pt is an actual /absolute value it doesn't depend on other values.

Upvotes: 0

j71261
j71261

Reputation: 1

The computed value is the value inherited from another element. https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value

Upvotes: -2

Related Questions