Deshabilitar todas las hojas de estilo CSS
Dado que la mayoría de las páginas modernas definen todos los estilos en los archivos CSS externos que se incluyen en el <head>, la eliminación de la headetiqueta eliminará efectivamente todos los estilos (excepto los estilos en línea explícitos y los establecidos por scripts). Haga clic derecho en una página, seleccione Inspeccionar en el menú contextual y péguelo en la pestaña Consola:
document.head.parentNode.removeChild(document.head);
Y aquí está la versión bookmarklet del código anterior que se puede pegar como la URL de un marcador (alternar la barra de marcadores en Chrome con ⌘+ shift+ ben Mac o ctrl+ shift+ ben Linux / Windows) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
También puede escribir el código anterior directamente en la barra de direcciones, pero lea la nota al final de la respuesta antes de hacerlo. .
La eliminación <head>también se puede hacer desde la pestaña Elementos de devtools , haciendo clic derecho en la etiqueta del encabezado y eliminándola a través del menú contextual:
NOTA: Quitar la etiqueta de la cabeza es un enfoque de fuerza bruta, ya que eliminará todos los estilos, javascript, fuentes web, etc. En la mayoría de los sitios, probablemente le dará los resultados esperados.
Un caso de uso más frecuente es eliminar cosas molestas específicas en una página, como colores, márgenes, marcos flotantes, etc. En tal caso, uno de los siguientes marcadores proporcionará un control más granular.
Eliminar colores, fondos, márgenes, rellenos, anchos
Cree un marcador y agregue el siguiente fragmento como 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';}})()
Ahora puede hacer clic en su bookmarklet para limpiar el estilo CSS en la página actual para hacer algo más legible.
Nota: De hecho, es posible que una página tenga un <style>bloque dentro de la <body>etiqueta; el estándar HTML5 permite esto y la mayoría de los navegadores lo admiten. Hasta ahora, esto no es una práctica común, pero a medida que evolucionan los marcos web, podríamos ver más 'hojas de estilo locales' en la web futura.
Si simplemente desea mejorar la legibilidad, deshabilitar todo CSS podría no proporcionar la mejor experiencia. Para tales casos, los bookmarklets a continuación pueden dar mejores resultados:
Eliminar encabezados / pies de página que no se desplazan (aumenta el área de lectura)
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);}}})()
Eliminar iframes (mata la mayoría de los banners, etc.)
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%29
Esto también eliminará la mayoría de los videos incrustados, widgets de comentarios, etc.
Eliminar todas las imágenes (navegación en modo oficina)
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';}})();
Nota: este debe usarse en combinación con Eliminar marcos flotantes anteriores, ya que la mayoría de las imágenes de pancartas suelen estar dentro de marcos flotantes y este marcador solo funciona con el documento de nivel superior.
Los marcadores también se pueden usar para sitios que no mostrarán contenido cuando se usan bloqueadores de anuncios.
Puede usar Bookmarklet Builder para desminificar el código (el botón Formatear ), editarlo para adaptarlo a sus necesidades y minimizarlo (el botón Comprimir ) a algo que pueda pegar como URL del marcador.
Los marcadores enumerados anteriormente también funcionarán en la mayoría de los navegadores web móviles tanto en iOS como en Android. Los navegadores móviles no ejecutarán javascript desde la barra de direcciones, pero puede agregar un marcador, pegar el código js como URL, establecer una etiqueta, por ejemplo clean, y luego ejecutarlo tocando el elemento en el menú de marcadores (para IOS safari) o escribiendo cleanen la barra de direcciones y luego tocando el marcador correspondiente en el menú desplegable de sugerencia automática. Esto puede mejorar la legibilidad para páginas que no tienen modo de lectura .
NOTA: Si copia y pega los marcadores anteriores directamente en la barra de direcciones, notará que los navegadores eliminan eljavascript: prefijo; esta es una función de seguridad del navegador, por lo que si desea probar los marcadores directamente desde la barra de direcciones, entonces necesita anteponer javascript:manualmente antes del código js.
Extensiones de Chrome
Si está buscando una extensión de Chrome, existe uMatrix, donde puede hacer clic en la columna CSS para deshabilitar todos los estilos y CSS, y Web Developer, donde en la pestaña CSS tiene la opción Deshabilitar todos los estilos .
