Desabilitando CSS em Navegadores para Teste de Sites
Resumo Rápido
Para desabilitar instantaneamente todos os estilos CSS em uma página da web, siga estes passos:
- Abra as Ferramentas de Desenvolvedor usando a tecla
F12. - Navegue até a aba "Elementos" e encontre as tags
<style>e<link>onde estão as referências de CSS. - Remova-as usando o menu de contexto que aparece ao clicar com o botão direito.
- Para desabilitar estilos inline, basta desmarcar as propriedades correspondentes na aba "Estilos".
Veja como fica a desabilitação de CSS inline:
/* Antes: cor do arco-íris */
element {
color: blue;
}
/* Depois: monocromático, como uma TV em preto e branco - basta desmarcar nas ferramentas de desenvolvedor */Métodos de Desabilitação de CSS por Navegador
Desabilitar CSS varia entre diferentes navegadores:
Google Chrome
- Nas Ferramentas de Desenvolvedor (Ferramentas de Desenvolvedor (
Ctrl+Shift+J)), você pode remover CSS na aba "Fontes". - Crie um favorito com JavaScript para remover CSS dinamicamente usando um script nos favoritos.
Mozilla Firefox
- Use o recurso "Sem Estilo" no menu
Exibir > Estilo da Página. - Ative ou desative o CSS com um único clique utilizando a barra de ferramentas das Ferramentas de Desenvolvedor.
Safari e Opera
- No Safari, vá em
Desenvolver > Desabilitar Estilos. - No Opera, selecione "Modo do Usuário" em
Página > Estilopara desabilitar estilos.
Internet Explorer
- No IE 11 e versões anteriores, use as barras de ferramentas para desligar completamente os estilos.
Extensões de Desenvolvedor Web
O plugin Web Developer para Firefox e Chrome permite que você desabilite todos os estilos de uma vez usando o atalho Alt+Shift+A.
Estratégias Eficazes para Desabilitar CSS
Desabilitar CSS pode aumentar sua produtividade. Aqui estão algumas dicas:
Abordagem aos Estilos Inline
Os estilos inline permanecem ativos mesmo quando os estilos externos são desativados, então precisam ser editados separadamente.
Não Exagere no jQuery
Usar jQuery para remover estilos pode ser interessante, mas pode afetar o desempenho.
Considere o Desempenho
Se estiver usando um script baseado em favoritos, certifique-se de que seu JavaScript não torne o navegador mais lento.
Padronizando Ações
Seus passos para desabilitar estilos devem ser simples e reproduzíveis. O plugin Web Developer mencionado anteriormente é inestimável aqui.
Visualização
Visualize um site como uma tela onde o navegador é a mão do artista, HTML é a tela e CSS é a tinta:
Navegador 🖌
Elementos HTML 🎨
Cores CSS 🌈Agora, se você desabilitar o CSS:
// CSS habilitado: Picasso está em ação
[*Elemento HTML* 🖌, *Cor CSS* 🌈]
// CSS desabilitado: Picasso foi embora
[*Elemento HTML* 🖌]Isso oferece uma oportunidade de examinar os fundamentos e apreciar a estrutura (HTML) sem a sobreposição de cor (CSS).
Depuração Quando o CSS Está Desativado
Ao desabilitar estilos, você pode descobrir novos aspectos do uso do seu site.
Acessibilidade
Desligando o CSS, você pode avaliar o quão bem organizado está o seu conteúdo HTML.
Preservando a Estrutura Intencionada
Isso ajuda a verificar se a integridade estrutural do HTML é mantida sem estilos.
Conexão Lenta?
Essa abordagem fornece uma ideia de como o site vai parecer durante tempos de carregamento lentos, quando apenas o HTML está acessível.
Recursos Úteis
- Web Developer — um plugin para gerenciar CSS no navegador.
- Aprenda e Edite CSS — Documentação do Firefox — permite experimentar com CSS.
- Depurador de Layout CSS de 108 bytes · GitHub — um script de favorito para depuração rápida de CSS.
- Guia de Flavio Copes — um guia detalhado sobre desabilitar CSS.
- Discussão relacionada no StackOverflow sobre PHP — recomendações para desabilitar estilos com um clique.