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

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, parfois seul le HTML brut est chargé par le navigateur sans les informations CSS. On dirait que la page a été posée à l'écran. Vous auriez également 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 le CSS externe en ligne. 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 faire si j'ai beaucoup de pages liées?

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 > Disable Styles > Disable All Styles

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

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

1. Ouvrez la console développeur en appuyant sur ctrl-shift-j ou Menu-> Tools-> Developer Console.
2. Dans la console développeur, accédez à l'onglet Sources.
3. Dans le coin supérieur gauche de cet onglet se trouve une icône avec un triangle d'affichage. Clique dessus.
4. Accédez à <domaine> → css → <fichier css que vous souhaitez éliminer>
5. Mettez en surbrillance tout le texte et appuyez sur Supprimer.
6. Rincez et répétez pour chaque feuille de style que vous souhaitez désactiver.

Firefox (Windows et Mac)

• Via la barre d'outils des menus, choisissez: "Affichage"> "Style de page"> "Aucun style"
• Dans la barre d'outils du développeur Web, choisissez: "CSS"> "Désactiver les styles"> "Tous les styles"

Si la barre d'outils Web Dev est installée, les utilisateurs peuvent utiliser les raccourcis clavier suivants: Command+ Shift+ S(Mac) et Control+ Shift+ S(Win)

• Safari (Mac): via la barre d'outils des menus, choisissez «Développer»> «Désactiver les 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 d'outils des menus, choisissez "Affichage"> "Style"> "Aucun style"
• Internet Explorer 7: via le menu IE Developer Toolbar: Désactiver> Tous les CSS
• Internet Explorer 6: via la barre d'outils d'accessibilité Web, choisissez «CSS»> «Désactiver 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, cependant

En développant l'idée de scrappedocola / renergy, vous pouvez transformer le JavaScript en un bookmarklet qui s'exécute contre lejavascript: URI afin que le code puisse être réutilisé facilement sur plusieurs pages sans avoir à ouvrir les outils de développement ou à conserver quoi que ce soit dans votre presse-papiers.

Exécutez simplement l'extrait de code suivant et faites glisser le lien vers votre 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 sur une page avec getElementsByTagName('*') et de devoir vérifier et agir individuellement sur chacun d'eux.
• J'éviterais de me fier à jQuery existant sur la page $('style,link[rel="stylesheet"]').remove()lorsque le javascript supplémentaire n'est pas extrêmement encombrant.

Installez Adblock Plus, puis ajoutez une *.cssrègle dans les options de filtres (onglet filtres personnalisés). La méthode n'affecte que les feuilles de style externes . Il 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:

1. Clic droit -> inspecter l'élément
2. Cliquez sur le nom de la feuille de style qui affecte votre élément (juste à droite de la déclaration)
3. Mettez en surbrillance tout le texte et appuyez sur Supprimer.

Cela pourrait être plus pratique dans certains cas.

Comme la plupart des réponses semblent assez anciennes ici, faisant référence à des éléments de menu que je ne semble pas trouver dans les versions actuelles des navigateurs populaires, voici comment le faire dans la version actuelle de Firefox Developer Edition:

• Ouvrir les outils de développement ( CTRL + SHIFT + I)
• Sélectionnez l'onglet Editeur de style
• 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.

Pour les pages qui reposent sur des CSS externes (la plupart des pages de nos jours), une solution simple et fiable consiste à tuer l' headélément:

document.querySelector("head").remove();

Cliquez avec le bouton droit sur cette page (dans Chrome / Firefox), sélectionnez Inspecter , collez le code dans la console devtools et appuyez sur Entrée .

Une version bookmarklet du même code que vous pouvez coller en tant qu'URL d'un favori:

javascript:(function(){document.querySelector("head").remove();})()

Cliquez maintenant sur le signet dans votre barre de favoris pour afficher la page sans aucune feuille de style css.

La suppression de la tête ne fonctionnera pas pour les pages qui utilisent des styles en ligne.

Si vous utilisez Safari sur MacOS, alors:

1. Ouvrez les préférences Safari ( cmd+ ,) et dans le menu avancé onglet cochez la case "Afficher le menu Développement dans la barre de menus".
2. Maintenant, dans le menu Développer , vous trouverez une option Désactiver les styles .

J'ai essayé dans les outils de développement Chrome et la méthode n'est valide que si le CSS est inclus en tant que fichiers externes et cela ne fonctionnera 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());

Explications

1. document.querySelectorAll('link')obtient tous les nœuds de liaison. Cela retournera un tableau d'éléments DOM. Notez qu'il ne s'agit pas d'un objet Array de javascript.
2. Array.prototype.forEach.call(linkElements boucle à travers les éléments de lien
3. element.remove() supprime l'élément du DOM

Résultat en une page HTML simple

vous pouvez bloquer toute demande (même pour un seul fichier css) de l'inspecteur avec ce qui suit:
    Clic droit> bloquer l'URL de la demande
sans désactiver les autres fichiers css> https://umaar.com/dev-tips/68-block-requests/ C'est une fonction d'inspecteur standard, pas de plugins ou astuces nécessaires

Sur Firefox, le moyen le plus simple consiste à utiliser la commande de menu Affichage> Style de page> Aucun style. Mais cela désactive également les effets de certains balisages 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, désactivation de certaines feuilles de style).

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 d'Opera. Puis commentez le CSS dans les fenêtres des éléments. C'est tout.

Tout en inspectant le HTML avec l'outil de développement de navigateur que vous préférez (par exemple Chrome Devtools), recherchez l' <head>élément et supprimez-le du tout.

Notez que ceci supprimera également js, mais pour moi, c'est le moyen le plus rapide d'obtenir la page nue .

Toutes les réponses suggérées éliminent simplement le css pour ce chargement de page. En fonction de votre cas d'utilisation, vous souhaiterez peut-être ne pas charger du tout le css:

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

Pour ceux qui ne veulent pas de plugin ou d'autres choses, nous pouvons utiliser le document.styleSheets pour désactiver / activer le css.

// code pour désactiver tous les css

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

Si vous utilisez Chrome, vous pouvez créer une fonction et l'ajouter à vos extraits. Afin que vous puissiez utiliser la console pour activer / désactiver le css pour tous les sites.

// Extraits de code -> DésactiverCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// dans la console

disableCss() // by default is disable
disableCss(false) // to enable