Вимкнути всі таблиці стилів 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 », клацнувши правою кнопкою миші тег заголовка та видаливши його через контекстне меню:
ПРИМІТКА. Видалення заголовка тегів - це жорстокий підхід, оскільки він знищить усі стилі, javascript, веб-шрифти тощо, і якщо вміст сторінки відображатиметься javascript, швидше за все, ви отримаєте порожню сторінку. На більшості сайтів це, ймовірно, дасть очікувані результати.
Більш частим випадком використання є видалення певних набридливих речей на сторінці, таких як кольори, поля, рамки кадрів тощо. У такому випадку одна з наведених нижче закладок забезпечить більш детальний контроль.
Видаліть кольори, фони, поля, підкладки, ширину
Створіть закладку та додайте такий URL-адресу як 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);}}})()
Видаліть iframe (вбиває більшість банерів тощо)
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';}})();
Примітка: цей варіант потрібно використовувати в поєднанні з Видалити рамки iffraes, наведені вище, оскільки більшість зображень банерів зазвичай знаходяться всередині iframes, і цей закладка працює лише з документом верхнього рівня.
Закладки також можна використовувати для сайтів, які не відображатимуть вміст, коли використовуються блокатори оголошень.
Ви можете скористатися програмою Bookmarklet Builder, щоб змінити код ( кнопка Формат ), відредагувати його відповідно до ваших потреб і мінімізувати його назад ( кнопка " Стиснення" ) до того, що ви можете вставити як URL-адресу закладок.
Перелічені вище закладки також працюватимуть у більшості мобільних веб-браузерів на iOS та Android. Мобільні браузери не запускатимуть JavaScript з адресного рядка, але ви можете додати закладку, вставити код js як URL-адресу, встановити мітку, наприклад clean, а потім запустити її, торкнувшись елемента в меню закладок (для IOS safari) або введіть cleanв адресному рядку, а потім торкніться відповідної закладки у спадному меню автозапропонування. Це може покращити читабельність сторінок, у яких немає режиму читання .
ПРИМІТКА. Якщо ви скопіюєте та вставите заклади вище безпосередньо в адресний рядок, ви помітите, що браузери видаляютьjavascript: префікс - це функція захисту браузера, тому, якщо ви хочете перевірити закладки безпосередньо з адресного рядка, тоді ви javascript:перед врученням коду js потрібно зробити вручну.
Розширення Chrome
Якщо ви шукаєте хромоване розширення, є uMatrix, де ви можете натиснути стовпець CSS, щоб відключити всі CSS та стилі, і веб-розробник, де на вкладці CSS ви маєте можливість вимкнути всі стилі .
