Pregunta ¿Cómo ver el CSS calculado final, incluidas las anulaciones, como las configuraciones de alto contraste?


¿Hay alguna herramienta de este tipo? Por ejemplo, quiero ver todos los estilos aplicados para la etiqueta BODY. Sé que no lo hace legible. En mi caso, hay varias opciones que pueden cambiar CSS de forma dinámica a través del navegador o el código fuente (JSP) o debido a configuraciones del sistema como modo de alto contraste, etc., quiero los estilos finales que se utilizaron para representar la página que está siendo mostrado. Por favor recomiende

EDITAR: Si recibo una herramienta que también sea compatible con IE6, sería genial. Porque la página que tengo se verá más a menudo que cualquier otro navegador.

Gracias y Saludos Prasanna Ram


2


origen


Las cosas en, por ejemplo, superuser.com/questions/43280/... no son suficientes? - Arjan
@Arjan: enlace maravilloso. ¡Gracias! ¿Me permite saber los cambios que se realizaron debido a la configuración del sistema de alto contraste también? - vpram86
(Como parece que le gustan cosas como Firebug e Web Inspector, le conviene cambiar su pregunta para eliminar el requisito de "dentro de la etiqueta en sí", para poner más énfasis en lo más importante). - Arjan
@Arjan: En realidad, quería enfatizar que, cualesquiera cambios que afecten a la página web, como HC, quiero tener la fuente final con los estilos dentro de la etiqueta correspondiente. Es el resultado final de cualquier herramienta que esté buscando. Esto me ayudaría a comparar y ver qué está cambiando y afectó como parte del cambio de HC en el sistema operativo. Pero creo que no lo dejé lo suficientemente claro. Así que será mejor que lo elimine :). ¡Gracias! - vpram86
Por favor, brinde un ejemplo para "mi página se comporta de manera diferente" y "Definitivamente la página se está cambiando y el navegador definitivamente hace algo en nuestra página de HC". Y aunque todavía no creo que exista dicha herramienta (ya que creo que el alto contraste de todo el sistema no afecta a ningún CSS), supongo que es posible que desee cambiar el título a algo así como "¿Cómo ver el CSS calculado final, incluidas las anulaciones, como la configuración de alto contraste?". O "¿Puedo ver una página web como la experimentada por alguien que requiere una configuración de accesibilidad de alto contraste?" ¿O necesitas algo más? - Arjan


Respuestas:


La configuración de alto contraste proporcionada por el sistema operativo tiene nada para hacer con CSS. (O con los navegadores para el caso, un navegador no tendrá en cuenta estas configuraciones, y NO cambiará ningún CSS para la configuración de alto contraste de todo el sistema.) No creo que encuentre ninguna herramienta que "ajuste" el CSS a compensar la configuración de alto contraste.

(Tal vez hay herramientas en línea, al igual que Vischeck puede mostrarle cómo se ven las cosas a alguien que es daltónico. Pero si existe una herramienta similar, en realidad no estoy seguro de cómo eso podría ayudar a cualquier desarrollador que lo haga no necesitan configuraciones de alto contraste, para determinar si alguien más puede ver el sitio web ... Entonces, tal herramienta en línea necesitaría entonces "convertir" alto contraste para aquellos con visión normal, para obtener algunos idea de lo que experimentaría una persona con discapacidad visual.)


1



Muchas gracias Arjan. Mi problema es que para un navegador diferente, mi página se comporta de manera diferente en configuraciones normales y de alto contraste (especialmente diferentes versiones de IE). Quería comprobar qué elemento se está viendo afectado como parte del cambio de HC dentro del navegador para poder hacerlo más estable. - vpram86
Pero ¿cómo sabrías cómo los ojos o la mente de alguien que necesariamente (y, por lo tanto, usa) alto contraste, ¿realmente interpretará ese mayor contraste? Realmente creo que debes preguntarle a una persona con discapacidad visual o encontrar alguna herramienta en línea que "compense" el alto contraste para aquellos con visión normal. (En cualquier caso, el navegador será totalmente inconsciente, y NO cambiará su CSS para la configuración de alto contraste de todo el sistema). - Arjan
@Arjan: lo entiendo completamente Arjan. Pero yo quería encontrar si hay una forma. La página definitivamente se está cambiando y el navegador definitivamente hace algo en nuestra página de HC. Pensé que habría un gancho en algún lugar para qué elemento / estilo / propiedad se está afectando exactamente. Como no estoy seguro de estar buscando - vpram86


¿Has probado usar Firebug?

Firebug se integra con Firefox para poner   una gran cantidad de herramientas de desarrollo web en   las yemas de tus dedos mientras navegas. Tú   puede editar, depurar y monitorear CSS,   HTML y JavaScript en vivo en cualquier web   página.


4



Iba a recomendar Firebug también, pero no muestra el css después cambios del usuario final, como modo de alto contraste o modificación de páginas web con greasemonkey. - Jared Harley
¡Muchas gracias! ¿Hay uno similar para IE? Necesito esto para IE la mayor parte del tiempo. - vpram86
Puedes intentar usar Firebug Lite (getfirebug.com/lite.html) para eso - quickcel


Intente utilizar Chrome: puede seleccionar cualquier parte de una página, haga clic con el botón derecho e "Inspeccionar elemento".

Esto muestra un árbol del código de página completo y luego puede ver el CSS aplicado a cualquier elemento en el árbol


1



¡Gracias! ¿Esto muestra cambios de alto contraste en el nivel del sistema operativo de forma dinámica? - vpram86


Utilizando PC virtual[*] (también conocido como "Modo Windows XP" en Windows 7) (u otra solución de máquina virtual) es una buena forma de probar páginas web en una amplia variedad de navegadores y configuraciones. La idea es que, dado que no puede instalar IE6 / 7/8 simultáneamente en una sola PC, puede instalarlos en diferentes máquinas virtuales para realizar pruebas.

Microsoft proporciona imágenes VPC preconfigurado con IE6 / 7/8 en XP o Vista. Son grandes descargas (alrededor de 700MB), pero proporcionan una imagen de VPC completa preconfigurada con una versión específica de IE, creada para las pruebas de compatibilidad de aplicaciones y sitios web. Tienen un límite de tiempo y caducan 120 días después del primer uso (para las imágenes de Vista) o el 1 de abril de 2010 (para las imágenes de XP (suponiendo que no es solo una broma de los Inocentes)).

Una ventaja para usted: configure una VPC para que se ejecute en modo de alto contraste y ejecútela lado a lado con otra VPC que se ejecute en modo no de alto contraste (con la misma versión de IE).

[*] No es un endoso del producto de Virtual PC. Puedes hacer lo mismo con VMware, o VirtualBox, o su producto de máquina virtual de elección.


1