Rimuovere i soft paywall con CSS e JavaScript
Alcuni paywall ti inviano l'intero articolo, poi lo nascondono dietro un overlay grigio e bloccano la pagina cosi non puoi scorrere. Il testo e gia nel tuo browser — semplicemente non puoi leggerlo. Questo articolo mostra come rimuovere quell'overlay con CSS e JavaScript. Prima, una distinzione importante e una nota onesta sull'etica.
Soft paywall contro hard paywall
Questo conta, quindi leggilo prima di ogni altra cosa.
- Un soft paywall invia l'HTML completo dell'articolo al tuo browser e poi lo nasconde: un overlay, un blocco dello scroll, una sfocatura, un vincolo di
max-height. Il contenuto e nel DOM. Puoi confermarlo nei DevTools — apri il pannello Elements e cerca un paragrafo dell'articolo; se c'e, il paywall e soft. - Un hard paywall non invia mai il corpo. Il server controlla il tuo abbonamento e solo allora restituisce il testo. Il DOM contiene un'anteprima e nient'altro. Nessun CSS o JavaScript puo evocare contenuto che non e mai stato consegnato.
Questo articolo riguarda solo i soft paywall — ripristinare la visibilita di testo gia presente nel tuo browser. Non puoi aggirare un hard paywall, e non dovresti provarci.
Una nota onesta su etica e legge
Produrre giornalismo di qualita costa denaro. Un soft paywall e la scommessa di un editore che insistere funzioni meglio che bloccare. Ridisegnare lo stile di una pagina nel tuo browser e legale — lo stesso diritto che permette l'esistenza degli ad blocker e della Modalita lettura — ma la legalita non e tutta la storia.
Sii un lettore corretto: se dipendi da una pubblicazione, abbonati. Usa queste tecniche per l'articolo occasionale, per l'accessibilita, o per leggere qualcosa che un amico ti ha mandato — non come modo per non pagare mai piu le notizie. Le redazioni che lasci senza fondi alla fine chiudono.
Trovare cio che nasconde l'articolo
Apri i DevTools, pannello Elements. I soft paywall usano un piccolo insieme di trucchi, di solito in combinazione:
- Un
diva posizione fissa con unz-indexalto che copre l'articolo — l'overlay. overflow: hiddenoposition: fixedsu<body>— il blocco dello scroll.- Un
filter: blur()sui paragrafi inferiori. - Un
max-heightpiuoverflow: hiddensul contenitore dell'articolo — il vincolo con dissolvenza.
Clicca sull'elemento overlay e leggi i suoi stili calcolati. Annota i nomi delle classi — li prenderai di mira nel passo successivo.
Rimuovere l'overlay
L'overlay e un elemento separato sovrapposto in cima. Nascondilo con CSS:
/* Common paywall overlay class and ID patterns */
.paywall,
.paywall-overlay,
.subscription-wall,
.piano-overlay,
.tp-modal,
.tp-backdrop,
[class*="paywall" i],
[class*="metering" i],
[id*="paywall" i] {
display: none !important;
}Usa il flag i per il matching degli attributi senza distinzione tra maiuscole e minuscole, esattamente come faresti per i banner dei cookie. Inizia in modo ampio, poi restringi a classi specifiche se prendi qualcosa di troppo.
Sbloccare lo scroll del body
Nascondere l'overlay non serve a nulla se la pagina e ancora congelata. I soft paywall bloccano lo scorrimento cosi non puoi raggiungere il testo nascosto. Forzalo di nuovo:
/* Restore normal scrolling */
html, body {
overflow: auto !important;
position: static !important;
height: auto !important;
}Se uno script continua a riapplicare il blocco, una piccola regola JS lo batte azzerando lo stile inline in un ciclo:
// Re-assert scrolling against a script that keeps locking it
setInterval(() => {
document.documentElement.style.overflow = 'auto';
document.body.style.overflow = 'auto';
document.body.style.position = 'static';
}, 400);Togliere la sfocatura al testo
Molti paywall lasciano nitidi i primi due paragrafi e sfocano il resto come anteprima. Il testo c'e tutto — e solo fuori fuoco. Rimuovi il filtro:
/* Kill the blur teaser */
.article-body,
.article-content,
[class*="blur" i],
[class*="fade" i] {
filter: none !important;
-webkit-filter: none !important;
}Se la sfocatura sta su un figlio specifico, ispezionalo e prendi di mira quella classe esatta — un generico * { filter: none } puo rompere effetti legittimi altrove nella pagina.
Rimuovere il vincolo di max-height
L'altra anteprima classica: il contenitore dell'articolo ha un max-height e overflow: hidden, cosi vedi la parte alta e una dissolvenza a gradiente. Togli il vincolo:
/* Unclamp the article so the full text shows */
.article-body,
.post-content,
[class*="article" i][class*="clamp" i],
[class*="gated" i] {
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* Remove the gradient fade element if it is a separate node */
.content-fade,
[class*="gradient-fade" i] {
display: none !important;
}Metterlo insieme in un'unica regola
Ogni editore usa un mix leggermente diverso. L'approccio efficiente con JustZix e una regola per sito, strettamente circoscritta:
- Crea una regola con il pattern di URL
https://news.example.com/*. - Incolla il CSS di overlay, sblocco dello scroll, rimozione della sfocatura e del vincolo nella scheda CSS.
- Aggiungi il JS di sblocco dello scroll solo se uno script continua a ribloccare la pagina.
- Tieni queste regole in una cartella chiamata "Lettura" cosi puoi rivederle e disattivarle come gruppo.
Poiche la regola e circoscritta a un solo dominio, non influira mai su un sito a cui preferiresti semplicemente abbonarti.
Vedi anche
- Disattiva i dark pattern e la falsa urgenza — le stesse abilita, applicate a UI manipolatorie.
- Un foglio di stile di stampa personalizzato per PDF migliori — ripulisci un articolo prima di salvarlo.
- Casi d'uso di JustZix per altre regole orientate alla lettura.
Per l'articolo occasionale nascosto dietro un soft overlay, installa JustZix e scrivi una regola circoscritta. E se leggi spesso una pubblicazione — pagala. E cio che fa continuare ad arrivare gli articoli.
Valuta questo articolo
Nessuna valutazione — sii il primo.