Как просмотреть окончательный расчетный CSS, включая переопределения, такие как настройки высокой контрастности?

Question

Есть ли такой инструмент? Например, я хочу увидеть все стили, примененные к тегу BODY. Я знаю, что это не делает его читабельным. В моем случае есть несколько опций, которые могут динамически изменять CSS либо через браузер, либо через исходный код (JSP), либо из-за системных настроек, таких как высококонтрастный режим и т.д. Я хочу, чтобы окончательные стили использовались для визуализации страницы, которая показывается. Пожалуйста, предложите

РЕДАКТИРОВАТЬ: Если бы я получил инструмент, который также поддерживает IE6, это было бы здорово. Потому что моя страница будет просматриваться там чаще, чем любые другие браузеры.

Спасибо и С уважением Прасанна Рам

Answer 1

Вы пробовали использовать Firebug?

Firebug интегрируется с Firefox, чтобы во время просмотра у вас было множество инструментов веб-разработки. Вы можете редактировать, отлаживать и отслеживать CSS, HTML и JavaScript на любой веб-странице.

Answer 2

Установленные ОС высококонтрастные настройки не имеют ничего общего с CSS. (Или с браузерами в этом отношении; браузер не будет знать о таких настройках и НЕ будет изменять CSS для общесистемных высококонтрастных настроек.) Я не думаю, что вы найдете какой-либо инструмент, который "настраивает" CSS, чтобы компенсировать высококонтрастные настройки.

(Может быть, есть онлайн-инструменты, точно так же, как Vischeck может показать вам, как все выглядит для дальтоника. Но если подобный инструмент существует, я на самом деле не уверен, как это могло бы помочь любому разработчику, который не нуждается в высококонтрастных настройках, в определении, может ли кто-то еще просматривать веб-сайт ... Так, например , онлайн - инструменту , то необходимо будет "конвертировать" высокую контрастность для людей с нормальным зрением, чтобы получить некоторое представление о том, что такие слабовидящие люди будут испытывать.)

Answer 3

Использование Virtual PC [*] (или "Режим Windows XP" в Windows 7) (или другого решения для виртуальной машины) является хорошим способом тестирования веб-страниц в самых разных браузерах и настройках. Идея заключается в том, что поскольку вы не можете установить IE6/7/8 одновременно на одном ПК, вы можете установить их на разные виртуальные машины для тестирования.

• Домашняя страница Virtual PC (последняя версия только для Win-7)
• Virtual PC 2007 SP1 (для Windows Server 2008, Vista SP1, XP SP3)

Microsoft предоставляет образы VPC, предварительно сконфигурированные с IE6/7/8 на XP или Vista. Они предназначены для больших загрузок (около 700 МБ), но предоставляют полный образ VPC, предварительно настроенный на одну конкретную версию IE, предназначенную для тестирования совместимости приложений и веб-сайтов. Они ограничены по времени и истекают через 120 дней после первого использования (для образов Vista) или 1 апреля 2010 года (для образов XP (если это не просто шутка апреля).

Преимущество для вас: настройте один VPC для работы в режиме высокой контрастности и запускайте его параллельно с другим VPC, работающим в режиме без высокой контрастности (с той же версией IE).

_{[*] Не одобрение продукта Virtual PC. Вы можете сделать то же самое с VMware, VirtualBox или выбранным вами продуктом виртуальной машины.}

Answer 4

Попробуйте использовать Chrome - вы можете выбрать любую часть страницы, щелкнуть правой кнопкой мыши и "Проверить элемент".

Это показывает дерево всего кода страницы, и вы можете увидеть CSS, примененный к любому элементу в дереве