views:

115

answers:

4

I have been examining a web page in Chrome Developer Tools and noticed that the CSS rules are displayed in alphabetical order. I noticed that when I tried to track the inheritance of the rules applied to an element through all its ancestors.

Is there any way to change the order in which rules are displayed? Or maybe this is possible using other tools?

Thanks.

+1  A: 

If you're not particularly attached to Chrome, check out Firebug, the Firefox extension. It shows the most specific selector at the top of the list of styles, and cascading styles from parent elements are listed below, by proximity to the element you're inspecting.

derekerdmann
+1  A: 

You can actually edit the "inspector" yourself. Its simply Html/Js

Check out C:\Users\--your username --\AppData\Local\Google\Chrome\Application\-- latest version --\Resources\Inspector

since you are using the tools i am going to assume you know what you are doing to edit them :)

Hailwood
for what version of windows is this path? for XP is the following `C:\Documents and Settings\username\Local Settings\Application Data\Google\Chrome\Application\Latest version\Resources\Inspector` also I see the js has 45337 lines..I don't think it's so easy to modify it :) (if he achieved I would like to have the modified!)
Sotiris
@Sotiris - Windows Vista and 7 use the C:\Users\ path
derekerdmann
+2  A: 

I suggest you Firebug Lite. It doesn't support all the features of well known firebug for firefox but still great tool for chrome.

Sotiris
+2  A: 

CSS rules are displayed in the cascade order, not in the alphabetical one. As a result, topmost properties override the ones below. If you have a use-case showing the opposite, please file it using crbug.com (mentioning DevTools in the summary) or using webkit.org/new-inspector-bug link.

Computed Style rules are displayed in the alphabetical order
Timur