Evitar CSS existente del estilo inyectado HTML/CSS

Estoy trabajando en un proyecto que inyecta JS + CSS + HTML en páginas web sobre las que no tengo control.Evitar CSS existente del estilo inyectado HTML/CSS

Me preocupa la página de host que diseña mi código insertado - Quiero que mi código inyectado obedezca solo a mi estilo, y no el de ellos.

Por el momento, el único método para hacerlo incluye explícitamente especificar cada etiqueta posible para la clase del contenedor <div> (utilizando valores predefinidos del navegador conocidos) y confiar en la herencia para que esas reglas se propaguen hacia abajo al resto de mi HTML inyectado. Este CSS debería aparecer en la parte inferior de la etiqueta <head> de la página.

No creo que sea la mejor solución, sin embargo, y no estoy ansioso por implementarlo. Seguramente hay mejores formas.

Fuente

2009-04-09 Tom Corelis

Otros han sugerido muy buenas maneras de prevenir el CSS afecte de la página, así como la fabricación Asegúrese de que su CSS tenga prioridad, pero parece que le preocupa más el CSS de la página que lo afecta, es decir, agregar un estilo funky e inesperado (como hacer que todos los div tengan un fondo rosa).

La única forma en que puedo pensar para que evites que su estilo afecte tu código inyectado sería que guardes lo que has inyectado, como en un iframe. De lo contrario, simplemente hay demasiadas cosas que tendría que definir: tendría que definir cada estilo (padding, border, margin, background ... la lista sigue y sigue) en el selector "*" (o mejor) aún, "#yourid *", por lo que simplemente anula su propio contenido), solo para que pueda garantizar un control absoluto sobre su CSS.

Editar: Soy consciente de que esta última solución no necesariamente sería demasiado doloroso, si está usando el selector universal para restablecer todo a una línea de base:

#myid * { 
    somestyle1: default; 
    somestyle2: default; 
    ... 
}

que he encontrado someone who has written up such a solution. Si se desplaza lo suficiente hacia abajo en la página, lo verá (desde SuzyUK). No parece completo, pero es un buen comienzo seguro.

(Yo también estaría interesado en saber si hay una buena manera de evitar esto. He escrito los scripts de Greasemonkey antes que inyectan código en la página, y tuve que escribir CSS para sobrescribir el CSS de la página, pero en esos casos, sabía quién era mi objetivo y podía adaptar mi CSS directamente a la página.)

Fuente

2009-04-09 04:17:55

Aquí hay un restablecimiento de CSS de segmentación por elementos más reciente: https://github.com/premasagar/cleanslate – Griffin

Simplemente tendrá que ser muy specific con sus selectores de CSS. Es decir, mucho más específico que las reglas de CSS de la página de host. Es posible que también desee agregar un tipo de restablecimiento de CSS global modificado para restablecer solo su HTML. Con eso, me refiero a algo que restablece todos los colores, fondos, fuentes, relleno, etc., de vuelta a un estándar único. Desde allí puedes construir tus propios estilos.

Fuente

2009-04-09 04:12:17 nickf

+1 para el restablecimiento de Eric Meyer y no el temido * {relleno: 0; margin: 0} – alex

El restablecimiento de CSS es para la estandarización en navegadores, no en hojas de estilo CSS. –

sí, pero un restablecimiento de CSS (con más especificidad que el CSS de host) anulará las reglas establecidas previamente (eliminando fondos de funky pink y similares) – nickf

envolver su HTML inyectado con una específicamente clasificado <div>, como

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

Luego, en el CSS, prefijo todas las reglas con .my-super-specialized-unique-wrapper y utilizar !important en toda regla. Esto instruirá al navegador del cliente para que trate su regla como suprema para cualquier elemento que coincida, independientemente de cualquier otro estilo que pueda tener como objetivo, incluso si otras reglas fuera de su control son más específicas.

Fuente

2009-04-09 04:12:37

¡Gracias por tu respuesta! Ya estoy usando nombres de clases súper específicos para todo, así que ya está hecho y hecho. :-) Aunque tengo algunas preguntas: - ¿Las reglas de CSS especificando los nombres de los elementos (por ejemplo, 'div layer table {}', etc.) prevalecen! Important - ¿Debo especificar qué importancia tiene para cada regla? –

! Invalidaciones importantes * todo * else, no importa cuándo, dónde o cómo se especifique. Debe especificarlo para cada estilo en cada regla en la que le preocupe que el estilo pueda ser anulado por otro fuera de su control. –

¡Por supuesto, existe una preocupación adicional si las hojas de estilo que no controla también emplean! Entonces creo que es una cuestión de qué! Importante se declara último. –

Por qué no inyectables elementos HTML con el formato en línea como esta:

<p style="color:red">This to be injected</p>

línea estilo tiene prioridad sobre cualquier otra regla, y ya se está creando el margen de beneficio con el fin de insertarlo.

Otra solución sería utilizar muy específicas de id DOM en sus elementos y luego peinar en tu CSS añadido

Fuente

2009-04-09 04:14:06

esto no ayudaría si el CSS de host cambia los estilos de otras maneras, por ejemplo: p {font-weight: bold} ... terminarías con párrafos rojos y negrita. – nickf

Es cierto. Supuse que incluía todos los atributos de estilo que desea, no solo el color. Fue solo un ejemplo. –

Si está utilizando un navegador Mozilla, en realidad puede (si es ilegal) agregar contenido DOM visible al elemento < html> fuera el cuerpo <> elemento. Esto evitará cualquier estilo que coincida con el cuerpo y sea heredado por su contenido. Es posible que algunos estilos coincidan con html, lo que vencería esta técnica, pero me pareció útil.

por ejemplo. usando jquery: $ ('html'). append ('< div id = "mycontent"> blah blah blah </div>');

El uso de una biblioteca popular es en sí mismo un desafío cuando no desea que su instancia de la biblioteca interfiera con los usos de la biblioteca definidos por las páginas que está modificando. El '@require' de Greasemonkey no funcionó para mí. Me pareció necesario (¡pero posible!) Guardar cualquier valor existente de los dos o tres nombres globales asignados por el script jquery, insertar mi instancia de la biblioteca en el DOM, esperar a que se cargue (tuve que usar un temporizador, eso es molesto, pero no pude ver una forma de evitarlo), almacenar en caché los valores asignados a los globales dentro de mi propio espacio de nombres para mi propio uso, y restaurar los guardados.

Fuente

2009-04-23 06:57:26

no estoy segura de cómo debería ser utilizado, de la ayuda para este navegador, pero es una de las causas principales de usar http://www.w3.org/TR/shadow-dom/

La idea es que se puede insertar un componente Web, que puede tener un estilo completo y tener eventos específicos que solo afectan al DOM sombreado (para que su módulo no afecte al resto de la página).

Fuente

2015-05-03 21:38:57 eloyesp

Evitar CSS existente del estilo inyectado HTML/CSS

Respuesta

Cuestiones relacionadas