Comment désactiver CSS dans le navigateur à des fins de test
Est-il possible de désactiver tous les CSS externes dans un navigateur (Firefox, Chrome ...)?
Lorsque vous utilisez une connexion Internet plus lente, parfois, seul le code HTML nu est chargé par le navigateur, sans les informations CSS. On dirait que la page a été posée brute à l'écran. Vous auriez aussi remarqué cela 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 voulais pas dire que je voulais convertir un CSS externe en inline. Mais je veux un moyen de désactiver explicitement tous les CSS du navigateur afin de pouvoir repositionner mes éléments de manière plus lisible.
Je sais que je peux supprimer les entrées <link rel = 'stylesheet'>, mais que se passe-t-il si j'ai beaucoup de pages liées?
Dans Chrome/Chromium, vous pouvez le faire dans la console du développeur.
- Affichez la console du développeur en appuyant sur ctrl-shift-j ou sur Menu-> Outils-> Console du développeur.
- Dans la console du développeur, accédez à l'onglet Sources.
- Dans le coin supérieur gauche de cet onglet se trouve une icône avec un triangle d'affichage. Clique dessus.
- Accédez à <domaine> → css → <fichier css à éliminer>
- Mettez tout le texte en surbrillance et appuyez sur supprimer.
- Rincez et répétez pour chaque feuille de style que vous souhaitez désactiver.
Firefox (Win et Mac)
- Dans la barre d’outils du menu, choisissez: "Affichage"> "Style de page"> "Pas de style".
- Dans la barre d'outils de développeur Web, choisissez: "CSS"> "Désactiver les styles"> "Tous les styles".
Si la barre d'outils Web Dev est installée, vous pouvez utiliser les raccourcis clavier suivants: Command + Shift + S (Mac) et Control + Shift + S (Gagner)
- Safari (Mac): via la barre d’outils du menu, choisissez "Développer"> "Désactiver les styles"
- Opera (Win): via le menu, choisissez "Page"> "Style"> "Mode utilisateur"
- Chrome (Win): via l'icône en forme d'engrenage, choisissez l'onglet "CSS"> "Désactiver tous les styles"
- Internet Explorer 8: dans la barre d’outils du menu, choisissez "Vue"> "Style"> "Pas de style"
- Internet Explorer 7: via le menu IE de la barre d'outils du développeur: Désactiver> Tout le CSS
- Internet Explorer 6: dans la barre d’outils Web Accessibility, choisissez "CSS"> "Disable CSS"
Ce script fonctionne pour moi (pointe du chapeau à scrappedcola)
var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };
le style en ligne reste intact, bien que
En développant l’idée de scrappedocola/renergy, vous pouvez transformer le JavaScript en bookmarklet qui s’exécute par rapport au javascript: uri afin que le code puisse être réutilisé facilement sur plusieurs pages sans avoir à ouvrir les outils de développement ou à ne rien conserver. presse-papier.
Il suffit de lancer l'extrait de code suivant et de faire glisser le lien dans la barre de favoris/favoris:
<a href="javascript: var el = document.querySelectorAll('style,link');
for (var i=0; i<el.length; i++) {
el[i].parentNode.removeChild(el[i]);
};">
Remove Styles
</a>- J'éviterais de parcourir les milliers d'éléments d'une page avec
getElementsByTagName('*')et je devrais vérifier et agir individuellement. - J'éviterais de compter sur jQuery existant sur la page avec
$('style,link[rel="stylesheet"]').remove()lorsque le javascript supplémentaire n'est pas extrêmement encombrant.
Installez Adblock Plus, puis ajoutez la règle *.css dans les options de filtres (onglet filtres personnalisés). La méthode n'affecte que sur les feuilles de style externes . Cela ne désactive pas les styles en ligne.
Désactiver tous les CSS externes
Cette méthode fait exactement ce que vous avez demandé.
Une autre façon de réaliser la solution de @David Baucum en moins d'étapes:
- Clic droit -> inspecter l'élément
- Cliquez sur le nom de la feuille de style qui affecte votre élément (juste à droite de la déclaration)
- Mettez tout le texte en surbrillance et appuyez sur supprimer.
Cela pourrait être plus pratique dans certains cas.
Comme la plupart des réponses semblent assez anciennes ici, en référant aux éléments de menu que je n'arrive pas à trouver dans les versions actuelles des navigateurs populaires, voici comment procéder dans la version actuelle de Firefox Developer Edition:
- Ouvrir les outils de développement (
CTRL + SHIFT + I) - Sélectionnez l'onglet Editeur de styles
- Là, vous devriez voir toutes les sources de CSS dans votre document. Vous pouvez désactiver chacun d'eux en cliquant sur l'icône en forme d'œil à côté d'eux.
J'ai essayé dans les outils de développement Chrome et la méthode est valide uniquement si les CSS sont inclus en tant que fichiers externes et si cela ne fonctionne pas pour les styles en ligne.
Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());
Ou
var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());
Des explications
document.querySelectorAll('link')récupère tous les nœuds de liaison. Cela retournera un tableau d'éléments DOM. Notez que ce n'est pas l'objet Array de javascript.Array.prototype.forEach.call(linkElementsparcourt les éléments de lienelement.remove()supprime l'élément du DOM
Résultat en page HTML simple
Pour les pages qui utilisent des CSS externes (la plupart des pages de nos jours), une solution simple et fiable consiste à supprimer l'élément head:
document.querySelector("head").remove();
Cliquez avec le bouton droit de la souris sur cette page (dans Chrome/Firefox), sélectionnez , inspectez , collez le code dans la console devtools et appuyez sur , puis entrez .
Une version de bookmarklet du même code que vous pouvez coller en tant qu'URL d'un signet:
javascript:(function(){document.querySelector("head").remove();})()
Cliquez maintenant sur le signet dans la barre des favoris pour afficher la page sans aucune feuille de style CSS.
Le retrait de la tête ne fonctionnera pas pour les pages qui utilisent des styles en ligne.
Si vous utilisez Safari sur MacOS, procédez comme suit:
- Ouvrez les préférences Safari (cmd+,) et dans l'onglet Avancé, cochez la case "Afficher le menu de développement dans la barre de menus".
- Maintenant, dans le menu Développer, vous trouverez une option Désactiver les styles .
Sur Firefox, le moyen le plus simple consiste à utiliser la commande Affichage> Style de page> Aucun style. Mais cela désactive également les effets de certains balises HTML de présentation. Donc, utiliser des plugins comme suggéré par @JoelKuiper est généralement préférable; ils offrent plus de flexibilité (par exemple, en désactivant seulement certaines feuilles de style).
vous pouvez bloquer toute demande (même pour un seul fichier css) émanant de l'inspecteur avec les éléments suivants:
Clic droit> bloquer l'URL de la demande
sans désactiver d'autres fichiers css> https://umaar.com/dev-tips/68-block-requests/ C'est une fonctionnalité standard de l'inspecteur, aucun plugin ni astuce nécessaire
Lors de l'inspection de HTML avec l'outil de développement de navigateur que vous préférez (par exemple, Chrome Devtools), recherchez l'élément <head> et supprimez-le.
Notez que ceci supprimera aussi js mais pour moi c'est le moyen le plus rapide pour obtenir la page naked .
En fait, c'est plus facile que vous ne le pensez. Dans tous les navigateurs, appuyez sur F12 pour afficher la console de débogage. Cela fonctionne pour IE, Firefox et Chrome. Pas sûr de l'opéra. Puis commentez le CSS dans les fenêtres d'élément. C'est tout.
Toutes les réponses suggérées éliminent simplement le css pour le chargement de cette page. En fonction de votre cas d'utilisation, vous souhaiterez peut-être ne pas charger le fichier css du tout:
Outils de développement Chrome> Onglet Réseau> Faites un clic droit sur la feuille de style en question> Bloquer l'URL de la demande