Tüm CSS stil sayfalarını devre dışı bırak
Modern sayfaların çoğunun içerdiği harici CSS dosyalarındaki tüm stilleri tanımlamasından dolayı <head>
, head
etiketi kaldırmak tüm stilleri etkin bir şekilde kaldırır (açık satır içi stilleri ve komut dosyaları tarafından belirlenenler hariç). Bir sayfaya sağ tıklayın , içerik menüsünden Inspect'i seçin ve bunu Konsol sekmesine yapıştırın:
document.head.parentNode.removeChild(document.head);
Ve burada bir iminin URL olarak yapıştırılabilir Yukarıdaki kod yer işareti versiyonudur (Chrome'da imi çubuğuna geçiş ⌘+ shift+ bMac veya ctrl+ shift+ bLinux / Windows üzerinde) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
Ayrıca yukarıdaki kodu doğrudan adres çubuğuna da yazabilirsiniz, ancak yanıtlamadan önce notun sonunda okuyabilirsiniz. .
<head>
Kutunun çıkarılması, baş etiketine sağ tıklayıp içerik menüsünden silerek devtools Elements sekmesinden de yapılabilir :
NOT: Baş etiketini kaldırmak, tüm stilleri, javascript, web fontlarını, vb. Öldürdüğü için bir kaba kuvvet yaklaşımıdır ve sayfa içeriği javascript tarafından oluşturulmuşsa büyük olasılıkla boş bir sayfa alırsınız. Sitelerin çoğunda muhtemelen beklenen sonuçları verecektir.
Daha sık kullanılan bir durum, bir sayfadaki renkler, kenar boşlukları, iframe vb. Gibi rahatsız edici şeyleri ortadan kaldırmaktır. Böyle bir durumda, aşağıdaki yer işaretlerinden biri daha ayrıntılı kontrol sağlayacaktır.
Renkleri, arka planları, kenar boşluklarını, dolguları ve genişlikleri kaldırın
Bir yer imi oluşturun ve aşağıdaki snippet'i URL olarak ekleyin:
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';}})()
Şimdi , geçerli sayfadaki CSS stilini daha okunaklı bir şeyle temizlemek için yer imini tıklayabilirsiniz .
Not: Aslında, bir sayfanın etiket <style>
içinde bir bloğu olması mümkündür <body>
- HTML5 standardı buna izin verir ve çoğu tarayıcı bunu destekler. Şimdiye kadar bu yaygın bir uygulama değil, ancak web çerçeveleri geliştikçe gelecekteki web'de daha fazla “yerel stil sayfası” görebiliriz.
Okunabilirliği artırmak istiyorsanız, tüm CSS’leri devre dışı bırakmak en iyi deneyimi sağlamayabilir. Bu gibi durumlarda, aşağıdaki yer imleri daha iyi sonuçlar verebilir:
Kaydırmayan başlıkları / altbilgileri kaldırın (okuma alanını arttırır)
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);}}})()
İframe'leri kaldırın (çoğu afişi vb. Öldürür)
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
Bu aynı zamanda çoğu gömülü videoyu, yorum widget'ını vb.
Tüm resimleri kaldır (ofis modu tarama)
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';}})();
Not: bunun çoğu, iframe'leri kaldır ile birlikte kullanılması gerekir , çünkü çoğu afiş resmi genellikle iframe'lerin içindedir ve bu yer imi yalnızca en üst düzey belgeyle çalışır.
Yer imleri, reklam engelleyiciler kullanıldığında içerik göstermeyen siteler için de kullanılabilir.
Sen kullanabilirsiniz Bookmarklet Builder kodunu (unminify için Biçim , düğme) düzenlemek sizin ihtiyaçlarınıza göre ve geri (onu küçültmek Sıkıştır düğmesi) Eğer imi URL olarak yapıştırabilirsiniz şey.
Yukarıda listelenen yer işaretleri, hem iOS hem de Android'deki çoğu mobil web tarayıcısında da çalışır. Mobil tarayıcılar adres çubuğundan javascript'i çalıştırmaz, ancak bir yer imi ekleyebilir, js kodunu URL olarak yapıştırabilir, bir etiket ayarlayabilir, örneğin clean
, ve ardından yer imleri menüsündeki öğeye dokunarak çalıştırabilirsiniz (IOS safari için) veya clean
adres çubuğuna yazarak ve ardından otomatik olarak en aşağı açılan açılan menüdeki ilgili yer imine dokunarak. Bu, okuma modu olmayan sayfaların okunabilirliğini artırabilir .
NOT: Yukarıdaki yer imlerini doğrudan adres çubuğuna kopyalayıp yapıştırırsanız, tarayıcılarınjavascript:
ön eki kaldırdığını fark edersiniz - bu bir tarayıcı güvenlik özelliğidir; bu nedenle, yer imlerini doğrudan adres çubuğundan test etmek istiyorsanız, javascript:
js kodundan önce manuel olarak hazırlamanız gerekir .
Chrome Uzantıları
Bir krom uzantısı arıyorsanız, tüm CSS ve stilleri devre dışı bırakmak için CSS sütununu tıklayabileceğiniz uMatrix ve CSS sekmesi altında Tüm Stilleri Devre Dışı Bırak seçeneğinin bulunduğu Web Geliştiricisi vardır .