How to view the final computed CSS, including overrides such as high contrast settings?

How to view the final computed CSS, including overrides such as high contrast settings?

Is there any such tool? For example, I want to see all styles applied for BODY tag. I know it does not make it readable. In my case, there are several options which can dynamically change CSS either through browser, or the source code(JSPs) or due to system settings like high-contrast mode etc., I want the final styles which was used to render the page that is being shown. Please suggest

Asked by: Guest | Views: 179

Total answers/comments: 2

Comments display order:

Guest [Entry]

"OS-provided high-contrast settings have nothing to do with CSS. (Or with browsers for that matter; a browser will be totally unaware of such settings, and will NOT change any CSS for system wide high-contrast settings.) I don't think you will find any tool that ""adjusts"" the CSS to make up for high-contrast settings.

(Maybe there are online tools, just like Vischeck can show you what things look like to someone who is color blind. But if a similar tool exists, I am actually not sure how that would help any developer who does not need high-contrast settings, in determining if someone else can view the website... So, such online tool would then need to ""convert"" high-contrast for those with normal vision, to get some idea of what a visually impaired person would experience.)"

Guest [Entry]

"Try using Chrome - you can select any part of a page, right click and ""Inspect Element"".

This shows a tree of the entire page code and you can then see the CSS applied to any element in the tree"