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

2

1

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

EDIT: If i get a tool, which supports IE6 as well, that would be great. Because the page i am having will be viewed there more often than any other browsers.

Thanks & Regards Prasanna Ram

vpram86

Posted 2010-01-11T14:23:28.727

Reputation: 1 978

1

The things at, for example, http://superuser.com/questions/43280/utility-to-determine-the-font-used-on-a-site/ are not sufficient?

– Arjan – 2010-01-11T14:34:43.623

@Arjan: Wonderful link. Thanks! Does it let me know the changes that got effected due to high contrast system settings also? – vpram86 – 2010-01-11T17:47:04.483

(As you seem to like things like Firebug and Web Inspector, you might want to change your question to remove the "within the tag itself" requirement, to get more emphasis on the high-constrast thing.) – Arjan – 2010-01-11T18:33:54.873

@Arjan: Actually i wanted to emphasize that, whatever changes affect the web page, like HC, i want to have the final source with styles inside corresponding tag itself. Its the end result of whatever tool i am searching on. This would help me compare and see whats changing and affected as part of HC change in OS. But i think i did not make it clear enough. So i better remove it :). Thanks! – vpram86 – 2010-01-12T06:25:50.277

Please provide an example for "my page behaves differently" and "The page is definitely getting changed and browser defintiely does something to our page in HC". And though I still don't think such tool exists (as I think system-wide high contrast does not affect any CSS), I guess you might want to change the title to something like "How to view the final computed CSS, including overrides such as high contrast settings?". Or "Can I view a web page like experienced by someone who requires high contrast accessibility settings?" Or do you need something else? – Arjan – 2010-01-12T17:21:14.360

Well, i changed it to your first suggestion. thanks for that – vpram86 – 2010-01-12T20:19:31.800

Answers

1

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.)

Arjan

Posted 2010-01-11T14:23:28.727

Reputation: 29 084

Thanks a lot Arjan. My problem is for different browser my page behaves differently in normal and high contrast settings (especially different IE versions). I wanted to check which element is getting affected as part of HC change inside the browser so that i could make it more stable. – vpram86 – 2010-01-12T06:22:07.257

But how would you know how the eyes or mind of someone who needs (and hence uses) high-contrast, will actually interpret that higher contrast? I really think you either need to ask a visually impaired person, or find some online tool that "compensates" high-contrast for those with normal vision. (In any case, the browser will be totally unaware, and will NOT change its CSS for system wide high-contrast settings.) – Arjan – 2010-01-12T08:09:18.710

@Arjan: I understand it completely Arjan. But i jsut wanted to find if there is a way. The page is definitely getting changed and browser defintiely does something to our page in HC. I thought there would be a hook somewhere to what element/style/property is exactly getting affected. Since i am not sure i am searching. – vpram86 – 2010-01-12T08:30:32.133

4

Have you tried using Firebug?

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

quickcel

Posted 2010-01-11T14:23:28.727

Reputation: 4 203

I was going to recommend Firebug as well, but it does not show the css after end-user changes, like high-contrast mode or modifying webpages with greasemonkey. – Jared Harley – 2010-01-11T14:55:57.503

Thanks a lot! Is there a similar one for IE? I require this for IE most of the time. – vpram86 – 2010-01-11T17:44:41.977

You can try using Firebug Lite (http://getfirebug.com/lite.html) for that

– quickcel – 2010-01-11T17:56:48.270

1

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

Shevek

Posted 2010-01-11T14:23:28.727

Reputation: 15 408

Thanks! Does this show high contrast changes in OS level dynamically? – vpram86 – 2010-01-11T17:47:41.830

1

Using Virtual PC[*] (aka "Windows XP Mode" in Windows 7) (or another virtual machine solution) is a good way to test webpages in a wide variety of browsers and settings. The idea is, since you can't install IE6/7/8 simultaneously on a single PC, you can install them on different virtual machines for testing.

Microsoft provides VPC images pre-configured with IE6/7/8 on XP or Vista. They are large downloads (around 700MB), but provide a complete VPC image pre-configured with one specific version of IE, made for application and website compatibility testing. They are time-limited and expire 120 days after first use (for the Vista images) or on April 1, 2010 (for the XP images (assuming it's not just an April Fools' joke)).

An advantage for you: configure one VPC to run in high-contrast mode and run it side-by-side with another VPC running in non-high-contrast mode (with the same version of IE).

[*] Not an endorsement of the Virtual PC product. You can do the same thing with VMware, or VirtualBox, or your virtual machine product of choice.

quack quixote

Posted 2010-01-11T14:23:28.727

Reputation: 37 382

Asked: 2010-01-11T14:23:28.727

Viewed: 1 366 times

Active: 2010-01-12T21:22:15.323