Sous Firefox, Affichage -> Style de page -> Aucun style permet d'afficher une page sans style. Utile pour certains sites trop dépendants de JS / feuilles de style (par exemple: Lifehacker).
Existe-t-il des fonctionnalités similaires sous Google Chrome, et / ou où y accéder?
Version 19.0.1084.56 / Ubuntu.
Réponses:
Étant donné que la plupart des pages modernes définissent tous les styles dans les fichiers CSS externes qui sont inclus dans le <head>, la suppression de la headbalise supprimera effectivement tous les styles (sauf les styles en ligne explicites et ceux définis par les scripts). Faites un clic droit sur une page, choisissez Inspecter dans le menu contextuel et collez-le dans l'onglet Console:
document.head.parentNode.removeChild(document.head);Et voici la version bookmarklet du code ci-dessus qui peut être collée comme URL d'un signet (basculez la barre de signets dans Chrome avec ⌘+ shift+ bsur Mac ou ctrl+ shift+ bsur Linux / Windows) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()Vous pouvez également taper le code ci-dessus directement dans la barre d'adresse mais lisez la note à la fin de la réponse avant de le faire. .
La suppression du <head>peut également être effectuée à partir de l' onglet Éléments devtools , en cliquant avec le bouton droit sur la balise head et en la supprimant via le menu contextuel:
REMARQUE: La suppression de la balise head est un peu une approche de force brute car elle tuera tous les styles, javascript, polices web, etc., et si le contenu de la page est rendu par javascript, vous obtiendrez très probablement une page vide. Sur la majorité des sites, il vous donnera probablement les résultats attendus.
Un cas d'utilisation plus fréquent consiste à supprimer des éléments gênants spécifiques sur une page, tels que les couleurs, les marges, les cadres iFrame, etc. Dans un tel cas, l'un des bookmarklets suivants fournira un contrôle plus granulaire.
Créez un signet et ajoutez l'extrait de code suivant comme URL:
javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()Maintenant, vous pouvez cliquer sur votre bookmarklet pour nettoyer le style CSS de la page actuelle en quelque chose de plus lisible.
Remarque: Il est en fait possible qu'une page ait un
<style>bloc à l'intérieur de la<body>balise - la norme HTML5 le permet et la plupart des navigateurs le prennent en charge. Jusqu'à présent, ce n'est pas une pratique courante, mais à mesure que les cadres Web évoluent, nous pourrions voir davantage de «feuilles de style locales» dans le futur Web.
Si vous souhaitez simplement améliorer la lisibilité, la désactivation de tous les CSS peut ne pas offrir la meilleure expérience. Dans de tels cas, les bookmarklets ci-dessous peuvent donner de meilleurs résultats:
javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29Cela tuera également la plupart des vidéos intégrées, des widgets de commentaires, etc.
javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();Remarque: celui-ci doit être utilisé en combinaison avec Supprimer les iframes ci-dessus, car la plupart des images de bannière sont généralement à l'intérieur des iframes et ce bookmarklet ne fonctionne qu'avec le document de niveau supérieur.
Les bookmarklets peuvent également être utilisés pour les sites qui n'afficheront pas de contenu lorsque des bloqueurs de publicité sont utilisés.
Vous pouvez utiliser le Générateur de Bookmarklet pour minimiser le code (le bouton Format ), le modifier en fonction de vos besoins et le réduire (le bouton Compresser ) en quelque chose que vous pouvez coller comme URL de signet.
Les bookmarklets répertoriés ci-dessus fonctionneront également sur la plupart des navigateurs Web mobiles sur iOS et Android. Les navigateurs mobiles n'exécuteront pas javascript depuis la barre d'adresse, mais vous pouvez ajouter un signet, coller le code js comme URL, définir une étiquette, par exemple
clean, puis l'exécuter en appuyant sur l'élément dans le menu des signets (pour IOS safari) ou en tapantcleandans la barre d'adresse, puis en appuyant sur le signet correspondant dans la liste déroulante de suggestion automatique. Cela peut améliorer la lisibilité des pages qui n'ont pas de mode de lecture .REMARQUE: Si vous copiez et collez les bookmarklets ci-dessus directement dans la barre d'adresse, vous remarquerez que les navigateurs suppriment le
javascript:préfixe - il s'agit d'une fonction de sécurité du navigateur, donc si vous souhaitez tester les bookmarklets directement à partir de la barre d'adresse, alors vous besoin de préfixerjavascript:manuellement avant le code js.
Si vous recherchez une extension chrome, il y a uMatrix où vous pouvez cliquer sur la colonne CSS pour désactiver tous les CSS et styles, et Web Developer où sous l'onglet CSS vous avez une option Désactiver tous les styles .
Vous pouvez utiliser l' extension Web Developer pour cela:
Il n'y a pas de version Chrome de No Style (encore?), Vous devez donc utiliser une autre méthode , comme certaines des autres extensions qui peuvent désactiver les styles.
Vous pouvez utiliser le désactiver Stylesheets extension à désactiver les feuilles de style en général ou du Web Developer extension à activer tous les styles ou désactiver. Pendule est également une extension populaire à cet effet.
Vous pouvez également désactiver les styles avec les outils de développement [1] [2] :
Icône d'engrenage -> Onglet CSS -> Désactiver tous les styles
Si vous faites cela pour des raisons de vitesse, puis-je suggérer une alternative: Liens 2
Lorsque le navigateur s'ouvre, appuyez sur get saisissez l'URL à laquelle vous souhaitez accéder. Ce navigateur est léger sur les normes qu'il prend en charge, mais incroyablement rapide même sur un très vieux PC.
Sous Firefox, Affichage -> Style de page -> Aucun style permet d'afficher une page sans style. Utile pour certains sites trop dépendants de JS / feuilles de style (par exemple: Lifehacker). Existe-t-il des fonctionnalités similaires sous Google Chrome, et / ou où y accéder? Version 19.0.1084.56 / Ubuntu. - Dr Edward Morbius
...
Oui. Désactiver la feuille de style pour la session en cours serait suffisant. Le basculement de CSS, JS, cookies, etc., pour tous les sites est maintenant terminé. Malheureusement, cela semble être le cas. Je décrirais l'expérience comme "légèrement ennuyeuse". - Dr Edward Morbius
En utilisant la bibliothèque jQuery, à console(Chromium / Chrome, Firefox, Opera) devrait effacer les styles d'auteur d'un document HTML:
(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()
https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js
Pour activer ou désactiver les styles dans un document HTML, cela peut être utile:
https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js
Charge jQuery dans le document, à partir du fichier local ou du CDN de jQuery, enregistre le succès, l'état du style de journaux, active ou désactive les styles d'auteur par la touche de la barre d'espace ou sur la console.
Testé dans Chromium / Chrome, Firefox et Opera pour les documents HTML locaux et en ligne.
Mon outil actuellement préféré pour cela est l' extension de navigateur uMatrix , qui permet des contrôles encore plus fins: désactivez CSS, JS, les images ou d'autres fonctionnalités, en chargeant le domaine, par rapport au site Web actuel. Les modifications peuvent être facilement basculées, rendues permanentes ou converties en règles par défaut.
Ceci et élégant répondent à la plupart de mes besoins de personnalisation en tant que lecteur. Reader-Mode (Firefox) a tendance à fournir un contenu de style uniforme de manière assez fiable.
Étendre la question: sur Chrome / Android, je n'ai pas d'option viable et les solutions suggérées ci-dessus ne fonctionnent pas.
code jquery sur une seule ligne ... utiliser
jQuery("head").empty();
ou en javascripts, vous pouvez utiliser
document.getElementsByTagName("head")[0].innerText="";
allez sur votre page Web, puis appuyez sur ctrl + shift + i, vous verrez un menu sélectionner une console et collez ce document.getElementsByTagName("head")[0].innerText="";code, puis appuyez sur entrée
document.getElementsByTagName("head")[0].innerText="";code, puis appuyez sur entrée