Estoy construyendo una extensión de navegador que insertará un trozo de HTML en algunas páginas. Me gustaría que el CSS de la página no se aplique a esta sección. ¿Cuál es la mejor manera de hacer esto? ¿Existe un buen restablecimiento que pueda poner en el elemento raíz de mi HTML y configurarlo para que se aplique después de los demás?CSS: Namespace una pieza de HTML
La única manera de sacarlo al 100% de la cascada es colocarlo dentro de un iframe.
Puede usar una hoja de estilo de restablecimiento de css, pero simplemente prefija todo con su id/clase de elemento raíz. Esto ayudaría en gran medida a combatir los efectos, pero en el campo probablemente tendrá que hacer algunos ajustes más.
Probablemente el mejor enfoque sería establecer simplemente todas las propiedades razonables de sus subreglas. Así que lo que quiero decir es establecer el fondo, el primer plano, la fuente, el tamaño, etc. Defina completamente las reglas para que digan exactamente lo que quiere y no deje ningún espacio para que la cascada complete los valores predeterminados que no interesado en.
Si hago un IFRAME, entonces no puedo interactuar con él desde el javascript en la página (debido a política de dominio cruzado) :( –
sí, estoy de acuerdo en que iframe no es una buena solución para todo lo demás, pero en lo que respecta al bloqueo de CSS es la solución al 100%. Si esto es para su propio uso, simplemente establecería un conjunto de reglas, es importante para ellos y define completamente cómo desea que funcione la caja. Puede haber algunos casos en los que algo se filtra, pero si está consumiendo esto, entonces debería ser fácil parcharlo cuando se rompe. ¿Es esto para usted o para usted? redistribución? – rtpHarry
redistribución :(Supongo que tendré que probarlo extensamente, dudo que la gente lo parche ... –
Puede utilizar un restablecimiento de CSS y aplicarlo solo a un subconjunto de su página. Por ejemplo, this one.
My page
<div id="no-css">
blah blah this has no css
</div>
Por supuesto que tienes que alcance todo en el reinicio, por ejemplo:
ol, ul {
list-style: none;
}
debería ser:
#no-css ol, #no-css ul {
list-style: none;
}
Para simplificar esto, recomiendo el uso de un "marco" CSS como Less que simplifican este tipo de cosas:
#no-css{
/* Big copy and paste of all the reset css file */
}
Usando este código menos, puede realmente usar menos o simplemente generar un nuevo archivo reset.css y usarlo normalmente.
Por supuesto, también puede encontrar un element specific reset pero esta solución le permite elegir el reinicio que más le guste.
La otra solución es insertar su página en un iframe.
Establecí una clase de raíz en mi elemento y realicé un restablecimiento completo en (el del primer comentario). Luego tengo subclases adentro, (digamos 'title') pero luego el CSS de la página' .title {background: blue} 'se aplica más estrictamente que mi' .paulsnamespace {background: none} '. ¿Cómo puedo detener eso? –
Esto parece ser la mejor manera en 2012 - Lo uso para el espacio de nombres de las páginas de mi sitio web en Sass. Es lo único para lo que utilizo IDs: se asignan automáticamente al elemento
mediante un generador de sitios estáticos y luego todas las páginas de CSS se concatenan a través del Sass '' '@ import'''. – iono
Esto también es http://snipplr.com/view/7438/element-specific-css-reset/ – ant