Comment désactiver le CSS dans le navigateur à des fins de test

Question

Existe-t-il un moyen de désactiver tous les CSS externes dans un navigateur (Firefox, Chrome...) ?

Lorsque vous utilisez une connexion Internet plus lente, il arrive parfois que seul le HTML de base soit chargé par le navigateur sans les informations CSS. Cela donne l'impression que la page a été posée à l'écran. Vous avez pu le remarquer également avec StackOverflow.

Je veux m'assurer que ma page Web s'affiche correctement même si les fichiers CSS ne sont pas chargés.

Je ne souhaite pas convertir les CSS externes en inline. Mais je veux trouver un moyen de désactiver explicitement tous les CSS du navigateur afin de pouvoir repositionner mes éléments de manière plus lisible et adaptée.

Je sais que je peux supprimer les entrées , mais que faire si j'ai beaucoup de pages liées ?

Answer 1

Dans Chrome/Chromium, vous pouvez le faire dans la console du développeur.

1. Ouvrez la console du développeur en appuyant sur ctrl-shift-j ou en allant dans Menu->Outils->Console du développeur.
2. Dans la console du développeur, allez à l'onglet Sources.
3. Dans le coin supérieur gauche de cet onglet se trouve une icône avec un triangle d'ouverture. Cliquez dessus.
4. Accédez à →css→
5. Soulignez tout le texte et appuyez sur Supprimer.
6. Répétez ces étapes pour chaque feuille de style que vous souhaitez désactiver.

Answer 2

Le plugin Web Developer pour Firefox et Chrome est capable de le faire

Une fois que vous avez installé le plugin, l'option est disponible dans le menu CSS. Par exemple, CSS > Désactiver les styles > Désactiver tous les styles

Alternativement, avec la barre d'outils du développeur activée, vous pouvez appuyer sur Alt+Shift+A.

Answer 3

Firefox (Win et Mac)

• Via la barre de menus, choisissez : "Afficher" > "Style de page" > "Aucun style"
• A travers la barre d'outils pour les développeurs Web, choisissez : "CSS" > "Désactiver les styles" > "Tous les styles"

Si la barre d'outils pour les développeurs Web est installée, les utilisateurs peuvent utiliser ces raccourcis clavier: Commande + Shift + S (Mac) et Contrôle + Shift + S (Win)

• Safari (Mac) : Via la barre de menus, choisissez "Développement" > "Désactiver Styles"
• Opera (Win) : Via le menu, choisissez "Page" > "Style" > "Mode utilisateur"
• Chrome (Win) : Via l'icône d'engrenage, choisissez l'onglet "CSS" > "Désactiver tous les styles"
• Internet Explorer 8 : Via la barre de menus, choisissez "Afficher" > "Style" > "Aucun style"
• Internet Explorer 7 : via le menu de la barre d'outils pour les développeurs IE : Désactiver > Tous les CSS
• Internet Explorer 6 : Via la barre d'outils pour l'accessibilité Web, choisissez "CSS" > "Désactiver CSS"

Answer 4

Ce script fonctionne pour moi (merci à scrappedcola)

var el=document.getElementsByTagName('*');for(var i=0;i

`

le style inline reste intact, cependant

`

Answer 5

Installer Adblock Plus, puis ajouter la règle *.css dans les options de filtres (onglet filtres personnalisés). La méthode n'affecte que les feuilles de style externes. Elle ne désactive pas les styles intégrés.

Désactiver tout le CSS externe

Cette méthode fait exactement ce que vous avez demandé.