up vote 2 down vote favorite
share [g+] share [fb]

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

link|improve this question
100% accept rate
1  
The things at, for example, superuser.com/questions/43280/… are not sufficient? – Arjan Jan 11 '10 at 14:34
@Arjan: Wonderful link. Thanks! Does it let me know the changes that got effected due to high contrast system settings also? – Aviator Jan 11 '10 at 17:47
(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 Jan 11 '10 at 18:33
@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! – Aviator Jan 12 '10 at 6:25
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 Jan 12 '10 at 17:21
show 1 more comment
feedback

4 Answers

up vote 1 down vote accepted

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

link|improve this answer
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. – Aviator Jan 12 '10 at 6:22
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 Jan 12 '10 at 8:09
@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. – Aviator Jan 12 '10 at 8:30
feedback
up vote 4 down vote

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.

link|improve this answer
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 Jan 11 '10 at 14:55
Thanks a lot! Is there a similar one for IE? I require this for IE most of the time. – Aviator Jan 11 '10 at 17:44
You can try using Firebug Lite (getfirebug.com/lite.html) for that – quickcel Jan 11 '10 at 17:56
feedback
up vote 1 down vote

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

link|improve this answer
Thanks! Does this show high contrast changes in OS level dynamically? – Aviator Jan 11 '10 at 17:47
feedback
up vote 1 down vote

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.

link|improve this answer
feedback

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.