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

1557
vpram86

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

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

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

2
Вещи, например, по адресу http://superuser.com/questions/43280/utility-to-determine-the-font-used-on-a-site/ не достаточны? Arjan 14 лет назад 1
@Arjan: Замечательная ссылка. Спасибо! Позволяет ли мне узнать об изменениях, которые произошли из-за настроек системы с высокой контрастностью? vpram86 14 лет назад 0
(Поскольку вам, похоже, нравятся такие вещи, как Firebug и Web Inspector, вы можете изменить свой вопрос, чтобы убрать требование «внутри самого тега», чтобы уделить больше внимания вещам с высоким ограничением.) Arjan 14 лет назад 0
@Arjan: На самом деле я хотел подчеркнуть, что, какие бы изменения ни влияли на веб-страницу, например, на HC, я хочу иметь окончательный источник со стилями внутри соответствующего тега. Это конечный результат любого инструмента, который я ищу. Это помогло бы мне сравнить и увидеть, что меняется и на что влияет изменение HC в ОС. Но я думаю, что я не сделал это достаточно ясно. Так что я лучше уберу это :). Спасибо! vpram86 14 лет назад 0
Пожалуйста, приведите пример для * "моя страница ведет себя по-разному" * и * "Страница определенно изменяется, и браузер определенно что-то делает с нашей страницей в HC" *. И хотя я до сих пор не думаю, что такой инструмент существует (так как я думаю, что высокая контрастность всей системы не влияет ни на один CSS), я думаю, вы могли бы захотеть изменить заголовок на что-то вроде ** "Как просмотреть окончательно вычисленный CSS, включая переопределения, такие как настройки высокой контрастности? "**. Или ** «Могу ли я просмотреть веб-страницу, как это сделал кто-то, кому требуются высококонтрастные настройки доступности?» ** Или вам нужно что-то еще? Arjan 14 лет назад 0
Ну, я изменил это на ваше первое предложение. Спасибо за это vpram86 14 лет назад 0

4 ответа на вопрос

4
quickcel

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

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

Я собирался также порекомендовать Firebug, но он не показывает css * после * изменений конечного пользователя, таких как высококонтрастный режим или изменение веб-страниц с помощью greasemonkey. Jared Harley 14 лет назад 0
Большое спасибо! Есть ли аналогичный для IE? Я требую это для IE большую часть времени. vpram86 14 лет назад 0
Для этого вы можете попробовать использовать Firebug Lite (http://getfirebug.com/lite.html). quickcel 14 лет назад 0
1
Shevek

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

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

Спасибо! Показывает ли это высококонтрастные изменения уровня ОС динамически? vpram86 14 лет назад 0
1
Arjan

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

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

Большое спасибо, Арджан. Моя проблема в другом браузере, моя страница ведет себя по-разному в нормальных и высококонтрастных настройках (особенно в разных версиях IE). Я хотел проверить, на какой элемент влияют изменения HC в браузере, чтобы сделать его более стабильным. vpram86 14 лет назад 0
Но как вы узнаете, как глаза или ум человека, который * нуждается * (и, следовательно, использует) высококонтрастный, на самом деле интерпретирует этот более высокий контраст? Я действительно думаю, что вам нужно либо спросить человека с нарушениями зрения, либо найти какой-нибудь онлайн-инструмент, который «компенсирует» высокую контрастность для людей с нормальным зрением. (В любом случае, браузер будет полностью не осведомлен и НЕ изменит свой CSS для общесистемных высококонтрастных настроек.) Arjan 14 лет назад 0
@Arjan: Я полностью понимаю, Арджан. Но я просто хотел найти, если есть способ. Страница определенно меняется, и браузер определенно что-то делает с нашей страницей в HC. Я думал, что где-то будет зацепка за то, на какой элемент / стиль / свойство точно влияют. Так как я не уверен, что ищу. vpram86 14 лет назад 0
1
quack quixote

Использование 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 или выбранным вами продуктом виртуальной машины.

Похожие вопросы