Eliminar muros de pago blandos con CSS y JavaScript
Algunos muros de pago te envían el artículo completo y luego lo ocultan tras una capa gris y bloquean la página para que no puedas hacer scroll. El texto ya está en tu navegador — simplemente no puedes leerlo. Este artículo muestra cómo quitar esa capa con CSS y JavaScript. Primero, una distinción importante y una nota honesta sobre la ética.
Muro de pago blando vs. muro de pago duro
Esto importa, así que léelo antes que nada.
- Un muro de pago blando envía el HTML completo del artículo a tu navegador y luego lo oculta: una capa, un bloqueo de scroll, un desenfoque, un límite de
max-height. El contenido está en el DOM. Puedes confirmarlo en DevTools — abre el panel Elements y busca un párrafo del artículo; si está ahí, el muro es blando. - Un muro de pago duro nunca envía el cuerpo. El servidor comprueba tu suscripción y solo entonces devuelve el texto. El DOM contiene un adelanto y nada más. Ningún CSS ni JavaScript puede conjurar contenido que nunca se entregó.
Este artículo trata solo de muros de pago blandos — restaurar la visibilidad de un texto que ya está en tu navegador. No puedes saltarte un muro de pago duro, y no deberías intentarlo.
Una nota honesta sobre ética y ley
El periodismo de calidad cuesta dinero producirlo. Un muro de pago blando es la apuesta de un editor de que insistir funciona mejor que bloquear. Re-estilizar una página en tu propio navegador es legal — el mismo derecho que permite que existan los bloqueadores de anuncios y el Modo Lectura — pero la legalidad no es toda la historia.
Sé un lector decente: si dependes de una publicación, suscríbete a ella. Usa estas técnicas para el artículo puntual ocasional, por accesibilidad o para leer algo que te ha enviado un amigo — no como forma de no pagar nunca más por las noticias. Las redacciones que dejas sin financiación terminan cerrando.
Encontrar qué oculta el artículo
Abre DevTools, panel Elements. Los muros de pago blandos usan un pequeño conjunto de trucos, normalmente combinados:
- Un
divde posición fija con unz-indexalto que cubre el artículo — la capa. overflow: hiddenoposition: fixeden<body>— el bloqueo de scroll.- Un
filter: blur()en los párrafos inferiores. - Un
max-heightmásoverflow: hiddenen el contenedor del artículo — el límite con desvanecido.
Haz clic alrededor del elemento de la capa y lee sus estilos computados. Anota los nombres de las clases — los apuntarás a continuación.
Quitar la capa superpuesta
La capa es un elemento separado superpuesto encima. Ocúltala 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 el flag i para coincidencia de atributos sin distinguir mayúsculas, exactamente como harías con los avisos de cookies. Empieza amplio y luego ajusta a clases concretas si capturas algo de más.
Desbloquear el scroll del body
Ocultar la capa no sirve de nada si la página sigue congelada. Los muros de pago blandos bloquean el scroll para que no puedas alcanzar el texto oculto. Fuérzalo de vuelta:
/* Restore normal scrolling */
html, body {
overflow: auto !important;
position: static !important;
height: auto !important;
}Si un script sigue reaplicando el bloqueo, una pequeña regla JS lo vence limpiando el estilo en línea en bucle:
// 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);Desenfocar el texto
Muchos muros de pago dejan los dos primeros párrafos nítidos y desenfocan el resto como adelanto. El texto está completamente ahí — solo está fuera de foco. Quita el filtro:
/* Kill the blur teaser */
.article-body,
.article-content,
[class*="blur" i],
[class*="fade" i] {
filter: none !important;
-webkit-filter: none !important;
}Si el desenfoque está sobre un hijo concreto, inspecciónalo y apunta a esa clase exacta — un * { filter: none } general puede romper efectos legítimos en otras partes de la página.
Quitar el límite de max-height
El otro adelanto clásico: el contenedor del artículo tiene un max-height y overflow: hidden, así que ves la parte superior y un desvanecido con gradiente. Levanta el límite:
/* 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;
}Juntarlo todo en una sola regla
Cada editor usa una mezcla ligeramente distinta. El enfoque eficiente con JustZix es una regla por sitio, acotada de forma ajustada:
- Crea una regla con el patrón de URL
https://news.example.com/*. - Pega el CSS de la capa, el desbloqueo de scroll, el desenfoque y el desbloqueo del límite en la pestaña CSS.
- Añade el JS de desbloqueo de scroll solo si un script sigue rebloqueando la página.
- Mantén estas reglas en una carpeta llamada «Lectura» para poder revisarlas y desactivarlas como grupo.
Como la regla está acotada a un dominio, nunca afectará a un sitio en el que prefieras simplemente suscribirte.
Mira también
- Desactivar patrones oscuros y urgencia falsa — las mismas habilidades, aplicadas a una interfaz manipuladora.
- Una hoja de estilos de impresión personalizada para mejores PDF — limpia un artículo antes de guardarlo.
- Casos de uso de JustZix para más reglas centradas en la lectura.
Para el artículo ocasional oculto tras una capa blanda, instala JustZix y escribe una regla acotada. Y si lees una publicación a menudo — paga por ella. Eso es lo que mantiene los artículos llegando.
Valora este artículo
Sin valoraciones — sé el primero.