Question

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

edited Jan 12 at 20:19

asked Jan 11 at 14:23

Aviator
634●7

100% accept rate

1

The things at, for example, superuser.com/questions/43280/… are not sufficient? – Arjan van Bentem Jan 11 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 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 van Bentem Jan 11 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 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 van Bentem Jan 12 at 17:21

show 1 more comment

Arjan van Bentem · Answer 1 · 2010-01-12 08:15:25Z

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

quickcel · Answer 2 · 2010-01-11 14:34:37Z

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.

answered Jan 11 at 14:34

quickcel
1,511●10

	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 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 at 17:44
	You can try using Firebug Lite (getfirebug.com/lite.html) for that – quickcel Jan 11 at 17:56

Shevek · Answer 3 · 2010-01-11 14:42:20Z

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

answered Jan 11 at 14:42

Shevek
1,329●9

Thanks! Does this show high contrast changes in OS level dynamically? – Aviator Jan 11 at 17:47

~quack · Answer 4 · 2010-01-12 21:22:15Z

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.

Virtual PC homepage (latest version is Win-7 only)
Virtual PC 2007 SP1 (for Windows Server 2008, Vista SP1, XP SP3)

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

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

4 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged css html source-code or ask your own question.

Welcome!

Related