Отключить все таблицы стилей CSS
Учитывая, что большинство современных страниц определяют все стили во внешних CSS-файлах, которые включены в <head>, удаление headтега эффективно удалит все стили (кроме явных встроенных стилей и стилей, установленных скриптами). Щелкните правой кнопкой мыши страницу, выберите « Проверка» в контекстном меню и вставьте ее на вкладку «Консоль»:
document.head.parentNode.removeChild(document.head);
А вот версия вышеприведенного кода в виде букмарклета, которую можно вставить в качестве URL-адреса закладки (переключить панель закладок в Chrome с помощью ⌘+ shift+ bна Mac или ctrl+ shift+ bв Linux / Windows) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
Вы также можете ввести указанный выше код непосредственно в адресную строку, но перед тем, как это сделать, прочитайте примечание в конце ответа. ,
Удаление <head>также можно выполнить на вкладке Элементы devtools , щелкнув правой кнопкой мыши тег заголовка и удалив его через контекстное меню:
ПРИМЕЧАНИЕ. Удаление тега head - это всего лишь грубый метод, поскольку он убивает все стили, javascript, веб-шрифты и т. Д., И если содержимое страницы отображается с помощью javascript, то, скорее всего, вы получите пустую страницу. На большинстве сайтов это, вероятно, даст вам ожидаемые результаты.
Более частый вариант использования - удаление определенных раздражающих вещей на странице, таких как цвета, поля, фреймы и т. Д. В этом случае один из следующих букмарклетов обеспечит более детальный контроль.
Удалить цвета, фоны, поля, отступы, ширину
Создайте закладку и добавьте следующий фрагмент в качестве 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';}})()
Теперь вы можете щелкнуть свой букмарклет, чтобы очистить стиль CSS на текущей странице и сделать его более читабельным.
Примечание. Фактически для страницы может быть <style>блок внутри <body>тега - стандарт HTML5 позволяет это, и большинство браузеров поддерживают его. Пока что это не обычная практика, но по мере развития веб-фреймворков мы можем увидеть больше «локальных таблиц стилей» в будущем.
Если вы просто хотите улучшить читабельность, то отключение всех CSS может не дать наилучшего результата. Для таких случаев букмарклет ниже может дать лучшие результаты:
Удалите колонтитулы без прокрутки (увеличивает область чтения)
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);}}})()
Удалить iframes (убивает большинство баннеров и т. Д.)
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
Это также убьет большинство встроенных видео, виджеты комментариев и т. Д.
Удалить все изображения (просмотр в офисном режиме)
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';}})();
Примечание: это нужно использовать в сочетании с вышеупомянутым удалением iframes , так как большинство изображений баннера обычно находятся внутри iframes, и этот букмарклет работает только с документом верхнего уровня.
Букмарклеты также можно использовать для сайтов, которые не будут отображать контент при использовании блокировщиков рекламы.
Вы можете использовать Bookmarklet Builder для объединения кода ( кнопка « Формат» ), редактирования его в соответствии с вашими потребностями и минимизации его возврата ( кнопка « Сжать» ), чтобы вы могли вставить его в качестве URL-адреса закладки.
Перечисленные выше букмарклеты также будут работать в большинстве мобильных веб-браузеров на iOS и Android. Мобильные браузеры не будут запускать javascript из адресной строки, но вы можете добавить закладку, вставить код js в качестве URL-адреса, установить метку, например clean, а затем запустить ее, коснувшись пункта в меню закладок (для сафари IOS) или набрав cleanв адресной строке, а затем коснувшись соответствующей закладки в выпадающем списке. Это может улучшить читаемость страниц, которые не имеют режима чтения .
ПРИМЕЧАНИЕ. Если вы скопируете и вставите вышеуказанные букмарклеты непосредственно в адресную строку, вы заметите, что браузеры удаляютjavascript: префикс - это функция безопасности браузера, поэтому, если вы хотите протестировать букмарклеты непосредственно из адресной строки, нужно предварительно подготовить javascript:вручную перед кодом JS.
Расширения Chrome
Если вы ищете расширение Chrome, то есть uMatrix, где вы можете щелкнуть столбец CSS, чтобы отключить все CSS и стили, и Web Developer, где на вкладке CSS у вас есть опция Отключить все стили .
