Questão Como visualizar o CSS final computado, incluindo substituições, como configurações de alto contraste?


Existe alguma ferramenta desse tipo? Por exemplo, quero ver todos os estilos aplicados à tag BODY. Eu sei que isso não o torna legível. No meu caso, existem várias opções que podem alterar dinamicamente o CSS através do navegador, ou o código-fonte (JSPs) ou devido a configurações do sistema como o modo de alto contraste etc., eu quero os estilos finais que foram usados ​​para renderizar a página está sendo mostrado. Por favor sugira

EDITAR: Se eu tiver uma ferramenta, que também suporta o IE6, isso seria ótimo. Porque a página que estou visualizando será exibida com mais frequência do que qualquer outro navegador.

Obrigado e cumprimentos Prasanna Ram


2


origem


As coisas em, por exemplo, superuser.com/questions/43280/… não são suficientes? - Arjan
@Arjan: link maravilhoso. Obrigado! Isso me permite saber as alterações que foram afetadas devido às configurações do sistema de alto contraste também? - vpram86
(Como você parece gostar de coisas como Firebug e Web Inspector, você pode querer mudar sua pergunta para remover o requisito "dentro da própria tag", para ter mais ênfase na coisa de alto nível de contraste.) - Arjan
@Arjan: Na verdade eu queria enfatizar que, quaisquer que sejam as mudanças que afetem a página da web, como HC, eu quero ter a fonte final com os estilos dentro da própria tag correspondente. É o resultado final de qualquer ferramenta que eu estou procurando. Isso me ajudaria a comparar e ver o que está mudando e afetado como parte da mudança de HC no sistema operacional. Mas eu acho que não deixei claro o suficiente. Então é melhor eu remover isso :). Obrigado! - vpram86
Por favor, forneça um exemplo para "minha página se comporta de maneira diferente" e "A página está definitivamente sendo alterada e o navegador definitivamente faz algo em nossa página no HC". E embora eu ainda não pense que tal ferramenta existe (como eu acho que o alto contraste do sistema não afeta nenhum CSS), eu acho que você pode querer mudar o título para algo como "Como visualizar o CSS final computado, incluindo substituições, como configurações de alto contraste?". Ou "Posso ver uma página da web como a experimentada por alguém que exige configurações de acessibilidade de alto contraste?" Ou precisa de mais alguma coisa? - Arjan


Respostas:


Configurações de alto contraste fornecidas pelo SO nada para fazer com CSS. (Ou com navegadores para esse assunto, um navegador será totalmente inconsciente de tais configurações, e não irá alterar qualquer CSS para configurações de alto contraste do sistema.) Eu não acho que você vai encontrar qualquer ferramenta que "ajusta" o CSS para compensar configurações de alto contraste.

(Talvez existam ferramentas on-line, assim como Vischeck pode mostrar como as coisas parecem para alguém que é daltônico. Mas se existe uma ferramenta semelhante, na verdade não tenho certeza de como isso ajudaria qualquer desenvolvedor que não precisa de configurações de alto contraste, para determinar se alguém pode ver o site ... Então, essa ferramenta online precisaria "converter" alto contraste para pessoas com visão normal, para obter alguns idéia do que uma pessoa com deficiência visual experimentaria.)


1



Muito obrigado Arjan. Meu problema é para o navegador diferente minha página se comporta de maneira diferente em configurações normais e de alto contraste (especialmente diferentes versões do IE). Eu queria verificar qual elemento está sendo afetado como parte da alteração do HC dentro do navegador para que eu pudesse torná-lo mais estável. - vpram86
Mas como você saberia como os olhos ou a mente de alguém que necessidades (e, portanto, usa) alto contraste, vai realmente interpretar esse contraste maior? Eu realmente acho que você precisa perguntar a uma pessoa com deficiência visual, ou encontrar alguma ferramenta online que "compense" alto contraste para pessoas com visão normal. (Em qualquer caso, o navegador estará totalmente inconsciente e NÃO mudará seu CSS para configurações de alto contraste em todo o sistema.) - Arjan
@Arjan: Eu entendo completamente Arjan. Mas eu queria encontrar se há um caminho. A página está definitivamente sendo alterada e o navegador definitivamente faz algo em nossa página no HC. Eu pensei que haveria um gancho em algum lugar para o que element / style / property está sendo afetado exatamente. Desde que eu não tenho certeza estou procurando. - vpram86


Você já tentou usar Firebug?

O Firebug integra-se ao Firefox para colocar   uma riqueza de ferramentas de desenvolvimento web em   seus dedos enquanto você navega. Você   pode editar, depurar e monitorar CSS,   HTML e JavaScript ao vivo em qualquer web   página.


4



Eu também recomendaria o Firebug, mas ele não mostra o css depois de alterações do usuário final, como o modo de alto contraste ou modificação de páginas da Web com o greasemonkey. - Jared Harley
Muito obrigado! Existe um semelhante para o IE? Eu preciso disso para o IE na maioria das vezes. - vpram86
Você pode tentar usar o Firebug Lite (getfirebug.com/lite.html) por isso - quickcel


Tente usar o Chrome - você pode selecionar qualquer parte de uma página, clicar com o botão direito e "Inspecionar elemento".

Isso mostra uma árvore de todo o código da página e você pode ver o CSS aplicado a qualquer elemento na árvore


1



Obrigado! Isso mostra alterações de alto contraste no nível do sistema operacional dinamicamente? - vpram86


Usando PC virtual[*] (também conhecido como "Modo Windows XP" no Windows 7) (ou outra solução de máquina virtual) é uma boa maneira de testar páginas da Web em uma ampla variedade de navegadores e configurações. A idéia é, desde que você não pode instalar o IE6 / 7/8 simultaneamente em um único PC, você pode instalá-los em diferentes máquinas virtuais para testes.

Microsoft fornece imagens VPC pré-configurado com o IE6 / 7/8 no XP ou no Vista. São downloads grandes (cerca de 700 MB), mas fornecem uma imagem VPC completa pré-configurada com uma versão específica do IE, feita para testes de compatibilidade de aplicativos e sites. Eles são limitados no tempo e expiram 120 dias após o primeiro uso (para as imagens do Vista) ou em 1º de abril de 2010 (para as imagens do XP (assumindo que não é apenas uma piada do primeiro de abril)).

Uma vantagem para você: configurar um VPC para executar no modo de alto contraste e executá-lo lado a lado com outro VPC em execução no modo de não alto contraste (com a mesma versão do IE).

[*] Não é um endosso do produto Virtual PC. Você pode fazer a mesma coisa com VMwareou VirtualBoxou o produto de sua máquina virtual de sua escolha.


1