How to get final applied value of css property to an element?

In CSS, its a common practice to find that multiple rules of the same property are getting applied to an element. For example, there could be 4 font-families getting applied to the same span element.

Now, which rule ultimately gets applied to the element is decided by CSS inheritance.

So in order to find out this finally applied rule or value, we can either go through the hierarchy of rules and catch the value which is getting applied, or, we can  make use Computed tab of browser’s developer tools.

Let’s take the example of Google Chrome here. In order to reach the Computed tab, we first need to invoke Developer’s tool by pressing F12.

Once the developer’s tool is there, then we need to click at ‘Element’ tab (Element tab is generally the first tab in developer’s tool). When we are at Element tab, then we can see the source of page (all html elements) and if we look at the right section then we find few more tabs as ‘Styles’, ‘Computed’ etc..  and the second one is the ‘Computed’ tab we are interested in here.

Now, if we select an html element from the source in ‘Elements’ and then click the ‘Styles’ tab in right section then we can see the various CSS style rules getting applied to that element.

Note that Styles tab displays all the rules and not just the final one which is applied to element. Thus, now if we want to check that what’s the final rule & value applied to element out of all these rules, then here comes ‘Computed’ tab to our rescue.

Once we click at ‘Computed’ tab, then we can see the final values of various properties which are getting applied to that element. There’s also a filter available at the top where we can enter a property and find its final value applied. Therefore, in order to find out the final value of font-family getting applied to a span element, we can select that element, go to the Computed tab and type font-family and this will show us the ultimate value applied to that span element. This can save us from going through the hierarchies of inheritance.

Other than this visual way of getting the final value of a property, there’s a method too which can be used to get this value. This method is – getComputedStyle(). More about this method can be read here.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s